Simplest hackable grid

Customize your grid by just editing a few variables in sass file

 $grid-size: 12
 
.grid {
    width: 100%
    overflow: hidden
}

Responsive

Easy column classes to build responsive websites mobile-first approach.

Minimal

Minimal Features. Small Size.

Cutomizable

Edit sass to create your own custom grid.

Default CSS Grid (.css file)

To use grid, add grid class to parent element and s-*, m-* or l-* classes to children elements.
Based on 12 column based design, i.e. *-1 means 100/12% width, *-2 means 100*2/12% and so on..
There are three types of grid classes s (for mobile phones), m (for tablets), l (for desktops)
mar-* are margin classes (0, s, m and l types)
pad-* are padding classes (0, s, m and l types)
hide-on-s class hides element on mobile phones, hide-on-m on tablets and hide-on-l on desktop

Examples

Large Classes Applied (.hide-on-s .hide-on-m) Medium Classes Applied (.hide-on-s .hide-on-l) Small Classes Applied (.hide-on-m .hide-on-l)

.s-6 .m-8 .l-10

.s-6 .m-4 .l-2

.f-right

.pad-0

.pad-s

.pad-m

.pad-l

.mar-0

.mar-s

.mar-m

.mar-l

SASS Variables (.sass file)

With default values


            
            $small-break: 480px #Breakpoint for small classes (s-*)
            
              $medium-break: 960px #Breakpoint for medium classes (m-*)
            
              $border-color: black #Border color for b-1s class
            
              $grid-size: 12 #Size of grid
            
              $small-prefix: s #Prefix for small classes
            
              $medium-prefix: m #Prefix for medium classes
            
              $large-prefix: l #Prefix for large classes
            
              $margin-prefix: mar #Prefix for margin classes
            
              $padding-prefix: pad #Prefix for padding classes
            
              $gaps: (0: 0, s: 8px, m: 16px, l: 24px) #Map for margin and padding classes with suffix and values

Made with <3 by

@aadityataparia

Aaditya Taparia

Full Stack Web Developer

@Cookpad

	$small-break: 480px #Breakpoint for small classes (s-*)
	$medium-break: 960px #Breakpoint for medium classes (m-*)
	$border-color: black #Border color for b-1s class
	$grid-size: 12 #Size of grid
	$small-prefix: s #Prefix for small classes
	$medium-prefix: m #Prefix for medium classes
	$large-prefix: l #Prefix for large classes
	$margin-prefix: mar #Prefix for margin classes
	$padding-prefix: pad #Prefix for padding classes
	$gaps: (0: 0, s: 8px, m: 16px, l: 24px) #Map for margin and padding classes with suffix and values