Responsive Web Design with Skeleton

Responsive Web Design with Skeleton

Responsive Web Design with Skeleton

Hello friends! Today I am 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.

As everybody is aware of Responsive Web Design; in my view it is the web design that responds to the screen changes. So 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


Got Something To Say:

Your email address will not be published. Required fields are marked *


*