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:

Features V2.0.2 (Current Version) V1.2 (Previous Version)
CSS files 2 3
Mobile-First Approach? Yes No
Grid 12-column fluid grid 16-column fixed grid
Typographic Units rem px

Grid

Skeleton’s latest version defines a mobile-first 12-column fluid grid, consisting of rows and columns, as with all CSS grids.

An Example Grid

Rows have to be placed inside a wrapper that can have a max-width value of 960px. To create the wrapper you define a div element and apply the container class to it. If you’re familiar with Bootstrap’s grid, you might know that Bootstrap uses the same class name to define its wrapper.

The width of the wrapper element in Skeleton varies depending on the screen size. In any case, as already mentioned, it can’t exceed the 960px. The table below shows its possible values:

Viewport Width Container Width
< 400px 100%
≥ 400px 85%
≥ 550px 80%

Columns are nested inside a row. They scale up to 12 for each row. To set up a column you have to define a div element and assign it two classes. First, you add the class that is responsible for specifying the column widths. To achieve this, you can use any class from one to twelve or the one-third, two-thirds, and one-half classes.

The second class is responsible for setting the column margins. Possible classes are columns and column. If you define the column widths with the first option (e.g. using the two class), you should use the columns class (instead of column) as a second class. The exception is when using the one class, which can be equally combined with the columns or column class.

While other frameworks support nested rows, Skeleton recommends not nesting rows within columns. Moreover, Skeleton’s grid system provides extra classes for offsetting your columns. Offset classes (e.g. offset-by-two) allow you to increase the space between columns by adding a margin-left property to them.

Utilities

As mentioned, beyond its well-structured grid, Skeleton comes with additional predefined styles. For example, there’s the button class, which allows you to style an anchor (a) element as a button. There’s also the option to give the button a light blue background-color using the button-primary class.

Another example is if you want to float an element to the left or right, you can add the u-pull-left or u-pull-right class to it. You can also use the u-cf helper class for clearing floats.

Those are just a few of the examples of utility classes bundled with Skeleton.

Using Skeleton

Now it’s time to use Skeleton’s powerful features in a demo project. We’ll explore three different examples.

The image below shows the desired layout on small screens and up (≥ 550px) for our header element. Notice that we split the row into 2 equal-sized columns. However, for extra small screens (< 550px) we want the columns to be stacked. That means each of them will expand to cover the entire row’s width.

Skeleton example 1

Here’s the HTML:

<header>
  <div class="container">
    ...
    <section class="services">
        ...
      <div class="row">
        <div class="one-half column">
          ...
        </div>
        <div class="one-half column">
          ...
        </div>
      </div>
    </section>
  </div>
</header>

At this point we should recall that Skeleton supports a mobile-first approach. This means when the browser window has a width less than 550px, the following code snippet is executed:

.column,
.columns {
    width: 100%;
}

This ensures that the columns will be stacked. Next, when the window’s width exceeds the 549px, Skeleton’s grid becomes active causing our columns to occupy 50% of the row’s width (as indicated by the class name one-half). Of course, our layout is based on Skeleton’s default breakpoints, which we have the option to change.

Note: Instead of using the one-half, column class pair as class names, we could have used the six, columns pair, which would produce the same result.

Let’s look at our second example.

Below is the layout of our section.about when the viewport size exceeds the 549px.

Skeleton Example 2

Notice that the first column occupies two-thirds of the row’s width and the second one occupies one-third. Again, for extra small screens our columns are stacked and have widths of 100%.

And the relevant code:

<section class="about">
  <div class="container">
    ...
    <div class="row bottom">
        <div class="two-thirds column">
          ...
        </div>
        <div class="one-third column">
          ...
        </div>    
    </div>
    ...
  </div>
</section>

Note: Instead of using the two-thirds, column and one-third, column pairings as class names, we could have used the eight, columns and four, columns pairs respectively, with the same results.

Let’s see our last example.

Here’s how we want to structure our footer element:

Skeleton example 3

In this case, the target row consists of one column. This occupies about 65.33% of the row’s width. We also want to center it. For this reason, we use the offset-by-two helper class.

The corresponding code can be found below:

<section class="contact">
  <div class="container">
    ...
    <div class="row">
      <div class="offset-by-two eight columns">
        <ul>
            <!-- list here... -->
        </ul>
      </div>                  
    </div>
    ...
  </div>
</section>

Below is the embedded demo on CodePen:

See the Pen Skeleton layout example by SitePoint (@SitePoint) on CodePen.

Conclusion

In this article, we’ve looked at the main features of Skeleton, a CSS boilerplate that can speed up your front-end development. Of course, keep in mind that Skeleton isn’t a one-size-fits-all solution for all projects. It’s simple, yet limited.

Have you used Skeleton in any of your projects? Do you like its simplicity or do you prefer working with a more comprehensive framework like Bootstrap or Foundation?

Tags: css boilerplate, css framework, css grids, responsive framework
George is a freelance web developer and an enthusiast writer for some of the largest web development magazines in the world (SitePoint, Tuts+). He loves anything related to the Web and he is addicted to learning new technologies every day.
Comments
mrwigster

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

georgemarts

Nice job! Thanks for sharing it!

Stephanieboucher

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!

georgemarts

Glad this article helped you learn something new!

Christopher_English

Where can I find a PSD of this new grid?

georgemarts

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

ioleg19029700

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

georgemarts

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.

Cthulhoo_X

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.

georgemarts

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

isabella

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

RyanReese

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.

isabella

Thanks so much for the quick reply! blush

mirable

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?

georgemarts

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.

JoannaKts

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!

Robin_Gupta

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

RyanReese

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

Robin_Gupta

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.

georgemarts

Hi! Thanks for your message! You have to include in your Codepen demo (or in your projects) Skeleton's required css file. To do this, first read this page. Then, go to the original demo and see the external CSS resources.

georgemarts

Hi @JoannaKts,

By default, if your navigation is wrapped within an element which has the container class, its max-width is 960px. So, you have to place your navigation outside of this element. Moreover, Skeleton provides a few helper classes such as u-full-width.

Robin_Gupta

Thanks 2 ton George. Inclusion of additional files fixed the issue and now it works like a charm.

jimmyrhoades

Thanks for this really helpful post. Perhaps you can answer one more question: I used your advice to create two columns, split two-thirds/one-third. Worked great. Added descriptive text in the wider column to the left, and a button in the narrower column to the left. Then went back to unformatted ([raw]) and added a introductory video.

All good, except the text didn't retain the paragraph breaks. They show up in the text editor, but not in the published page.

Is there a hard carriage return code I can add to create the necessary line breaks?

Many thanks for any advice you may have!

georgemarts

Hi! Is it possible to create a demo (e.g. Codepen)?

jimmyrhoades

George, I figured that one out. But now I have another (newbie) question!

In the left-side (2/3) column, I have a lot of text content. In the right-side (1/3) column, I have a button. I would like the button to appear in the middle of the column both horizontally and vertically. I have the alignment=center, so it's aligning in the center horizontally. But it hugs the top of the column vertically.

Is there a way to center it vertically, too? Based on the height required for the content of the adjacent (left-side) column?

Here's the page I'm working on in case it helps: http://niceworkpublicmedia.org/temp/mission/

THANK YOU !!!

georgemarts

Great! If you really want to vertically align the button based on the height of the left column, one option is to use JS or jQuery. So, first get the height of the left column (two_thirds). Then, set the top property of the right column (one_third last) equal to heightOfLeftColumn/2. Next, apply the transform:translateY(-50%) property to the right column. Finally, remember to do those changes only when your columns aren't stacked.

If you want to avoid using JS though, you could also use flexbox.

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!