Sass Mixins to generate Flexbox grid
MIT License
Sass Mixins to generate Flexbox grid.
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).
Flexbox Grid Mixins documentation: https://thingsym.github.io/flexbox-grid-mixins/
<div class="grid">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
@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);
}
}
@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);
}
}
.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%;
}
$ npm install flexbox-grid-mixins --save-dev
$ yarn add flexbox-grid-mixins --dev
Include dart-sass/\_flexbox-grid-mixins.scss
or sass/\_flexbox-grid-mixins.scss
in the appropriate location in your project.
@use 'flexbox-grid-mixins';
Example : import from node_modules
@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';
.grid {
@include flexbox-grid-mixins.grid();
}
.grid__col-3 {
@include flexbox-grid-mixins.grid-col(3);
}
.grid__col-9 {
@include flexbox-grid-mixins.grid-col(9);
}
Note: LibSass is Deprecated. See Future Plans.
@import 'flexbox-grid-mixins';
Example : import from node_modules
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
.grid {
@include grid();
}
.grid__col-3 {
@include grid-col(3);
}
.grid__col-9 {
@include grid-col(9);
}
See Flexbox Grid Mixins documentation: http://thingsym.github.io/flexbox-grid-mixins/
$ sudo yum install nodejs npm
$ cd /path/to/flexbox-grid-mixins
$ npm install
$ npm run serve
docker-compose run --rm node npm install
docker-compose run --rm -p 3000:3000 node npm run serve
Access to URL http://localhost:3000
docker-compose run --rm node npm run
Small patches and bug reports can be submitted a issue tracker in Github. Forking on Github is another good way. You can send a pull request.
Licensed under the MIT License.
Copyright (c) 2016-2022 thingsym