The project includes a 12-column grid-framework & css reset.

• CSS3

It is a simple 12 column grid layout system, inspired by bootstrap.

• It takes mobile first approach.
• It allows to define 12 column grid for different screen sizes.
• It allows to define offsets for different screen sizes.
• Its allows to customize the total number of columns (12 default), vertical and horizontal gutter (1.5rem default for both).

Start by including grid.css file

<link rel="stylesheet" href="grid.css">

In order to use the grid system, the grid must be inside one of the two container classes.

  You can create a fixed width container, that will change width at different breakpoints.

<div class="container"></div>

  You can create a fluid container, that will always be 100% width of its parent.

<div class="container-fluid"></div>

The row can be created with .row class. Row must be inside of the .container or .container-fluid class. All columns are defined inside of a row.

<div class="container">
    <div class="row"></div>
</div>

This grid system supports 12 column grid by default. But it can be customized to your needs.

  All you have to do is change the value of --total-columns variable inside of .grid.css to the number of columns you like.

:root{
    --total-columns: 12;  /* default */
    --total-columns: 16;  /* customized */
}

  All you have to do is change the value of --horizontal-gutter or--vertical-gutter variable inside of .grid.css to the rem size you like.

:root{
    --horizontal-gutter: 1.5rem;  /* default */
    --horizontal-gutter: 2rem;  /* customized */
    
    --vertical-gutter: 1.5rem;  /* default */
    --vertical-gutter: 2rem;  /* customized */
}

  You can create an equal width column at all screen sizes by simply using .col class

<div class="container">
  <div class="row">
    <div class="col">col-1</div>
    <div class="col">col-2</div>
  </div>    
</div>

  You can define the width of a column at mobile screens by defining column size {1-12} after .col- class as col-{1 to 12}. Note: For the grid to work properly, the number of columns must add up to 12. Or total column number when grid is customised.

<div class="container">
  <div class="row">
    <div class="col-7"></div>
    <div class="col-3"></div>
    <div class="col-2"></div>
  </div>    
</div>

  This grid system uses following media breakpoints.

sm (> 576px)
md (> 768px)
lg (> 992px)
xl (> 1200px)

Note: For screen size below sm (< 576px) no breakpoint label is required.

You can define the width of a column at differnt breakpoints (> 576px) by using breakpoint label sm, md, lg, xl after .col- and before size of column {1-12}, such as col-sm-8

Note: Whatever the column size, it will be applied from that screen size and up.

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-10 col-lg-8 col-xl-6">col-1</div>
    <div class="col-sm-12 col-md-2 col-lg-4 col-xl-6">col-2</div>
  </div>
</div>

You can define the column offset size, by which column should be moved to the right side of a row.

  You can define a column offset size at a mobile screen (< 576px) with a class col-offset-{1-11}

<div class="container">
  <div class="row">
    <div class="col-6 col-offset-3"></div>
  </div>    
</div>

  You can define the offset size at differnt breakpoints (> 576px) by using breakpoint label sm, md, lg, xl after .col-offset- and before size of column 1-11. Such as col-offset-md-5

<div class="container">
  <div class="row">
    <div class="col-md-10 col-offset-md-2</div>
  </div>
</div>

reset.css is a very basic reset, that includes following.

• Box-sizing for all elements set to border-box
• Root font-size set to 10px
• Font family set to Raleway (default). Can be switched to Roboto
• Overall font color set to #333
• Font size set for h1, h2, h3, h4, h5, h6
• Margin and Padding set for all lists ol, ul, dl
• Unhovered and hovered color for <a> tag
• Three contextual text color classes .text-primary, .text-success and .text-danger

Start by including reset.css file

<link rel="stylesheet" href="reset.css">

grid-debug.css adds row and column background color to visually see and debug rows and columns.

Start by including grid-debug.css file

<link rel="stylesheet" href="grid-debug.css">

If you intend to use all three files together, then include them in the following order.

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="grid-debug.css">

Saintaze @saintaze