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