Flexbox Grid Mixins

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

HTML

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

Sass

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

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

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

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

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

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

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 dart-sass/_flexbox-grid-mixins.scss or sass/_flexbox-grid-mixins.scss in the appropriate location in your project.

Getting Started

1. Import Flexbox Grid Mixins in Sass/SCSS file

Dart Sass

@use 'flexbox-grid-mixins';

Example: import from node_modules

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

LibSass

@import 'flexbox-grid-mixins';

Example: import from node_modules

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

Note: LibSass is Deprecated. See Future Plans.

2. Define the grid container

Dart Sass

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

LibSass

.grid {
    @include grid();
}

3. Generate the grid columns

Dart Sass

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

LibSass

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

Mixins Reference

Default Values (global settings)

Default Values	Default value	Values	Description
$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, $gap: null, $row-gap: null, $column-gap: null);

@include grid() define the grid container.

Arguments	Default value	Values	Description
$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 gutters using margin CSS property. `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).
$gap	null	null \| <percentage> \| <length>	define gutters using gap CSS property. `null` is no gaps between rows and columns. `<percentage>` generate a gaps between rows and columns. `<length>` generate a gaps between rows and columns.
$row-gap	null	null \| <percentage> \| <length>	define row gutter using row-gap CSS property. `null` is no gaps between rows and columns. `<percentage>` generate a gaps between rows and columns. `<length>` generate a gaps between rows and columns.
$column-gap	null	null \| <percentage> \| <length>	define column gutter using column-gap CSS property. `null` is no gaps between rows and columns. `<percentage>` generate a gaps between rows and columns. `<length>` generate a gaps between rows and columns.

@include grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null, $gutter: null, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $last-child: false, $condense: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null);

@include grid-col() 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
$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 (Keyword values). `equal` as flex: 1. `<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 gutters using margin CSS property. `null` is no margin between columns. `<percentage>` generate a margin of between columns. `<length>` generate a margin of between columns (`<length>` is experimental stage).
$gap	null	null \| <percentage> \| <length>	define gutters using gap CSS property. `null` is no gaps between rows and columns. `<percentage>` generate a gaps between rows and columns. `<length>` generate a gaps between rows and columns.
$row-gap	null	null \| <percentage> \| <length>	define row gutter using row-gap CSS property. `null` is no gaps between rows and columns. `<percentage>` generate a gaps between rows and columns. `<length>` generate a gaps between rows and columns.
$column-gap	null	null \| <percentage> \| <length>	define column gutter using column-gap CSS property. `null` is no gaps between rows and columns. `<percentage>` generate a gaps between rows and columns. `<length>` generate a gaps between rows and columns.
$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`.
$condense	null	false \| true	remove the Stack (the top or bottom margin), if `true`
$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)

Flexbox Grid Mixins v.0.3.4

Feature

Basic Example

Demo

HTML

Sass

Dart Sass

LibSass

CSS

Grid System Example

Demo

HTML

Sass

Dart Sass

LibSass

CSS

Examples

Dart Sass

LibSass

Installation

npm

Yarn

Manual Install

Getting Started

1. Import Flexbox Grid Mixins in Sass/SCSS file

Dart Sass

LibSass

2. Define the grid container

Dart Sass

LibSass

3. Generate the grid columns

Dart Sass

LibSass

Mixins Reference

Default Values (global settings)

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

Resources

Contribute

License