WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Responsive Web Design - Frameworks


There are many existing CSS Frameworks that offer Responsive Design.

They are free, and simple to use.


Using W3.CSS

An incredible method to make a responsive plan is to utilize a responsive template, as W3.CSS

W3.CSS makes it simple to create locales that look pleasant at any size; work area, PC, tablet, or phone:

W3.CSS Demo

Resize the page to see the responsivenes!

Taj Mahal (Agra, India)

Taj Mahal was worked somewhere in the range of 1632 and 1648.

Considered the absolute best example of Muslim craftsmanship in India, the white marble structure really speaks to various compositional styles, including Persian, Islamic, Turkish and Indian.

Statue of Liberty

There's not a face in America that won't perceive this noteworthy beauty!

One of the best blessings we've at any point gotten, this notable milestone was devoted in 1886.

Brooklyn Bridge

The ideal spot for a walk or bicycle ride, the stunning perspectives you'll encounter while crossing this scaffold are remarkable! Associating Brooklyn and Manhattan, this notable extension was named a National Historic Landmark in 1964.

Example

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

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

<div class="w3-push padding">

<div class="w3-third">
  <h2>Taj Mahal</h2>
  <p>Taj Mahal was worked somewhere in the range of 1632 and 1648.
  Considered the absolute best example of Muslim craftsmanship in India, the white marble structure really speaks to various engineering 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 perceive this notable beauty!</p>
  <p> One of the best blessings we've at any point gotten, this notable milestone was committed in 1886.
  .</p>
</div>

<div class="w3-third">
  <h2>Booklyn Bridge</h2>
  <p>he ideal spot for a walk or bicycle ride, the stunning perspectives you'll encounter while crossing this bridge
  are exceptional! Interfacing Brooklyn and Manhattan, this notorious scaffold was named a National Historic Landmark in 1964.</p>
</div>

</div>

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

To become familiar with W3.CSS, read our W3.CSS Tutorial.


Bootstrap

By utilizing boot lash it helps HTML, CSS and jQuery to make responsive site pages .

You can import record content boot tie Nowdays numerous individuals are utilizing bootstrap You can see different site like twitter .

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, beginning 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 need to consider additionally programming Bootstrap Tutorial begin now.


Skeleton

Nowdays prevalent framwork is structure is Skeleton, it utilizes just 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, introductory 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 »