WHERE DESIGN MATTERS

Why you will waffle

EASY BUT POWERFUL

Clean and super easy syntax.
Clear where you want, order columns, real and precise px gutters, same with columns, a lot of @media limits, nesting grid.

Fluid & Responsive

Ulinke some frameworks, WaffleGrid is thought to be fluid, with no container.
This means that you can set your own container and make your own responsive design.

MOBILE? OF COURSE.

Don't worry about screen sizes anymore. WaffleGrid adapts itself to all devices by default.

HIGHLY CUSTOMIZABLE

Using Sass you can easily choose your units, set private grid gutters, change the class naming and personalize @media sizes.

ROWS? NO, COLUMNS.

Avoid using rows for multiple columns unless you really need them.
Put your content inside a column and set its size. It works great like it should and you have much more control indeed.

COMPATIBILITY

Since IE8 is not supported anymore, WaffleGrid works on IE9+ and all major browsers.

ONLY WHAT YOU NEED

14KB minified. No fancy helper classes, ony the grid system; which is might be what you are looking for.

SASS PREPROCESSOR

WaffleGrid is made using Sass. You can choose the developer version or the minified .css.

Some magic

Gutters

Pixels

Em gutters

Rem gutters

Percentage

No gutters

Horizontal gutters only

Vertical gutters only

Custom gutters: Small (px)

Custom gutters: Huge (px)

Columns

Default width.

Responsive width.

Order.

1
2
3
4
5
6
7
8
9
10
11

Show/Hide

Show. (Resize window)

Hide. (Resize window)

Clear

Fixed.

Responsive. (Resize window)

under-[some-gutter-width]. (Resize window)

above-[some-gutter-width]. (Resize window)

Nesting tables




Container

Custom.

No container. 100% fluid.

APIs

Defaults

/* Grid */
.grid                /* start grid */
.grid > .row         /* row        */
.grid > .row > .col  /* column     */


/* Gutters */
.grid                     /* gutters: none                  */
.grid.gutters             /* gutters: vertical + horizontal */
.grid.gutters-vertical    /* gutters: vertical only         */
.grid.gutters-horizontal  /* gutters: horizontal only       */


/* Sizes */
xxs  /* width: 200px   (Default) */
xs   /* width: 400px   (Default) */
s    /* width: 600px   (Default) */
n    /* width: 800px   (Default) */
m    /* width: 1000px  (Default) */
l    /* width: 1200px  (Default) */
xl   /* width: 1400px  (Default) */
xxl  /* width: 1600px  (Default) */


/* Rows */
.row.d-[size] /* all children cols width: [size] */


/* Columns */
.col                            /* default-width: 12  */

.col.[size]-[col-width]         /* from [size] | width [col-width] */

.col.[size]-[OR]-[howManyCols]  /* move this col [howManyCols] | from Right | only when [size] */
.col.[size]-[OL]-[howManyCols]  /* move this col [howManyCols] | from Left  | only when [size] */

.col.hide.[size]-show           /* show hidden .col only when [size]  */
.col.[size]-hide                /* hide .col only when [size]         */



/* Clear */
.clear                /* hidden by default          */
.clear.always         /* visible min-width: 0       */
.clear.above-[size]   /* visible only above [size]  */
.clear.under-[size]   /* visible only under [size]  */

Gutters



[...]




[...]




[...]

Columns

Show/Hide

Clear

USE IT NOW

Include css

Make your first grid

Private grid





  

    

      

      

      

    

  





// SASS: "_private.sass"

#your-id          // Select your tag
  .grid           // Select the grid inside of the tag
    +grid(10px)   // set the unit (px, rem, em, %).