Build a Responsive, Mobile-Friendly Web Page With Skeleton

by on 27th May 2011 with 49 Comments


Recently we published an article showcasing 20 Amazing Examples of Using Media Queries for Responsive Web Design. These web pages respond extremely well to different browser window sizes, from huge HD screens to smartphones.

Today we’re going to show you how to use a boilerplate called Skeleton to take the headaches out of designing and building a responsive web page. You’ll be stunned at how easy it is!

What Is Skeleton?


The Skeleton Home Page describes the project as “a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.”

Essentially, what Skeleton creator Dave Gamache has done is reform the aging 960 framework to better face the modern challenges presented by the wealth of devices that regularly access the web. Though the project also includes a few extra goodies like jQuery, today we’ll be focusing primarily on the layout aspect. Keep in mind that because this boilerplate is organized so well, it’s fairly easy to strip out anything that we don’t use. The author places a strong emphasis on customization: keep what you like, change what you don’t!

Sneak Peek

Live Demo: Click to Launch


Getting Started

Step one is to go download the project. After you’ve got everything downloaded and unzipped, open up the included HTML file and ditch everything inside of the container.

Before we get into building the page, it’s important to figure out how it all works. Skeleton is built on a grid framework, so if you hate grid frameworks, it’s not going to win you over. Feel free to stop reading now, leave a nasty comment about semantic web development and move on.

For those of you still interested, there are sixteen columns, each of which has a margin-left of 10px and a margin-right of 10px. With a total width of 960px for the container, here are the sizes for each column:

/* Base Grid */
.container .one.column			{ width: 40px;  }
.container .two.columns 		{ width: 100px; }
.container .three.columns 		{ width: 160px; }
.container .four.columns 		{ width: 220px; }
.container .five.columns 		{ width: 280px; }
.container .six.columns 		{ width: 340px; }
.container .seven.columns 		{ width: 400px; }	
.container .eight.columns 		{ width: 460px; }
.container .nine.columns 		{ width: 520px; }
.container .ten.columns 		{ width: 580px; }	
.container .eleven.columns 		{ width: 640px; }	
.container .twelve.columns 		{ width: 700px; }
.container .thirteen.columns 		{ width: 760px; }	
.container .fourteen.columns 		{ width: 820px; }	
.container .fifteen.columns 		{ width: 880px; }
.container .sixteen.columns 		{ width: 940px; }

As with most column systems, your goal is to add up to the total number: 16. So if you want to split the page between two columns, you would create two separate divs and apply the classes “eight columns” to each.

There is some other helpful functionality that you should know as well, such as the ability to split the width by thirds. Simply apply the “one-third” or “two-thirds” classes, which are equal to 300px and 620px respectively.

.container .one-third.column 		{ width: 300px; }
.container .two-thirds.column	 	{ width: 620px; }

Also, to create gaps or empty columns, you add the offset classes: offset-by-one, offset-by-two, etc. Each of these essentially adds sixty more pixels of padding to account for the gaps in content.


The code above comes from the included “skeleton.css” file. There are two other important CSS files as well: base and layout. The “base.css” file includes preset styles for typography, buttons, forms, tabs, etc. Most of what’s in here is completely optional and meant to be overridden by the user. If you think this boilerplate is too hefty for what you want to do or takes too much control, ditch this file.

The “layout.css” file is a heavily organized but still mostly empty stylesheet included for your convenience. This is where you will put any custom CSS that you want to add for your page. This CSS file also holds any extra @media queries that you might want to implement. The default queries are in “skeleton.css” and basically just apply a new width to all of the column classes when the window is reduced to certain sizes.

Web Page Step 1: Navigation

Now that we know the basics of Skeleton, let’s jump in and build a web page with it! We’ll keep the design nice and minimal to focus on how clean and organized everything comes out with almost no effort on your part.

The first thing we want to add to our page is a simple logo element and some navigation links. Each of these gets its own div and we’ll give the first a width of two columns and the second a width of fourteen (2+14=16).

Next, we’re going to put a simple “DS” for Design Shack in the first div and a list of links in the second div. We’ll stick with much of the default styling for the text just so you can get a feel for what the Skeleton styles are.

Navigation CSS

Skeleton will take care of our layout and most of our text styling. All we need to do is add some vertical margins to put everything where we want it. I also decided to scrap some of the default link styling in favor or my own.

What I’ve done is applied some top spacing to the entire container just to bump it down a little. I’ve also moved the links down some because by default they were aligning with the top of the big “DS” and I wanted them near the middle.

.container {
	margin-top: 50px;

#nav {
	margin: 13px 0 0 0;

#nav ul li {
	display: inline;
	margin: 0 20px 0 0;
	margin-bottom: 130px;

#nav a {
	text-decoration: none;

#nav a:hover {
	text-decoration: underline;

With that, we’re off to a good start. The text styling from Skeleton is coming out great and definitely lends itself to the classic, minimal look we’re going for here.


Step 2: Header Image

When designing a responsive web page, it’s important to understand how images work. Sure, anything that the browser renders can be resized but what happens when an image is too large for its contracting container?

To answer this question, let’s thrown in a huge image at the top of our page. To do this, we add in another div just like before. It’ll be the full width of our container so we need to apply the “sixteen columns” classes.


Now, that alone puts our image into position but it doesn’t handle the browser size problem we mentioned. To accomplish this we need a little CSS magic. Notice that we applied the “headerImage” ID to this div, now we can target this image specifically with the following CSS.

#headerImage img {
	margin-bottom: 50px;
	max-width: 100%;
	height: auto;

The margins here are just to space this section out from the next step but the other two lines are very important. By setting the max-width to 100% and the height to auto, we effectively create an image that resizes according to its container.

You might be wondering why Skeleton doesn’t just do this for us, and the answer is that it does. This is actually in the code but has been commented out with the advice that it’s best not to globally apply it to all images but rather specific circumstances. This prevents it from breaking various slider and lightbox plugins.

With that, we have a nice big image at the top of our page that automatically adjusts as the page width is reduced! (Image Source: Nishanth Jois)


Step 3: Welcome Message

I’m calling this next section the “Welcome” section simply because I don’t have another good name for it. Now that we’ve tried a navigation area and an image, we still need to test out a pure text paragraph and one containing images mixed with text. This will be the former.

Building off of the same HTML we’ve already constructed, start a new sixteen column div and toss in a header and a paragraph as shown below.


Built with Skeleton

This page was built for Design Shack using Skeleton, an awesome framework for building responsive web pages...

Welcome CSS

The only CSS we need to add is some bottom margins so we can again space it out a little. It should be pointed out that Skeleton has an “add-bottom” class that throws in some margins, but I like to have more control to set each item individually.

#welcome {
	margin-bottom: 20px;

As you can see in the image below, everything just falls right into place. Despite their downfalls, grid systems sure do make layout easy!


Step 4: Three Columns

Now we’ve done a navigation section, an image by itself and a paragraph by itself. It’s time to create some columns that integrate text and images together. To accomplish this, we’ll use the “one-third” class that we learned about above. This will allow us to quickly split the width into three columns of content with almost no work on our part.

We’ll start with the block of HTML below. First we throw in an h2 tag, then an image and finally a paragraph of text.

We’ll take this section and insert three of them in a row at the bottom of our HTML to finish off our project. This should give us three columns that span the width of the container, each containing a headline, image and paragraph.


Built with Skeleton

This page was built for Design Shack using Skeleton, an awesome framework for building responsive web pages...


As before, we’ll need to make sure these images resize properly to their containers so we’ll throw in the max-width and height properties.

.feature img {
	margin-bottom: 15px;
	max-width: 100%;
	height: auto;

Testing it Out

With that, we’re all finished! Notice that we didn’t do anything at all with media queries to ensure that everything scales properly. All we did was build a site like we normally would. The magic of Skeleton is that it takes care of the complicated stuff for you!

To test it out, launch the live demo and resize the window. Here’s the layout that you should see when the browser window is at full size:


If we scale the window down a bunch, we see some dramatic changes. The layout completely reinvents itself, and the amazing part is, it still looks great! I didn’t even take the time to imagine what everything would look like when it was reformatted but here it is all nice and in a vertical stack.


To finish, you can customize the items in the images folder for your own purposes. Skeleton includes various visual resources such as the Apple Touch Icon for iOS devices and a favicon.


When I first started reading about responsive web design, I appreciated the obvious benefits but wasn’t too excited about the extra work that it takes to plan a website that fits any size device.

However, with a tool like Skeleton, the effort that it takes to make a webpage responsive is really quite minimal. If anything, it’s a good sample to look through and tear apart to see some good practices for implementing your own responsive system.

Leave a comment below and let us know what you think of Skeleton. Do you think that responsive web pages are worth the extra effort? Have you started making your designs friendly towards a wide range of devices?

Comments & Discussion


  • Tanya

    It is may be good for mobiles but is not good for smaller desktop resolutions. Images and the whole web page do not scale even for resolution 1024 px, I make such websites in percents only, not in pixels. Thus it scales and shrinks and fits not only mobiles but any other screen resolution.

  • Stephen Cox

    Nice article. Yes I think it’s worth it. And I an gonna use Skeleton. Gonna make a major change though (or at least try too) – I’d rather have a flexible grid using %, rather then px’s.

    If it works out, I’ll post to to the author’s Github

  • 保險

    Hey, why create one when there is already made? go to checkout They do have a mobile ready template and check out We build our website based on that and we are mobile ready.

  • Michael

    I guess I am a bit confused… So this “boilerplate,” so to speak, will take care of formatting your website while using mobile devices? What would the difference be in developing a fluid site vs skeleton?

    Maybe I am just confusing myself…

  • Jack Watson-Hamblin

    Looks like the kind of tool that Responsive Web Design needed. Grids have become the norm for designing any general website, introducing RWD to grids in such a simple way makes this brilliant on its own, then add the small extras like tabs, buttons, and some nice form and typography defaults, and you’ve got something I’ll be using for most projects. Excited to see it’s future development too.

  • Chad Johnson

    A quick question that is a bit off-topic, I love the the main image you used in the example (field.jpg), would you happen to have the full res image or a link of the original?

    Thnx in advance.


  • Paginas Internet Puerto Rico

    Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

  • David Simpson

    Would combining the fluid 960 grid system with the use of media queries achieve essentially the same result?

  • TopPage

    Very nice, but I think that fixed values are a little 2001. I was thinking that you could use this instead:

    .container .one.column { width: 6.25%; }
    .container .two.columns { width: 12.5%; }
    .container .three.columns { width: 18.75%; }
    .container .four.columns { width: 25%; }
    .container .five.columns { width: 31.25%; }
    .container .six.columns { width: 37.5%; }
    .container .seven.columns { width: 43.75%; }
    .container .eight.columns { width: 50%; }
    .container .nine.columns { width: 56.25%; }
    .container .ten.columns { width: 62.5%; }
    .container .eleven.columns { width: 68.75%; }
    .container .twelve.columns { width: 55%; }
    .container .thirteen.columns { width: 71.25%; }
    .container .fourteen.columns { width: 77.5%; }
    .container .fifteen.columns { width: 83.75%; }
    .container .sixteen.columns { width: 100%; }

    My math is probably wrong somewhere, but I think you get the idea…

    Then for container (so folks with 10 foot screens dont have to look at 10 ft of text LOL):

    #container {
    width: 100%;
    max-width: 1200px;

  • Dimitree

    @TopPage – Nice thought. Maybe one step further is to use .em instead of px values for headings.

  • Maureen

    Has anyone tried to build a webpage and then validate it using Skeleton? There appears to be many problems in the code… Also curious as to why I can build a template that validates (after I did some fixes to the code) and then when I build the page based on that template, the page won’t validate? Almost seems like the template and the page are different html versions?

  • Brian Mater

    Hi, Thanks for this article. Nothing like an example to drive home the point. Well written!

  • Jay

    Brilliant, thanks for this.

    Just a quick question though, for the classnames in the html, should they have a full stop eg: “sixteen.columns” and not “sixteen columns”
    The latter doesn’t actually work properly for me as it doesn’t reference the css selectors exactly.

  • Aliya

    @Jay – when a css selector uses the syntax of either element1.class2 or .class3.class4 where there is no space between the two then the selector is calling all element1’s with class2’s or class3’s that also have class4. So, the way the author wrote it is correct. Hope that made sense.

    What didn’t work for me was the three columns. The last column was pushed to the next line. This is due to the fact that the first column shouldn’t have a margin on the left and the last column shouldn’t have a margin on the right.

    Here’s what I added to layout.css to fix this:

    margin-left: 0px;

    margin-right: 0px;

  • Elmira

    Appreciation for this ifonmration is over 9000-thank you!

  • mzhguab

    8mDm9b kgjmlrbxrggc

  • Prodyot

    Nice tut.
    Thanks bud.

  • Wirral Web Designer

    Skeleton is a great framework if you’re used to designing for 960pixel grids – it certainly takes the headache out of creating responsive sites. This is a great tutorial which very clearly explains not only how to use Skeleton, but also how to use images in responsive design very well. Thanks!

  • useless

    Although it’s great for regular website…..this responsive thing is just not for background-fullscreen layout sites

  • responsive

    When I resize the window to mobile size…about 320px width….the feature image (field.jpg) is resized too small….

  • Gournis

    great tutorial, just one little thing: How can include a responsive slide-show in skeleton?

  • Andrew

    I’m trying to get my images to scale but it’s doesn’t seem to be working very well. I used the exact code in this tutorial but it simply stays the same size while the rest of the site scales…

  • Ann

    Nice tutorial. Thanks!

  • Bikehound

    Andrew, and anyone else trying to get images to scale – You need to give them class=”scale-with-grid” in your img tag in html. If they become larger than the number of columns available to them, they will scale. Alternatively give them a max width in % of their containing div and they will shrink as the div shrinks. Have a play about and see how it goes.

  • Jonathan

    I´m not clear if I should write my css in another sheet or inside one of the css provided. Anyone?

    • DK

      I too was wondering this…..

  • Jonathan

    Thanks a bunch for the tutorial, I figured the stylesheet question! Really enjoyed it.

  • Glen

    @Aliya, when nesting columns, add class name ‘alpha’ to the left-most nested column and class name ‘omega’ for the right-most column. That eliminates the left and right margins respectively in the nested columns. it has these built-in without needing a fix

  • Craig

    @Aliya, @Glen actually as long as you add “-last” to the class of the last column eg: “one-third-last column” it will take off the margin right on its own, without the need to re-write the styles.

  • moog.gia

    Cool article, I downloaded Skeleton a few days ago but didn’t have the time to learn its basics. It is a nice starter, I think I will use it to make my WPThemes responsive.


  • Leo

    Thank you for this wonderful post, I was able to design my web site by following this tutorial. Would let me know, how I can have the top Navegation bar to move all the way to the right? If I add float it will move it to the right, but it will also make the nav bar higher, pushing the image box down.

    any help will be greatly appreciated.


  • Tanya

    Newb question here: I’m only starting to learn about responsive design, frameworks, all that good stuff. I’ve downloaded the basic Skeleton files and got to work on some css stuff, but I’m lost on the proper techniques for inserting jquery plugins. Can anyone recommend a good “building a website with Skeleton and jquery for Dummies” tutorial?

  • wazile

    Nice tutorial! I understand more how to create responsive website using skeleton. Thank you!

  • Megan

    Thank you for this!!

  • Castro

    Very nice artcle, I now understand more on how to create a website responsive with columns!

  • kent plumbing supply

    It’s a pity you don’t have a donate button! I’d without a doubt donate to this outstanding blog!
    I suppose for now i’ll settle for book-marking and adding your RSS feed
    to my Google account. I look forward to fresh updates and will share this website with my Facebook group.
    Talk soon!

    My website; kent plumbing supply

  • Tarun

    I have just started to learn, it looks to good for learers

  • Angelika

    It’s remarkable to go to see this website and reading the views of all mates about this post, while I am also keen of
    getting knowledge.

  • maternity photo

    Link exchange is nothing else but it is simply placing the other
    person’s web site link on your page at proper place and other person will also do same for you.

  • Melvina

    I blog often and I really appreciate your content. Your article has truly peaked
    my interest. I am going to take a note of your
    blog and keep checking for new details about once a week.
    I subscribed to your RSS feed as well.

    Here is my web-site; weight loss diets (Melvina)

  • triple net lease terms

    Senior life insurance is becoming a well known strategy
    to help cover the bills after a passing.
    No test is required to graduate and everyone who enters the course leaves with a certificate.
    Considering this, it is wise not to close the
    deal unless and until you are sure of having adequate reserved funds even if the transaction seems
    to offer huge potential profit.

    Here is my web site: triple net lease terms

  • Gym Clothing Cole Haan Shoes Cole Haan Shoes For

    It is a good idea to dress in thin layers so
    you can peel some clothing off once you start to warm up.
    The ways that aeroplanes are designed today are so much more
    advanced than, say, fifty years ago. Many people
    experience improvement when they switch to cotton socks.

    Check out my weblog … Gym Clothing Cole Haan Shoes Cole Haan Shoes For


    Thank you for another informative website. Where else could I am getting that kind of
    information written in such a perfect means?
    I have a challenge that I am simply now running on, and I’ve been on the
    look out for such information.

  • try making

    What’s up Dear, are you truly visiting this site on a regular
    basis, if so aterward you will definitely take niice experience.

  • Senior Pictures Dallas TX

    It is really a great and useful piece of info. I am satisfied that you shared this useful info with us.
    Please keep us informed like this. Thanks for sharing.

  • laguna beach marketing jobs

    Many people advertise affiliate marketing as something
    that can be started for fairly cheap. There was a
    television show called Siskel and Ebert that would tell us whether the movie was “two thumbs up” or “two thumbs down”, but usually, we didn’t believe them.
    The major challenge of SEO is that there are billions
    of pages in the search engine indexes and your position in the SERPS is
    dependent on a constantly changing algorithm which is not published.

    My web-site laguna beach marketing jobs

  • chloe sims starship car eyelashes prices

    But if this tan is from the sunrays, there is a risk that you may get uneven skin tone, blotchy
    skin, sunburns, and maybe skin diseases due to continuous exposure to UV rays of the Sun. This product is safe for sensitive skin types and gives a natural-looking tan throughout the year.
    Use an extremely light touch (if any at all) if your skin is already darker there.

    Review my blog post: chloe sims starship car eyelashes prices

  • people Notice

    I was recommended this web site by my cousin. I am not sure whether
    this post is written by him as no one else know such detailed
    about my problem. You are incredible! Thanks!

    my site … people Notice


About the Author