Skip to content

Latest commit

 

History

History
351 lines (273 loc) · 9.25 KB

README.md

File metadata and controls

351 lines (273 loc) · 9.25 KB
Raw

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

Mixins Reference

Example

Dart Sass

LibSass

Package manager

flexbox-grid-mixins - npm

Development

  1. run $ sudo yum install nodejs npm
  2. Forking on GitHub
  3. run $ cd /path/to/flexbox-grid-mixins
  4. run $ npm install
  5. run $ npm run serve
  6. 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.

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

Copyright (c) 2016-2022 thingsym