WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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!

Taj Mahal (Agra, India)

Taj Mahal was built between 1632 and 1648.

Considered the most perfect specimen of Muslim art in India, the white marble structure actually represents a number of architectural styles, including Persian, Islamic, Turkish and Indian.

Statue of Liberty

There's not a face in America that won't recognize this historic beauty!

One of the best gifts we've ever received, this iconic landmark was dedicated in 1886.

Brooklyn Bridge

The perfect place for a walk or bike ride, the jaw dropping views you'll experience while crossing this bridge are unforgettable! Connecting Brooklyn and Manhattan, this iconic bridge was named a National Historic Landmark in 1964.

Example

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

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

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

<div class="w3-third">
  <h2>Taj Mahal</h2>
  <p>Taj Mahal was built between 1632 and 1648.
  Considered the most perfect specimen of Muslim art in India, the white marble structure actually represents a number of architectural styles, including Persian, Islamic, Turkish and Indian.</p>
</div>

<div class="w3-third">
  <h2>Statue of Liberty</h2>
  <p>There's not a face in America that won't recognize this historic beauty!</p>
  <p> One of the best gifts we've ever received, this iconic landmark was dedicated in 1886.
  .</p>
</div>

<div class="w3-third">
  <h2>Booklyn Bridge</h2>
  <p>he perfect place for a walk or bike ride, the jaw dropping views you'll experience while crossing this bridge
  are unforgettable! Connecting Brooklyn and Manhattan, this iconic bridge was named a National Historic Landmark in 1964.</p>
</div>

</div>

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

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


Bootstrap

By using boot strap it helps HTML, CSS and jQuery to make responsive web pages .

You can import file script boot strap Nowdays many people are using bootstrap You can see various website like twitter .

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 »

If you want to study more programming Bootstrap Tutorial start now.


Skeleton

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

You can import skeleton framwork online site

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 »