How to use Skeleton: download, structure and customize

What is Skeleton and when should you use it?

Skeleton describes itself as a simple, responsive boilerplate to kickstart a responsive project. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. It is a starting point, not a UI framework, so it does not ship a large set of prebuilt components.

It suits prototypes, small landing pages, and developers who prefer writing plain CSS and HTML. It is less suited to teams that need many ready-made components, or to projects that depend on the latest CSS features, because it targets broad browser support.

• Good fit: simple responsive grid, no build tool, light stylesheet you plan to customize
• Poor fit: large component library, modern-only CSS features

Download Skeleton and check what is in the package

You can download the zip from the project's releases page or clone the repository. The README notes that the Git repository is under active development, so if you want a stable and safe copy, use the zipped download.

The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point. The layout looks like this:

• index.html: the starter page
• css/normalize.min.css: the reset stylesheet
• css/skeleton.css: the main Skeleton stylesheet
• images/favicon.ico: a sample favicon

Link the stylesheets in your HTML

Open index.html in a text editor and check that it links to both stylesheets in the css folder. Normalize goes first as the reset, then Skeleton's own stylesheet, so Skeleton's rules can override the defaults. Keep the folder structure intact so the relative paths keep working.

Because there is no compile step, you edit the CSS and HTML directly and reload the browser to see changes.

Build a responsive layout with the grid

Skeleton's grid is what makes pages adapt to different screen sizes. The source describes the grid as responsive, and the stylesheet is around 400 lines unminified with comments, so you can read the grid rules directly in skeleton.css and adjust them.

Use the grid classes and standard HTML elements in your page, then check the result on a narrow browser window and a wide one.

• Read the grid rules in css/skeleton.css before changing them
• Test on both a phone-sized and a desktop-sized viewport

Customize Skeleton for your project

Skeleton is meant to be a light starting stylesheet that you change. Edit css/skeleton.css to adjust the grid, colours, and media queries to match your design. Keep Normalize as the reset unless you have a reason to remove it.

If you prefer a preprocessor, the README lists community extensions built with LESS and Sass that make it easier to replace grid, colour, and media query values. These are not officially supported, and the README says their last updates matched v2.0.1.

• Edit css/skeleton.css for grid, colour and media query changes
• Consider the community LESS or Sass extensions if you use a preprocessor

Check browser support before you ship

The README lists the latest versions of Chrome, Firefox, Opera, Safari and IE as targets, and says Skeleton works with almost all older versions of these browsers. It also states that IE has large degradation prior to IE9.

Test your page in the browsers your audience uses, especially if you need older Internet Explorer support.

• Modern Chrome, Firefox, Opera and Safari are listed targets
• Internet Explorer before IE9 shows significant degradation