https://github.com/thingsym/flexbox-grid-mixins
Sass Mixins to generate Flexbox grid
https://github.com/thingsym/flexbox-grid-mixins
css dart-sass flexbox libsass mixin npm sass scss
Last synced: 20 days ago
JSON representation
Sass Mixins to generate Flexbox grid
- Host: GitHub
- URL: https://github.com/thingsym/flexbox-grid-mixins
- Owner: thingsym
- License: mit
- Created: 2016-05-08T12:14:57.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-02-11T00:38:08.000Z (about 2 years ago)
- Last Synced: 2025-03-24T07:58:38.757Z (29 days ago)
- Topics: css, dart-sass, flexbox, libsass, mixin, npm, sass, scss
- Language: SCSS
- Homepage: https://thingsym.github.io/flexbox-grid-mixins/
- Size: 808 KB
- Stars: 73
- Watchers: 4
- Forks: 19
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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/](https://thingsym.github.io/flexbox-grid-mixins/)
## Example
### HTML
```
3
9
```
### 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](https://sass-lang.com/blog/libsass-is-deprecated). See [Future Plans](https://sass-lang.com/blog/the-module-system-is-launched#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/](http://thingsym.github.io/flexbox-grid-mixins/)
## Mixins Reference
[Mixins Reference](http://thingsym.github.io/flexbox-grid-mixins/#Mixins-Reference)
## Example
* [Basic Example](http://thingsym.github.io/flexbox-grid-mixins/#Basic-Example)
* [Grid System Example](http://thingsym.github.io/flexbox-grid-mixins/#Grid-System-Example)
### Dart Sass
* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/example.html)
* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/holy-grail-layout.html)
* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/responsive.html)
* [Gap (grid-gap) css property](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/gap.html)
* [Auto margin](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/auto-margin.html)
* [Box Sizing using Default Values](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/box-sizing.html)
* [Stack](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/stack.html)
* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/grid-type.html)
* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/unit-set.html)
* [Test] [Stick Out Grid](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/test-stick-out.html)
### LibSass
* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example/example.html)
* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/holy-grail-layout.html)
* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/responsive.html)
* [Gap (grid-gap) css property](http://thingsym.github.io/flexbox-grid-mixins/example/gap.html)
* [Auto margin](http://thingsym.github.io/flexbox-grid-mixins/example/auto-margin.html)
* [Box Sizing using Default Values](http://thingsym.github.io/flexbox-grid-mixins/example/box-sizing.html)
* [Stack](http://thingsym.github.io/flexbox-grid-mixins/example/stack.html)
* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example/grid-type.html)
* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example/unit-set.html)
* [Test] [Stick Out Grid](http://thingsym.github.io/flexbox-grid-mixins/example/test-stick-out.html)
## Package manager
[flexbox-grid-mixins - npm](https://www.npmjs.com/package/flexbox-grid-mixins)
## 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](https://github.com/thingsym/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](https://github.com/thingsym)
Copyright (c) 2016-2022 thingsym