Simple Grid

Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

DownloadGithub

Features

Responsive

Responsive

Built with responsive sites in mind, Simple Grid allows developers to build websites on a foundation suited for mobile and tablet browsers.

Lightweight

Lightweight

Simple Grid is simply that, a grid. This is not a framework with everything from forms to buttons styled but a lightwight simple CSS grid.

1140px

1140px

No longer do we develop for 1024px monitors. Simple Grid is designed to make sites look great on larger monitors with higher resolutions.

12 Columns

12 Column

The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving developers numerous layout possibilities.

Content Columns

col-1-1

<div class="grid grid-pad">
    <div class="col-1-1">
       <div class="content">
           <h3>col-1-1</h3>
       </div>
    </div>
</div>

col-1-2

col-1-2

<div class="grid grid-pad">
    <div class="col-1-2">
       <div class="content">
           <h3>col-1-2</h3>
       </div>
    </div>
    <div class="col-1-2">
       <div class="content">
           <h3>col-1-2</h3>
       </div>
    </div>
</div>

col-1-3

col-1-3

col-1-3

<div class="grid grid-pad">
    <div class="col-1-3">
       <div class="content">
           <h3>col-1-3</h3>
       </div>
    </div>
    <div class="col-1-3">
       <div class="content">
           <h3>col-1-3</h3>
       </div>
    </div>
    <div class="col-1-3">
       <div class="content">
           <h3>col-1-3</h3>
       </div>
    </div>
</div>

col-1-4

col-1-4

col-1-4

col-1-4

col-1-5

col-1-5

col-1-5

col-1-5

col-1-5

col-1-6

col-1-6

col-1-6

col-1-6

col-1-6

col-1-6

col-1-7

col-1-7

col-1-7

col-1-7

col-1-7

col-1-7

col-1-7

col-1-8

col-1-8

col-1-8

col-1-8

col-1-8

col-1-8

col-1-8

col-1-8

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

1-10

1-10

1-10

1-10

1-10

1-10

1-10

1-10

1-10

1-10

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-12

1-12

1-12

1-12

1-12

1-12

1-12

1-12

1-12

1-12

1-12

1-12

Front-end Development Book

Want to know more about front-end development? Check out the new book I am writing. I will cover front-end development tools, workflows, and processes. If you want to stay up to date and receive launch coupons sign up for the newsletter or check out the landing page

The goal of this e-book is get you up to date with modern front-end development. It doesn’t matter if you are you are designer, a back-end developer, a lapsed front-end developer, or someone who is brand new to web design and development. If you want to learn modern front-end development, this book is for you. It's not quite ready yet but you can sign up to receive updates and info on the writing process.

front-end development book

Layout Columns

1-12

col-11-12

<div class="grid grid-pad">
    <div class="col-1-12">
       <div class="content">
           <h3>col-1-12</h3>
       </div>
    </div>
    <div class="col-11-12">
       <div class="content">
           <h3>col-11-12</h3>
       </div>
    </div>
</div>

col-2-12

col-10-12

<div class="grid grid-pad">
    <div class="col-2-12">
       <div class="content">
           <h3>col-2-12</h3>
       </div>
    </div>
    <div class="col-10-12">
       <div class="content">
           <h3>col-10-12</h3>
       </div>
    </div>
</div>

col-3-12

col-9-12

<div class="grid grid-pad">
    <div class="col-3-12">
       <div class="content">
           <h3>col-3-12</h3>
       </div>
    </div>
    <div class="col-9-12">
       <div class="content">
           <h3>col-9-12</h3>
       </div>
    </div>
</div>

col-4-12

col-8-12

col-5-12

col-7-12

col-6-12

col-6-12

col-7-12

col-5-12

col-8-12

col-4-12

col-9-12

col-3-12

col-10-12

col-2-12

col-11-12

1-12