npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

flexbox-grid-mixins

0.1.6 • Public • Published

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

Bower (deprecated)

$ bower install flexbox-grid-mixins --save

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 and Example

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

install

npm i flexbox-grid-mixins

Downloadsweekly downloads

593

version

0.1.6

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability