Build a Responsive, Mobile-Friendly Web Page With Skeleton

by on 27th May 2011 with 38 Comments

screenshot

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?

screenshot

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

screenshot

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.

Stylesheets

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.

screenshot

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.

CSS

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)

screenshot

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.

DS

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!

screenshot

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.

DS

Built with Skeleton

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

CSS

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:

screenshot

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.

screenshot

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.

Conclusion

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

38 Comments

Comments & Discussion

38 Comments

  1. Tanya says:

    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.

  2. Stephen Cox says:

    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

  3. 保險 says:

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

  4. Michael says:

    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…

  5. 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.

  6. Chad Johnson says:

    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.

    Chad.

  7. 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.

  8. David Simpson says:

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

  9. TopPage says:

    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;

  10. Dimitree says:

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

  11. Maureen says:

    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?

  12. Brian Mater says:

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

  13. Jay says:

    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.

  14. Aliya says:

    @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:

    .column:first-child
    {
    margin-left: 0px;
    }

    .column:last-child
    {
    margin-right: 0px;
    }

  15. Elmira says:

    Appreciation for this ifonmration is over 9000-thank you!

  16. Prodyot says:

    Nice tut.
    Thanks bud.

  17. 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!

  18. useless says:

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

  19. responsive says:

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

  20. Gournis says:

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

  21. Andrew says:

    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…

  22. Ann says:

    Nice tutorial. Thanks!

  23. Bikehound says:

    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.

  24. Jonathan says:

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

  25. Jonathan says:

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

  26. Glen says:

    @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
    :)

  27. Craig says:

    @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.

  28. moog.gia says:

    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.

    Gia

  29. Leo says:

    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.

    thanks,
    Leo-

  30. Tanya says:

    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?

  31. wazile says:

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

  32. Megan says:

    Thank you for this!!

  33. Castro says:

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

  34. 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

  35. Tarun says:

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

Leave a Comment

Subscribe
Membership
About the Author