marikunt / flexbox-grid-mixins

Sass Mixins to generate Flexbox grid

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

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

Installation

npm

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

Yarn

$ yarn add flexbox-grid-mixins --dev

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

Documentation

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

Package manager

flexbox-grid-mixins - npm

Mixins Reference

• Mixins Reference

Example

• Basic Example
• Grid System Example
• Flexbox Grid Mixins Example
• Holy Grail Layout - Using Flexbox Grid Mixins
• Responsive web design - Using Flexbox Grid Mixins
• Unit-Set Grid (Experimental stage)
• Box Sizing using Variable Defaults
• Stack
• Grid Type
• Testing Stick Out Grid

Development

1. run $ sudo yum install nodejs npm
2. run $ sudo npm install --global gulp-cli
3. run $ sudo npm install --global npm-check-updates (optional)
4. Forking on GitHub
5. run $ cd /path/to/flexbox-grid-mixins
6. run $ npm install
7. run $ gulp serve
8. Access URL http://localhost:3000

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.

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

Changelog

• Version 0.2.0
  • update example
  • update package.json
  • add Variable Defaults 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 Variable Defaults flexbox-grid-mixins-grid-type
  • remove bower.json
  • add .travis.yml
• Version 0.1.6
  • add Variable Defaults $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

Copyright (c) 2016-2020 thingsym