Introduction to Skeleton CSS

What is Skeleton?

Skeleton was created by Dave Gamache. It is a light weight CSS framework.

It include two CSS files named normalize.css and skeleton.css. Normalize.css is a browser reset file and skeleton.css is  the grid system which provides basic style for commonly used HTML elements that include but are not limited to buttons, lists and tables.

Skeleton uses a mobile-first approach in the development of its framework which is similar to Bootstrap. Skeleton’s biggest difference to Bootstrap is that it does not use a large number of components. It is limited to a few fundamental CSS rules to help with the initial phase of development.

Another advantage to Skeleton is the option use of Sass or Less extensions and it is fully functional in all of the newest browsers including IE9+.

Getting Started with Skeleton?

In order to get started with skeleton you will need to download the file directly from their site getskeleton.com or fork the GitHub repository.

This is what your file structure should look like:

Skeleton/
|---css/
|    |---normalize.css
|    |---skeleton.css
|---images/
|---index.html

Important Column and Row Information

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.

Skeleton recommends not nesting rows within columns. In addition, 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.

Resources

There are numerous resources available for skeleton however, for the sake of ease, I have listed several that I found most useful.