Responsive Web Design with Skeleton

Responsive design is the basics for a Web Application to behave on multiple screens these days. Let's see how you can achieve it faster with Skeleton

Responsive Web Design with Skeleton

Responsive Web Design with Skeleton
Responsive design is the basics for a Web Application to behave on multiple screens these days.

In this post we are gonna discuss about the Responsive Web Design with Skeleton. Actually skeleton is a Boilerplate code which will provide basic structuring and handy classes of CSS to get going for Responsive web design.

If you are new to Responsive Web Design; in my view; it is the web design that responds to the screen width changes.

And with skeleton you can do that very easily and fastly.

Why skeleton?

With skeleton you wont be getting extra styles for your page. Only responsive helper and yes there is also a choice to choose the number of grid columns. You can have either 12 or 16 or 24 columns in your grid.

Now to get started; lets download the skeleton and put some necessary things. You can download the latest version from getskeleton.com.

As after download you can see the compressed archive; it contains the following files.

skeleton/
├── images/
│   ├── apple-touch-icon-114x114.png
│   ├── apple-touch-icon-72x72.png
│   ├── apple-touch-icon.png
│   └── favicon.ico
├── stylesheets/
│   ├── base.css
│   ├── layout.css
│   └── skeleton.css
└── index.html

Now required files are there; we will create some of our own files like style.css, script.js etc. And these fill contain all our code regarding the site. Though you can use layout.css for styling and main.js for scripting.

As we have created our own files; we will link them to the page. Now lets consider the site design that we had used in site with Bootstrap framework.

Site Layout

As we can see we have to make a top-bar, jumbo-bar, three container columns. The power of skeleton comes up in the columns that behave responsively.

So same as bootstrap; here is a container class .container which will limit the width. So if you want to fix the width; use this class.

Our top bar is of full width and the inside content is visible in fixed width container. So here is the html code for the top bar.

<div id="top_bar">
  <div class="container">
    <ul>
      <li><a href="#"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
      <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#"><i class="fa fa-rss"></i></a></li>
    </ul>
  </div>
</div>

Now here I am using font-awesome for social icons. A brief guide to use font-awesome is available here.

Now lets come over the jumbotron. Here we don’t have any helper class for jumbotron so we will have to create css for that. Here is the HTML for jumbotron:

<div class="container">
  <section>
    <div class="jumbotron">
      <p>Jumbotron</p>
    </div>
  </section>
</div>

And the CSS for jumbotron is:

.jumbotron{
  background-color: #eee;
  background-image: url('images/congruent_pentagon.png');
  height:300px;
  border-bottom: 1px solid #ccc;
}
.jumbotron p{
  text-align: center;
  font-size: 3.5em;
  color: #999;
  line-height: 300px;
}

Now we have three columns design. So we will use the row class to div with one-third column to child divs. This will create a three column row. Following is the HTML for that:

<section>
  <div class="container">
    <div class="one-third column featured">
      <h2>Products</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
      <a class="mybutton" href="#">Know More</a>
    </div>
    <div class="one-third column featured ">
      <h2>Services</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
      <a class="mybutton" href="#">Know More</a>
    </div>
    <div class="one-third column featured ">
      <h2>Support</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
      <a class="mybutton" href="#">Know More</a>
    </div>
  </div>
</section>

And following is the CSS for the same:

.featured{
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.featured h2{
  margin-top: 20px;
  font-weight: normal;
}
.featured p{
  padding:20px 30px;
  margin-bottom: 0;
}
a.mybutton{
  border:1px solid #999;
  padding:8px 12px;
  border-radius: 3px;
  margin:5px 0px;
  display: inline-block;
  text-decoration: none;
}
a.mybutton:hover{
  background-color: #eee;
}

Similarly you can create more than three columns by using columnCountText and column class. For example: div class=’seven column’.

For images; skeleton provides a helper class scale-with-grid. With this class images can be made to scale with the column width.

Skeleton also provides clear fix helper class. Use the clearfix class to clear the floats.

You can download the skeleton from http://www.getskeleton.com/#download.

So get started and build some beautiful layouts with the Skeleton. You can find some showcase sites at http://www.getskeleton.com/#examples.

Demo  Download