What is Skeleton?
Skeleton was created by Dave Gamache. It is a light weight CSS framework.
It include two CSS files named
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?
This is what your file structure should look like:
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.
There are numerous resources available for skeleton however, for the sake of ease, I have listed several that I found most useful.
- Codepen provides a great resource for experimenting with skeleton.
- Skeleton responsive boilerplate download
- Skeleton GitHub repository
- Basic build instructions