Flex Grid Framework

Baby steps

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.

1 - Create you markup


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

2 - Import the framework


@import "flex-grid-framework"

3 - Set your rows and columns


.container
  @extend $row

.yellow-bar
  @extend $col-6

.yellow-bar
  @extend $col-6

Items features

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



.container
  @extend $row

.example-1
  @extend $col-1

.example-11
  @extend $col-11

.example-5
  @extend $col-5

.example-7
  @extend $col-7

.example-12
  @extend $col-12

.example-2
  @extend $col-2

.example-flex
  @extend $col-flex

Equal width columns


.container
  @extend $row

.example-flex
  @extend $col-flex

.example-flex
  @extend $col-flex

.example-flex
  @extend $col-flex

Offsetting columns


.container
  @extend $row

.example-1
  @extend $col-1

.example-5
  @extend $col-5
  @extend $offset-6

Container features

Choose your side


.container
  @extend $row
  @extend $justify-left

.example-3
  @extend $col-3


.container
  @extend $row
  @extend $justify-right

.example-3
  @extend $col-3

Easily centralize


.container
  @extend $row
  @extend $justify-center

.example-3
  @extend $col-3

Justify content: between


.container
  @extend $row
  @extend $justify-between

.example-2
  @extend $col-2

.example-2
  @extend $col-2

.example-2
  @extend $col-2

.example-2
  @extend $col-2

Justify content: around


.container
  @extend $row
  @extend $justify-around

.example-2
  @extend $col-2

.example-2
  @extend $col-2

.example-2
  @extend $col-2

.example-2
  @extend $col-2

Vertical align top


.container
  @extend $row
  @extend $vertical-align-top

.example-6-big
  @extend $col-6

.example-6
  @extend $col-6

Vertical align middle


.container
  @extend $row
  @extend $vertical-align-middle

.example-6-big
  @extend $col-6

.example-6
  @extend $col-6

Vertical align bottom


.container
  @extend $row
  @extend $vertical-align-bottom

.example-6-big
  @extend $col-6

.example-6
  @extend $col-6

Custom mixins for breakpoints

Tip: We have several special mixins to be used in Media Queries. Ensuring that we only rewrite the necessary properties. See the complete list.


.container
  @extend $row

.example-x
  @extend $col-3
  @extend $offset-3

.example-y
  @extend $col-12

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

  .example-y
    mq-col(12)

Browsers support

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