Latest web development tutorials
 

Responsive Web Design - Frameworks


There are many existing CSS Frameworks that offer Responsive Design.

They are free, and easy to use.


Using W3.CSS

A great way to create a responsive design is to use a responsive style sheet, like W3.CSS

W3.CSS makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phone:

W3.CSS Demo

Resize the page to see the responsivenes!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<body>

<div class="w3-container orange">
  <h1>w3ii Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">

<div class="w3-third">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>

</div>

</body>
</html>
Try it Yourself »

To learn more about W3.CSS, read our W3.CSS Tutorial.


Bootstrap

Another popular Framework is Bootstrap, it uses HTML, CSS and jQuery to make responsive web pages.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>
Try it Yourself »

To learn more about Bootstrap, go to our Bootstrap Tutorial.


Skeleton

Another popular framework is Skeleton, it uses only CSS to make responsive web pages.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Skeleton Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="normalize.css">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
</head>
<body>

<div class="container">
  <h1>My First Skeleton Page</h1>
  <div class="row">
    <div class="one column">
      ...
    </div>
    <div class="eleven columns">
      ...
    </div>
  </div>
  <div class="row">
    <div class="one-half column">
      ...
    </div>
    <div class="one-half column">
      ...
    </div>
  </div>
</div>

</body>
</html>
Try it Yourself »