Flexbox Grid Mixins v.0.3.1

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

LibSass

@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);
    }
}

Dart Sass

@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';

$default-grid-gutter: 2%;

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

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

CSS

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

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

.grid > .grid__col-9 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 73%;
    flex: 0 0 73%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 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

LibSass

@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);
        }
    }
}

Dart Sass

@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';

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

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

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

CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

Examples

Installation

npm

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

Yarn

$ yarn add flexbox-grid-mixins --dev

Manual Install

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

Getting Started

Note: LibSass is Deprecated. See Future Plans.

1. Import Flexbox Grid Mixins in Sass/SCSS file

LibSass

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

Dart Sass

@use 'flexbox-grid-mixins';
Example: import from node_modules
@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';

2. Define the grid container

LibSass

.grid {
    @include grid();
}

Dart Sass

.grid {
    @include flexbox-grid-mixins.grid();
}

3. Generate the grid columns

LibSass

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

Dart Sass

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

Mixins Reference

Default Values (global settings)

Default Values Default value Values Description Example
$flexbox-grid-mixins-grid-type skeleton skeleton | margin-offset define the type of grid
$flexbox-grid-mixins-box-sizing border-box null | content-box | border-box define border-box property
$flexbox-grid-mixins-stack margin-bottom unset | margin-top | margin-bottom | margin-both define the top or bottom or both margins of the columns

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

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).

@include grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $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 | positive | <width> define columns. null is no set columns. <number> is number of columns. initial, auto, equal, none, 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).
$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
$shorthand true true | false use flex property as shorthand by default. use three properties flex-basis, flex-grow and flex-shrink if false.
$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

Resources

Contribute

See GitHub - Flexbox Grid Mixins

License

The MIT License (MIT)

Copyright (c) 2016 - 2021 Thingsym