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.

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.

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:

And the CSS for jumbotron is:

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:

And following is the CSS for the same:

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

Add Comment Register



Got Something To Say:

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


*