Jay Taylor's notes

back to listing index

Simple Grid

[web search]
Original source (www.simplegrid.io)
Tags: css grid minimal lightweight www.simplegrid.io
Clipped on: 2016-10-28

Simple Grid is a CSS grid for your website.

Responsive, light, simple.

Responsive

Your website will display beautifully, no matter the device or screen type.

Lightweight

The CSS is super light, so you won’t have to worry about adding to page load times.

Simple

Simple Grid is made for all skill levels, so you can jump right into your project.

Simple Grid

Simple Grid is a 12-column, lightweight CSS grid to help you quickly build responsive websites. Download the CSS stylesheet, add the appropriate classes to your markup, and you're off to the races. It’s that simple.

Each column is contained within rows, which are contained within a container. The container is set to a maximum width of 960px, but you can edit without having to break anything.

one

eleven

two

ten

three

nine

four

eight

five

seven

six

six

twelve

Simple Code

All the code you need is simple and familiar. Simply state the number of columns you want your content to occupy in the .col class. For example, if you want your content to take up 8 columns (out of 12), simply give your content the class .col-8.

Simple grid is built mobile-first, so all columns will expand to the full container width on smaller screens. If you don’t want columns to expand on mobile devices and small screens, simply add -sm to the end of your column class name. For example, if you want to have two blocks of content floating side-by-side on small screens, each would be given the class name .col-6-sm.

Be sure to nest columns within a .row class. You may also choose to nest rows within a .container class.

The download package now contains an SCSS file for those who prefer SASS as well.

            
    <div class="container">
      <div class="row">
        <div class="col-3">
          <!-- This content will take up 3/12 (or 1/4) of the container -->
        </div>
        <div class="col-3">
          <!-- This content will take up 3/12 (or 1/4) of the container -->
        </div>
        <div class="col-6">
          <!-- This content will take up 6/12 (or 1/2) of the container -->
        </div>
      </div>
    </div>
          

Simple Typography

Simple Grid uses Lato from Google Fonts as a base font-family. Font-size is based on root rem units.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Additionally, should you choose to style any of the headers or paragraph font-weights, simply add the class .font-light, .font-regular, or .font-heavy to your markup. Paragraph text is set by default to a font-weight of 200. Note: the .font-heavy class should not be used as a replacement for semantic bold body copy.

Start Building

Simple Grid
Made by Zach Cole
Contribute on Github
Share on Twitter

Open source under the MIT License