Getting Started with Skeleton, the Simple CSS Boilerplate

Originally published at: http://www.sitepoint.com/getting-started-with-skeleton-simple-css-boilerplate/

In early December, Skeleton released a new updated version. In fact, it was its first update for almost two and a half years. That’s good news for those of us who have used Skeleton in the past and loved its simplicity!

In this article, I’ll introduce you to this lightweight CSS framework. I’ll start giving a brief intro about it and presenting its major features. Then I’ll show you how to use it in a real project, which will be based on a demo page that I’ve built.

What is Skeleton?

As mentioned above, Skeleton is a lightweight CSS framework (or boilerplate, if you prefer this definition) created by Dave Gamache. More specifically, it’s two CSS files: the popular normalize.css file and the skeleton.css file. The latter contains the framework’s styles, which are limited to around 400 lines of uncompressed code.

The most important part of Skeleton is its grid system, which I’ll analyze later in this article. Additionally, the framework provides basic styles for common HTML components like buttons, lists, tables, and forms.

To get the latest version of Skeleton, you can visit the website and download the zipped folder. An alternative option is to fork the GitHub repository.

After you download and extract the compressed folder, your file structure would look like this:

Skeleton/
├── css/
│     ├── normalize.css
│     └── skeleton.css
├── images/
│     └── favicon.png
└── index.html

Similar to frameworks like Bootstrap and Foundation, Skeleton also uses a mobile-first approach. However, as discussed, it doesn’t include the large number of components that those frameworks offer; it contains only some fundamental CSS rules that help you kick-start your development process.

It’s worth mentioning that Skeleton is fully functional in all the latest browsers including IE9+. Finally, you can also opt for the Sass or Less extensions of Skeleton.

Versions: Latest vs. Previous

There are many differences between the current version and the previous one. The table below summarizes the most important differences:

Continue reading this article on SitePoint

I created a SASS/framework version based on Skeleton by the way if anyone is interested: https://github.com/mrwigster/simpul

Nice job! Thanks for sharing it!

I created www.archivesalive.co.uk on the old Skeleton. Thanks for drawing my attention to this mobile-first update, I’ll give it a try!

Glad this article helped you learn something new!

Where can I find a PSD of this new grid?

Perhaps it could be a good idea to contact Dave Gamache, who is the creator of this boilerplate.

I don’t understand what’s row class is. Where is it in skeleton.css? I can’t find that class at all. I’m sorry if this sounds stupid

The row class is just for clearing floats around the columns. Skeleton provides the following code snippet:

.container:after, 
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

That means, if you want, you can structure your HTML without including the row class. However, in this case you should clear the floats around your columns. To do this, you can use the helper u-cf class as a wrapper for your columns.

Great article and demo. You really helped me understand how Skeleton works. I’ve researched and tried out a couple other boilerplates and I feel that Skeleton would work best for me. I especially like that it is not very restrictive and it also has a nice grid system. Thank you for the article.

Hi @Cthulhoo_X
Thank you! I agree with you… I really like it because it is simple but also powerful at the same time!

Thanks a lot for the geat article and demo! There’s only one thing I wonder…

On http://getskeleton.com/, I read that:

“The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly”.

You say that the wrapper can have a max-width value of 960px.

I downloaded Skeleton and tried to set wrapper max-width to 1200px, and, at least in the basic page of the demo included, everything seems to work fine e.g. columns resize accordingly and the page looks good, when tested on different responsive layouts.

Why then that limitation to 960px? Do I have to expect any unwanted surprise when populating the page?

Thank you for your kind attention

960 is a decent size. There’s no reason why you can’t set it to 1200px. Or even 1500px. Perhaps 1000px. Nothing will break from that alone, considering all children will work on percentages based off the parent width.

Thanks so much for the quick reply! :blush:

ok, i have what might be a ridiculously easy question. i’ve been learning and using CSS over the past few years and have a decent handle on it as it relates to wordpress. now im starting to design some homepages that would be perfect for skeleton. the thing is, im not sure what to do with the files i’ve downloaded from the site. where do i put them and/or how do i use the selectors?

Hi @mirable,

First, you have to download those files and ideally put them in a separate folder (e.g. css folder). Then, you should create another css file (e.g. css/custom.css file) that will include your custom styles. Finally, be sure to add these stylesheets to your html files. See an example here.

Hello George,
Thank you for your tutorial on Skeleton, it looks very interesting!
How do you make a div for the navigation with Skeleton that covers the whole width of the browser instead of just 960px, also do we still have to create the media queries or is it done for you. Thanks!

Sir , thanks a ton for the skeleton demo code.
This might seem like a newbie question, but when I right away copy paste the HTML/CSS from the code pen source to my local editor, most of the things work fine but the following section always gets stacked (even though the screen size is on a laptop >=550px):

<div class="row">
    <div class="six columns">
      <a href="#">
        <h4>Graphic Design</h4>
          <span class="fa fa-picture-o"></span>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
      </a>
    </div>
    <div class="six columns">
      <a href="#">
        <h4>Web Design</h4>
        <span class="fa fa-leaf"></span>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
      </a>
    </div>
  </div>
  <!--end of .row-->

Can you please let me know if I am missing something??

Thanks in advance :smile:

Hey; that alone isn’t recreating the problem for me. You mention that section alone recreates the issue for you; can you set up a codepen or a live demo with this? It will help us debug :slight_smile: .

Thanks for the reply sir.
I have copy pasted the codepen from here - The original article to My codepen (Line by line) and the issue seems fairly reproducible. Please let me know if any other inputs are required.