Flex Grid Framework

A grid based in Flexbox and Stylus :D

View a demo Download V 0.2.0

Note: To use the framework, you'll need to compile your style with the Stylus preprocessor using NodeJS, for more information see NodeJS and Stylus.

The basics

Create you markup


<div class="container">
  <div class="yellow-bar"></div>
  <div class="yellow-bar"></div>
</div>

Import the framework


@import "flex-grid-framework"

Set your rows and columns


.container
  row()

.yellow-bar
  col(6)

.yellow-bar
  col(6)

Items features

Choose your combination between 12 percentage based columns and a 'flex' column to fill in the remaining space.



.container
  row()

.example-1
  col(1)

.example-11
  col(11)

.example-5
  col(5)

.example-7
  col(7)

.example-12
  col(12)

.example-2
  col(2)

.example-flex
  col(flex) /* col() == col(flex) */

Equal width columns


.container
  row()

.example-flex
  col()

.example-flex
  col()

.example-flex
  col()

Offsetting columns


.container
  row()

.example-1
  col(1)

.example-5
  col(5)
  offset(6)

Container features

Choose your side


.container
  row()
  justify(left)

.example-3
  col(3)




.container
  row()
  justify(right)

.example-3
  col(3)

Easily centralize


.container
  row()
  justify(center)

.example-3
  col(3)

Justify content: between


.container
  row()
  justify(between)

.example-2
  col(2)

.example-2
  col(2)

.example-2
  col(2)

.example-2
  col(2)

Justify content: around


.container
  row()
  justify(around)

.example-2
  col(2)

.example-2
  col(2)

.example-2
  col(2)

.example-2
  col(2)

Vertical align top


.container
  row()
  vertical-align(top)

.example-6-big
  col(6)

.example-6
  col(6)

Vertical align middle


.container
  row()
  vertical-align(middle)

.example-6-big
  col(6)

.example-6
  col(6)

Vertical align bottom


.container
  row()
  vertical-align(bottom)

.example-6-big
  col(6)

.example-6
  col(6)

Custom breakpoint

Resize your window for view the changes


.container
  row()

.example-x
  col(3)
  offset(3)

.example-y
  col(12)

@media (max-width 811px)
  .example-x
    col(12)
    offset(0)

  .example-y
    col(12)

Browsers support

Verify in Can I use the browser support for the flex property