Flexbox Grid Mixins

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/

Example

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

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 using Dart Sass

1. Import Flexbox Grid Mixins in Sass/SCSS file

@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

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

3. Generate the grid columns

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

Getting Started using LibSass

Note: LibSass is Deprecated. See Future Plans.

1. Import Flexbox Grid Mixins in Sass/SCSS file

@import 'flexbox-grid-mixins';

Example : import from 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);
}

Documentation

See Flexbox Grid Mixins documentation: http://thingsym.github.io/flexbox-grid-mixins/

Mixins Reference

Example

Dart Sass

LibSass

Package manager

flexbox-grid-mixins - npm

Development

run $ sudo yum install nodejs npm
Forking on GitHub
run $ cd /path/to/flexbox-grid-mixins
run $ npm install
run $ npm run serve
Access URL http://localhost:3000

Docker Development Environment

Build and launch website

docker-compose run --rm node npm install
docker-compose run --rm  -p 3000:3000 node npm run serve

Access to URL http://localhost:3000

listing tasks

docker-compose run --rm node npm run

Contribution

Patches and Bug Fixes

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.

Fork Flexbox Grid Mixins from GitHub repository
Create a feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Create new Pull Request on GitHub

Changelog

Version 0.3.4
- fix npm script
- fix Mixins Reference
- add Docker Development Environment
- gulpfile.js for docker
- update package.json
- update github actions, Node.js 12 actions are deprecated
- fix layout margin
- add Cards Layout example
Version 0.3.3
- update README
- update index.html
- update example
- add condense
- add $gap argument for gap CSS property
Version 0.3.2
- fix gulp-sass compiler
- update package.json
- fix Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
- add timeout-minutes to workflows
Version 0.3.1
- update example
- fix items row/column alignment example
- add auto margin example
Version 0.3.0
- add example for dart sass
- add Flexbox Grid Mixins for Dart Sass
- add dart sass workfows with gulpfile.js
Version 0.2.2
- remove .travis.yml, change CI/CD to GitHub Actions
Version 0.2.1
- auto release to npm only version tags
- gulp bump up version to 4.0
Version 0.2.0
- update example
- update package.json
- add Default Values flexbox-grid-mixins-stack
- change margin property, remove @mixin, grid-margin and grid-col-margin
- remove breakpoint value of col argument
- remove condensed argument
- change grid-type from argument to Default Values flexbox-grid-mixins-grid-type
- remove bower.json
- add .travis.yml
Version 0.1.6
- add Default Values $flexbox-grid-mixins-box-sizing
- update package.json
- change lint from scss-lint to stylelint
Version 0.1.5
- update package.json
- add optional arguments $shorthand to @mixin grid-col
Version 0.1.4
- update example
- update document
- fix conditional expression
- add optional arguments $width, $max-width, $min-width, $height, $max-height and $min-height to @mixin grid-col
- enable flex-grow with number column
- add positive preset column
- change readme.md file name to upper case
Version 0.1.3
- rename folder to docs from doc, change gh-pages
- update document
- update example
- add optional arguments $flex-direction and $flex-wrap to the mixin grid
Version 0.1.2
- update document
- update example
- improve unit-set column, using CSS calc()
Version 0.1.1
- fix breakpoint preset column
- fix example
- fix Holy Grail Layout
Version 0.1.0
- Initial release.

License

Licensed under the MIT License.

Author

thingsym