The Flex Semantic Grid for Stylus and Sass 


$ bower install flex-grid-framework



$ npm install flex-grid-framework
Download v1.3.0

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

Baby steps

Note: To use the framework, you'll need to compile your style with the Sass preprocessor using Ruby or LibSass, for more information see Ruby / LibSass and Sass.

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 {
    @include mq-col(12);
    @include mq-offset(0);
  }
  .example-y {
    @include mq-col(12);
  }
}

Browsers support

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