Fork on GitHub

Stylus Grid System

Responsive, Fluid, Semantic and Non-Semantic grid system written in stylus

Source .styl Download .css

Features

Demo

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6

Starting

Import the sgs.styl file:


    @import "path/to/sgs"
        

Semantic Usage (#1 method)

In #1 method, the responsive design has to be made manually.


    .my-div
      column(8)
      @media tablet
       column(7)

    .my-other-div
      column(4)
      @media tablet
       column(5)
        

Result:

.my-div
.my-other-div

Semantic Usage (#2 method)

In #2 method, the responsive is automatically. Is used @extend stylus method.


    .my-div
      @extend .sgs8

    .my-other-div
      @extend .sgs4
        

Result:

.my-div
.my-other-div

Non-Semantic Usage

Is used classes from 1 to 12 (max colums configurable) for markup in your html. The sgs prefix name also is configurable.


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

Result:

.sgs3
.sgs3
.sgs3
.sgs3