An Introduction to Responsive Design with the Skeleton CSS Boilerplate

By June 22, 2012 Tutorial 8 Comments

What is Responsive Design?

The web is changing in ways that get pretty hard to track. Responsive design attempts to be able to do exactly that – respond. Daily, we serve our site to a wide array of screen sizes including high resolution desktop monitors, notebooks, tablets and mobile phones. Each screen offers unique features and resolutions that do not always accommodate for giant websites. So as designers, developers and internet users, we owe it to ourselves to optimize the user experience on our sites.

Would you like to know about Responsive Web Design? Check out this book.

What is Skeleton?

The Skeleton CSS Boilerplate is a collection of CSS files that can help developers quickly create sites that respond to any size screen.

  • Skeleton is Responsive Down to Mobile
    • Desktop, Tablet and phone screens, Skeleton has you covered. Not only is skeleton easy to implement, but it also avoids annoyingly sending your users to an mobile.yourdomain.com address.
  • Skeleton is Fast to Start Developing With
    • There is nothing to compile here; to get going with skeleton simply link a few stylesheets to your header and you are off and running.
  • Skeleton Fits any Style
    • Skeleton does not come with loads of UI styles. This gives designers the ability to paint on a blank canvas, while backed with the power of Skeleton.

Have you ever used the 960.gs framework? Most front end developers have. If you have ever used 960 or a framework like it, then you are ready to get going with Skeleton from the start. With a nearly identical column and gutter arrangment, 960.gs users will be right at home with Skeleton.

Here at Untame, we use Skeleton regularly to make sure that our newest sites fit multiple devices and provide a positive user experience for our clients.


How Do I Use it?

To get started with Skeleton, head over to www.getskeleton.com and download the latest version of the framework.

As you can see, getting started with Skeleton is actually very easy. Give it a try with your next responsive project. If you would like some help or have a question about responsive design, don’t hesitate to send us a note.

About Brock Nunn

Brock Nunn is a web designer and developer specializing in building custom WordPress for over three years. Brock operates through his company Brock Nunn Web Design offering clients personal service with outstanding results. You can follow Brock on twitter @banunn.

8 Comments

  • Ben says:

    Hi Brock,

    thank you very much for your quick tutorial. I am just wondering if there is a solution with the skeleton framework for the following problem:
    In case someone visits your website with a mobile device and want’s to switch back to the “standard” desktop version of the website, I’d like to include a button that tells the website that I am not using a “mobile” resolution. Is there any chance for a solution (css/javascript)?
    Hope to hear your opinion on this.

    Best, Ben

    • Brock Nunn says:

      Hi Ben!

      Thank you for your comment. Unfortunately Skeleton does not support that type of functionality. However, if you were to use a little bit of jQuery or PHP, you could create a link that would discard the “layout.css” file. Perhaps not the most ideal of circumstances, but it would work. I can do a tutorial soon on how to accomplish the effect.

      Thanks again!

  • Øyvind says:

    Hallo! Nice Tut
    I tried to style my footer with a backround color in the layout stylesheet, but it didnt work. I had to do like you did in the header. Why is that ?
    Øyvind

    • Brock Nunn says:

      Hi there! You may want to ensure that the footer of your page is taking up space within the page. For instance if you have floated elements within the footer, in some cases it is advisable to add the style “overflow: hidden;” This will force even floated content to take up space. With this complete you may be able to add a background color to your footer. Thanks for the comment!

  • Thibaut says:

    Hi
    This is the first time i used skeleton grid on a real project and i have some problems now with responsiveness.

    The site is http://www.teradelis.com and the responsive work on computer when you resize the window but it doesn’t work on smartphones (tested with Galaxy S3)..

    I’m asking why? Why does it work for a computer screen and not for a smartphone.

    I already checked all the stylesheet links and all the procedure to make skeleton work and it only work on computer.

    I’ll test soon on Ipad to see if it run.
    Thx

  • Thibaut says:

    Ok guys i forgot the meta viewport. I didn’t know this meta before 😉

  • Bryan says:

    Hello.
    Just curious as to how you styled your navigation to change when it switches to a mobile resolution. Any pointers would be much appreciated.
    Thanks!

Leave a Reply

What is 5 + 12 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
Start planning your project today. Get Started