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.w3schools.com/lib/w3.css">
<body>
<div
class="w3-container orange">
<h1>W3Schools 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 »
