A mobile first responsive grid

Solid Grid is a responsive, mobile first, twelve column grid that's designed to make it easy to create mobile friendly websites and accellerate your development process.

DownloadFork on Github

Responsive

Fast

Flexible

Stylish

The Grid

The grid is maintained by the .row class, this defines the overall width of the grid and acts as a container for your columns or by adding the class .column acts as a full width column itself. Once the .row has been created you can add any combination of .column or .columns, up to a maximum of twelve, to create your layout. You can even nest another grid within a column by simply adding a new .row, nested columns retain the same gutter width between them so care must be taken when nesting as columns can become very small.

Standard grid

Row
One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
<div class="row column">
    Row Column
</div>
<div class="row">
    <div class="eleven columns">
        Eleven
    </div>
    <div class="one column">
        One
    </div>
</div>
				

Offset Grid

You can add space to your grid by using the .offset-by-xxx class to your .column or.columns and the appropriate margin will be added to the column.

Six
Six
Five
Five
Four
Four
Three
Three
Two
Two
One
One
<div class="row">
    <div class="five columns offset-by-one">
        Five
    </div>
    <div class="six columns">
        Six
    </div>
</div>
				

Re-ordered Grid

You can change the order that columns are displayed in a row by using the .push-by-xxx or .pull-by-xxx classes, this allows you to give precedence to content in your code but not when it is displayed on the screen aiding search engine optimisation.

First Column
Second Column
First Column
Second Column
First Column
Second Column
Third Column
<div class="row">
    <div class="six columns push-by-six">
        First Column
    </div>
    <div class="three columns pull-by-six">
        Second Column
    </div>
    <div class="three columns pull-by-six">
        Third Column
    </div>
</div>

Typography

Typography is built on a base font size of 14px and line-height of 28px, the padding and margins of all standard elements set at multiples of 14px to ensure that your content has a natural vertical rhythm. The base stylesheet is entirely optional but we feel that it gives you an excellent starting point for some great typography.


Heading <H1>

Heading <H2>

Heading <H3>

Heading <H4>

Heading <H5>
Heading <H6>
This is a blockquote Patrick Robin
this is a preformatted text block
  • unordered list item
  • unordered list item
  • unordered list item
  1. ordered list item
  2. ordered list item
  3. ordered list item

There are a number of additional classes that can also be applied to your content to add unique formatting, a full list of these classes is below:

  • .text-left
  • .text-centre
  • .text-right
  • .quiet
  • .loud
  • .highlight
  • .removed

There are also four classes that you can add to an image to change the way that they are displayed and can be combined in any combination.

  • The .scale class ensures that the image will not exceed the bounds of its container.
  • The .bordered class adds a white border and subtle drop shadow to the image.
  • The .rounded class adds rounded corners to the image.
  • The .circular class makes the image circular by adding a 50% radius border.

Tables

By default there are no formatting styles associated with the table tag this is to ensure that no styling is improperly associated with tables created by third party plugins such as calendars. However, by adding the class .table to a table its captions, headers and columns will all be styled as well and by adding the class .zebra alternate rows will be highlighted.

table caption
start end title
30/07/2013 31/07/2013 boing
01/01/2013 10/02/2013 wibble
06/05/2013 08/06/2013 bang
05/06/2013 09/06/2013 wibble

Forms

Elements within a form should be laid out using an ordered or unordered list and by default all form inputs except checkboxes and radio buttons are designed to utilise the full width of their parent element with labels being positioned above their related input.

Email
<form id="email-form">
    <fieldset>
        <legend>Email</legend>
        <ol>
            <li>
                <label for="email-form-title" class="left">Title</label>
                <select id="email-form-title" name="select">
                    <option value="1">Mr</option>
                    <option value="2">Miss</option>
                    <option value="2">Mrs</option>
                </select>
            </li>
            <li>
                <label for="email-form-name">Name</label>
                <input id="email-form-name" name="name" type="text" maxlength="255" />
            </li>
            <li>
                <label for="email-form-email">Email</label>
                <input id="email-form-email" name="email" type="text" maxlength="255" />
            </li>
            <li>
                <label for="email-form-subject">Subject</label>
                <input id="email-form-subject" name="subject" type="text" maxlength="255" />
            </li>
            <li>
                <label for="email-form-message">Message</label>
                <textarea id="email-form-message" name="message" row="5" cols="50"></textarea>
            </li>
            <li class="text-right">
                <button name="cancel" type="button">Cancel</button>
                <input name="submit" type="submit" value="Submit" class="primary" />
                <input name="disabled" type="submit" value="Disabled" disabled="disabled" class="primary" />
            </li>
        </ol>
    </fieldset>
</form>

Responsive Forms

You can easily structure your forms in a responsive grid by converting the list elements into rows by assigning them the class .row and wrapping the label and form inputs with your desired number of .column or .columns .

New Topic
<form id="topic-form">
    <fieldset>
        <legend>New Topic</legend>
        <ul>
            <li class="row">
                <div class="two columns">
                    <label for="topic-subject">Subject</label>
                </div>
                <div class="ten columns">
                    <input id="topic-subject" name="subject" type="text" maxlength="255"/>
                </div>
            </li>
            <li class="row">
                <div class="two columns">
                    <label for="topic-message">Message</label>
                </div>
                <div class="ten columns">
                    <textarea id="topic-message" name="message" cols="10"></textarea>
                </div>
            </li>
            <li class="row">
                <div class="two columns">
                    <label for="topic-tags">Tags</label>
                </div>
                <div class="ten columns">
                    <input id="topic-tags" name="tags" type="text" maxlength="255" />
                </div>
            </li>
            <li class="row">
                <div class="two columns"></div>
                <div class="ten columns text-right">
                    <input name="submit" type="submit" value="Submit" class="primary" />
                </div>
            </li>
        </ul>
    </fieldset>
</form>

Inline Forms

Forms can also be displayed inline by adding the class .inline to the parent fieldset, as all form inputs have a default width of 100% you will also need to specify a width for all inputs when working with an inline form. Inline forms will only be displayed on medium screen sizes or higher, when viewed on small or extra small screens will be displayed as a standard form.

Login
<form id="login-form">
    <fieldset class="inline">
        <legend>Login</legend>
        <ol>
            <li>
                <label for="user-login">Username</label>
                <input id="user-login" name="login" type="text" maxlength="255" style="width: 150px;" />
            </li>
            <li>
                <label for="user-password">Password</label>
                <input id="user-password" name="password" type="password" maxlength="255" style="width: 150px;" />
            </li>
            <li>
                <input name="submit" type="submit" value="Submit" class="primary" />
            </li>
        </ol>
    </fieldset>
</form>

Customisation

Solid Grid is built with {Less}, a CSS pre-processor that extends the CSS language to make your stylesheets more maintainable, extendable and themable. The grid.mixins.less file that is included with the download can be incorporated in to your projects and allows you to extend your own classes, the main ones can be seen below.

Mixins and Helpers

.makeRow()

Defines an element as being a new row.

.articles{
    .makeRow();
    
    
}

.makeColumn(x)

Defines an element as being x columns wide.

.article{
    .makeColumn(6);
    
    
}

.offsetBy(x)

Offsets a column by x number of columns.

.tags{
    .makeColumn(3);
    .offsetBy(3);
    
}

.pushBy(x)

Pushes a column by x number of columns.

.comments{
    .makeColumn(3);
    .pushBy(3);
    
}

.pullBy(x)

Pulls a column by x number of columns.

.links{
    .makeColumn(3);
    .pullBy(3);
    
}

@gutterWidth

Specifies the gutter width between columns.

@gutterWidth: 20px





@smallWidth

Specifies the row width on small screens.

@smallWidth: 550px;




@mediumWidth

Specifies the row width on medium screens.

@mediumWidth: 720px;




@largeWidth

Specifies the row width on large screens.

@largeWidth: 960px;




@extraLargeWidth

Specifies the row width on extra large screens.

@extraLargeWidth: 1200px;




Compiling Stylesheets

Solid Grid uses Grunt as its build system, if you've not heard of it before Grunt is a JavaScript Task Runner that simplifies your build process, we use it to compile, minify and combine the Solid Grid stylesheets and the download includes everything you need to get building your customised Solid Grid stylesheets. To get started with Grunt we recommend that you read through the getting started guide which will teach you how to install and run grunt commands.

Available Commands

  • Less: Compiles your less customised files in to CSS.
  • Cssmin: Minifies and combines the CSS stylesheets.
  • Watch: Monitors the less files and automatically compiles and minifies the stylesheets whenever theres a change.