Simple Grid - Framework

Is very simple, responsive grid system that you can use in your projects. Any style, any design. Just grid!
The basis of the grid is a container with a width of 80% of the width of the screen for desktop or 96% for mobile. This container is divided into 12 columns. So no matter what device, your website will be broad at 80% or 96%. Always!

Fast to Start

Grid is not a complicated structure. Already after a few moments you will learn it through.

Not UI Framework

This is just a simple grid ensuring responsiveness uncomplicated projects.

Media Queries

Simply Grid operates on two hops, only. >768<480 and <480.

Browser Support

Simply Grid supports all browsers support media queries.

How does it work

It’s very simple! Here's how the Simple Grid - Framework grid system works:
  1. Rows must be placed within a .container (80% width) or .container-fluid (100% width).
  2. It uses .row to determine the horizontal column groups.
  3. Columns (eg .col-6 ,.col-8) must be in .row. This is a must!
  4. Columns don’t have a default paddings. If you want to achieve them, use the class .box inside the column.

Class .box has the default paddings set to 20px.

Look to the examples for applying these principles to your code.

laptop-img

Getting started

File structure

We provide psd file with a grid built on the width of 1366px, development versions and minified CSS and HTML file ready to use.
Once downloaded, unzip the compressed folder. You'll see something like this:

Simple_Grid-Framework/
   |
   |- Simple_Grid-PSD/
     |
     |- SimpleGrid_1366px-2000px.psd
     |
   |- Simple_Grid-WEB
     |
     |- css/
       |
       |- simplegrid.css
       |- simplegrid.min.css
       |- index.html
       |
     |- index.html
     |
   |

Basic HTML template

As you can see the structure provided by our index.html file contains all the components needed to start working on the project.

<!DOCTYPE html>
<html lang="en">
 <head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

   <title> ... </title>

  <link rel="icon" type="image/x-icon" href="images/favicon.ico">
  <link rel="stylesheet" href="css/simplegrid.min.css">
  <link rel="stylesheet" href="css/style.css">

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

 </head>
 <body>

  <!--start: SIMPLE GRID - NAVIGATION -->
  <nav id="sg-nav">
   <button id="sg-nav-trigger">
    <span></span>
    <span></span>
    <span></span>
   </button>

  <ul>
   <li><a href="">  </a></li>
   <li><a href="">  </a></li>
   <li><a href="">  </a></li>
   <li><a href="">  </a></li>
  </ul>
  </nav>
<!--end: SIMPLE GRID - NAVIGATION -->



    <h1>Hello world!</h1>



    <!-- JS -->
    <script> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
   <script>     // MAIN-NAV
     jQuery( "#sg-nav-trigger" ).click(function() {
      jQuery( "#sg-nav ul" ).toggle();
     });
   </script>
 </body>
</html>

Basic RWD navigation

Paste code and enjoy the simple responsive navigation!

  <!--start: SIMPLE GRID - NAVIGATION -->
  <nav id="sg-nav">
   <button id="sg-nav-trigger">
    <span></span>
    <span></span>
    <span></span>
   </button>

  <ul>
   <li><a href="">  </a></li>
   <li><a href="">  </a></li>
   <li><a href="">  </a></li>
   <li><a href="">  </a></li>
  </ul>
  </nav>
<!--end: SIMPLE GRID - NAVIGATION -->

Basic Grid HTML

For the three columns layout, create a .row and add the Appropriate number of .col-* columns. As this is a 12-column grid. Columns should always add up to 12 for each .row. If you need the distance from the edge of the column, use the class .box.

.col-4
.col-4
.col-4 .box
<div class="row">
  <div class="col-4"> ... </div>
  <div class="col-4"> ... </div>
  <div class="col-4"> 
    <div class="box"> 
        ... 
    </div> 
  </div>
</div>

Offsetting columns

Columns can be moved to the right by class .col-offset-*. Each class Increases the left margin of a column to a whole column .col-offset-* below 768px width disappears.

.col-4
.col-4
<div class="row">
  <div class="col-4"> ... </div>
  <div class="col-offset-4"></div>
  <div class="col-4"> ... </div>
</div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-* columns within an existing .col-* column.

.col-8
.col-6
.col-6 .box
.col-4.box-margin
<div class="row">
  <div class="col-8"> 
    <div class="row"> 
      <div class="col-6">  ...  </div>
      <div class="col-6">
        <div class="box">
          ...
        </div>
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="box-margin> 
       ... 
    </div>
 </div>
</div>

See what's in the package

1. PSD Grid

Psd file will get adapted to Simple Grid grid system.

2. CSS Reset Styles

You will simple reset the default browser styles.

3. CSS Sheets

You will get your simple-grid.css, where you will find all the classes that form the system.

4. HTML Example

You will receive a simple, html file ready to work.

  <link rel="stylesheet" href="http://www.getsimplegrid.com/libs/ver111/simplegrid.css">

  <link rel="stylesheet" href="http://www.getsimplegrid.com/libs/ver111/simplegrid.min.css">

OR
Download the entire pack!