_flex-grid-framework.scss

/*
Flex Grid Framework
Platform: Sass (.scss)

Original repository:
https://github.com/afonsopacifer/flex-grid-framework
Website:
http://flexgridframework.com/
Author:
Afonso Pacifer (afonsopacifer.com)
Version: 1.3.0
Licence:
MIT - https://github.com/afonsopacifer/flex-grid-framework/blob/master/licence.md
* /

/* Configs
------------------------------------------------*/
$flx-max-width: 1200px !default;
$flx-margin: 0.52083% !default;
$flx-padding: 0 !default;
$flx-column_number: 12 !default;
$flx-column_width: (100%/$flx-column_number) - 2*$flx-margin !default;

%margin {
  margin-right: $flx-margin;
  margin-left: $flx-margin;
}
%padding {
  padding-right: $flx-padding;
  padding-left: $flx-padding;
}

/* Row
------------------------------------------------*/
%row {
  margin-left: -$flx-padding;
  margin-right: -$flx-padding;
  max-width: $flx-max-width;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Columns
------------------------------------------------*/

// mixin
@mixin col($number-of-cols) {
  @if ($number-of-cols == flex) {
    -webkit-box-flex: auto;
    -moz-box-flex: auto;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
  } @else {
    width: ($number-of-cols * $flx-column_width) + ((($number-of-cols - 1) * 2) * $flx-margin);
  }

  @extend %margin;
  @extend %padding;
  box-sizing: border-box;
}

// extends the mixin :)
%col-flex {
  @include col(flex);
}

@for $i from 1 to ($flx-column_number + 1) {
  %col-#{$i} {
    @include col($i);
  }
}


// for media queries
@mixin mq-col($number-of-cols) {
  width: ($number-of-cols * $flx-column_width) + ((($number-of-cols - 1) * 2) * $flx-margin);
}

/* Offset
------------------------------------------------*/

// mixin
@mixin mq-offset($number-of-offset) {
  margin-left: ($number-of-offset * $flx-column_width) + ((($number-of-offset - 1) * 2) * $flx-margin) + (3 * $flx-margin);
}

// extends the mixin :)
@for $i from 0 to $flx-column_number {
  %offset-#{$i} {
    @include mq-offset($i);
  }
}

/* Flex Container
------------------------------------------------*/

// mixin
@mixin mq-justify($content-value) {

  @if ($content-value == left) {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  @if ($content-value == right) {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  @if ($content-value == center) {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  @if ($content-value == between) {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  @if ($content-value == around) {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

}

// extends the mixin :)
%justify-left {
  @include mq-justify(left);
}

%justify-right {
  @include mq-justify(right);
}

%justify-center {
  @include mq-justify(center);
}

%justify-between {
  @include mq-justify(between);
}

%justify-around {
  @include mq-justify(around);
}

/* Flex Itens
------------------------------------------------*/

// mixin
@mixin mq-vertical-align($vertical-value) {

  @if ($vertical-value == top) {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
  }

  @if ($vertical-value == middle) {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
  }

  @if ($vertical-value == bottom) {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
  }

}

// extends the mixin :)
%vertical-align-top {
  @include mq-vertical-align(top);
}

%vertical-align-middle {
  @include mq-vertical-align(middle);
}

%vertical-align-bottom {
  @include mq-vertical-align(bottom);
}