Flexbox Grid Mixins v.0.1.4

Sass Mixins to generate Flexbox grid

Feature

Flexbox Grid Mixins is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).

Basic Example

Demo

3
9

HTML

<div class="grid">
<div class="grid__col-3">
    3
</div>
<div class="grid__col-9">
    9
</div>
</div>

Sass

@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';

$default-grid-gutter: 2%;

.grid {
	@include grid($gutter: $default-grid-gutter);

    > .grid__col-3 {
        @include grid-col($col: 3, $gutter: $default-grid-gutter);
    }
    > .grid__col-9 {
        @include grid-col($col: 9, $gutter: $default-grid-gutter);
    }
}

CSS

.grid {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -1%;
}

.grid > .grid__col-3 {
  box-sizing: border-box;
  -ms-flex: 0 0 23%;
  flex: 0 0 23%;
  margin: 0 1% 2%;
}

.grid > .grid__col-9 {
  box-sizing: border-box;
  -ms-flex: 0 0 73%;
  flex: 0 0 73%;
  margin: 0 1% 2%;
}

Grid System Example

Demo

12
1
11
2
10
3
9
4
8
5
7
6
6

HTML

<div class="grid">
<div class="grid__col-12">
    12
</div>
</div>

<div class="grid">
<div class="grid__col-1">
    1
</div>
<div class="grid__col-11">
    11
</div>
</div>

<div class="grid">
<div class="grid__col-2">
    2
</div>
<div class="grid__col-10">
    10
</div>
</div>

<div class="grid">
<div class="grid__col-3">
    3
</div>
<div class="grid__col-9">
    9
</div>
</div>

<div class="grid">
<div class="grid__col-4">
    4
</div>
<div class="grid__col-8">
    8
</div>
</div>

<div class="grid">
<div class="grid__col-5">
    5
</div>
<div class="grid__col-7">
    7
</div>
</div>

<div class="grid">
<div class="grid__col-6">
    6
</div>
<div class="grid__col-6">
    6
</div>
</div>

Sass

@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';

$default-grid-columns: 12;
$default-grid-gutter: 2%;

.grid {
	@include grid($gutter: $default-grid-gutter);

	@for $i from 1 through $default-grid-columns {
		> .grid__col-#{$i} {
			@include grid-col($col: $i, $grid-columns: $default-grid-columns, $gutter: $default-grid-gutter);
		}
	}
}

CSS


.grid {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -1%;
}

.grid > .grid__col-1 {
  box-sizing: border-box;
  -ms-flex: 0 0 6.33333%;
  flex: 0 0 6.33333%;
  margin: 0 1% 2%;
}

.grid > .grid__col-2 {
  box-sizing: border-box;
  -ms-flex: 0 0 14.66667%;
  flex: 0 0 14.66667%;
  margin: 0 1% 2%;
}

.grid > .grid__col-3 {
  box-sizing: border-box;
  -ms-flex: 0 0 23%;
  flex: 0 0 23%;
  margin: 0 1% 2%;
}

.grid > .grid__col-4 {
  box-sizing: border-box;
  -ms-flex: 0 0 31.33333%;
  flex: 0 0 31.33333%;
  margin: 0 1% 2%;
}

.grid > .grid__col-5 {
  box-sizing: border-box;
  -ms-flex: 0 0 39.66667%;
  flex: 0 0 39.66667%;
  margin: 0 1% 2%;
}

.grid > .grid__col-6 {
 box-sizing: border-box;
 -ms-flex: 0 0 48%;
  flex: 0 0 48%;
  margin: 0 1% 2%;
}

.grid > .grid__col-7 {
  box-sizing: border-box;
  -ms-flex: 0 0 56.33333%;
  flex: 0 0 56.33333%;
  margin: 0 1% 2%;
}

.grid > .grid__col-8 {
  box-sizing: border-box;
  -ms-flex: 0 0 64.66667%;
  flex: 0 0 64.66667%;
  margin: 0 1% 2%;
}

.grid > .grid__col-9 {
  box-sizing: border-box;
  -ms-flex: 0 0 73%;
  flex: 0 0 73%;
  margin: 0 1% 2%;
}

.grid > .grid__col-10 {
  box-sizing: border-box;
  -ms-flex: 0 0 81.33333%;
  flex: 0 0 81.33333%;
  margin: 0 1% 2%;
}

.grid > .grid__col-11 {
  box-sizing: border-box;
  -ms-flex: 0 0 89.66667%;
  flex: 0 0 89.66667%;
  margin: 0 1% 2%;
}

.grid > .grid__col-12 {
  box-sizing: border-box;
  -ms-flex: 0 0 98%;
  flex: 0 0 98%;
  margin: 0 1% 2%;
}

Examples

Installation

npm

$ npm install flexbox-grid-mixins --save-dev

Yarn

$ yarn add flexbox-grid-mixins --dev

Bower (deprecated)

$ bower install flexbox-grid-mixins --save

Manual Install

Include sass/_flexbox-grid-mixins.scss in the appropriate location in your project.

Getting Started

1. Import Flexbox Grid Mixins in Sass/SCSS file

@import 'flexbox-grid-mixins';
Example : import form node_modules
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';

2. Define the grid container

.grid {
    @include grid();
}

3. Generate the grid columns

.grid__col-3 {
    @include grid-col(3);
}
.grid__col-9 {
    @include grid-col(9);
}

Mixins Reference

@include grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $grid-type: skeleton);

Define the grid container.

Arguments Default value Values Description Example
$display flex flex | inline-flex generate a block-level or an inline-level grid container
$flex-direction null null | row | row-reverse | column | column-reverse define the main axis and the direction
$flex-wrap null null | nowrap | wrap | wrap-reverse whether flex items are forced into a single line or can be wrapped onto multiple lines
$flex-flow null null | [row | row-reverse | column | column-reverse] [nowrap | wrap | wrap-reverse] a shorthand for setting the flex-direction and flex-wrap properties
$justify-content null null | flex-start | flex-end | center | space-between | space-around | space-evenly defines space between and around content items along the main-axis of container
$align-items null null | flex-start | flex-end | center | baseline | stretch defines space between and around flex items along the cross-axis of container
$align-content null null | flex-start | flex-end | center | space-between | space-around | stretch defines space between and around content items along the cross-axis of their container
$gutter null null | <percentage> | <length> define gutter. null is no margin of both ends of the grid. <percentage> generate a margin of both ends of the grid. <length> generate a margin of both ends of the grid (<length> is experimental stage).
$grid-type skeleton skeleton | margin-offset define the type of grid

@include grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $condensed: false, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $grid-type: skeleton, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null);

Generate the grid columns.

The use of CSS calc() is experimental stage. If $col sets <number> or <width> and $gutter sets <length>, use CSS calc().

Arguments Default value Values Description Example
$col null null | initial | <number> | auto | equal | none | breakpoint | positive | <width> define columns. null is no set columns. <number> is number of columns. initial, auto, equal, none, breakpoint and positive are preset columns. <width> is unit set columns (<width> is experimental stage. <breakpoint> is deprecated, use <initial> instead).
$grid-columns 12 <number> define the total number of columns in the grid.
$col-offset null null | <percentage> <percentage> offset a width of columns.
$gutter null null | <percentage> | <length> define gutter. null is no margin between columns. <percentage> generate a margin of between columns. <length> generate a margin of between columns (<length> is experimental stage).
$condensed false <boolean> cutting the top and bottom margins of the columns, if true.
$align-self null null | auto | flex-start | flex-end | center | baseline | stretch override the align-items value
$flex-grow 0 * <number> grow relative to the rest of items in the grid. specifies what amount of space inside the flex container the item should take up.
$flex-shrink 1 * <number> shrink relative to the rest of items in the grid
$flex-basis auto * <length> | auto specifies the initial main size of a item
$order null null | <integer> specifies the order in the grid container
$grid-type skeleton skeleton | margin-offset define the type of grid
$last-child false <boolean> adjust the last-child of the columns, if true and the $grid-type is margin-offset
$width null null | <boolean> | <width> | auto specifies the width of an element
$max-width null null | <boolean> | <width> | auto sets the maximum width of an element
$min-width null null | <boolean> | <width> | auto sets the minimum width of an element
$height null null | <height> specifies the height of an element
$max-height null null | <height> sets the maximum height of an element
$min-height null null | <height> sets the minimum height of an element

* The same initial value as the property of Flexbox

@include grid-margin($margin: null, $margin-top: null, $margin-right: null, $margin-bottom: null, $margin-left: null);

Generate the margins around grids.

Arguments Default value Values Description
$margin null null | <margin-width>
$margin-top null null | <margin-width>
$margin-right null null | <margin-width>
$margin-bottom null null | <margin-width>
$margin-left null null | <margin-width>

@include grid-col-margin($margin: null, $margin-top: null, $margin-right: null, $margin-bottom: null, $margin-left: null);

Generate the margins around columns. Work as alias grid-margin().

Arguments Default value Values Description
$margin null null | <margin-width>
$margin-top null null | <margin-width>
$margin-right null null | <margin-width>
$margin-bottom null null | <margin-width>
$margin-left null null | <margin-width>

Resources

Contribute

See GitHub - Flexbox Grid Mixins

License

The MIT License (MIT)

Copyright (c) 2016 - 2018 Thingsym