Setup Getting Started


HTML Markup

The first step to using Shelves (the CSS or Sass version) is to use the correct HTML markup.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!--[if lt IE 9]><script src="/path/to/respond.js"></script><![endif]-->
</head>
<body>
  <!-- Body Content Here -->
</body>

The required bit is the viewport meta information, which is pretty standard stuff. It is also recommended to use respond.js to add responsive states to older versions of IE.

Simple Usage

Read up on how to use the generated CSS classes in your HTML:

CSS Docs

Advanced Usage

If you'd rather take a strictly semantic approach, you can use the Sass mixins to build your grid:

Sass Docs

If the default CSS grid doesn't suit you, generate your own grid using the command line tool:

Command Line Docs

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
1
2
3
4