https://github.com/johnpolacek/simple-grid-generator
A SASS grid generator for creating responsive grids with some nice features.
https://github.com/johnpolacek/simple-grid-generator
Last synced: 8 months ago
JSON representation
A SASS grid generator for creating responsive grids with some nice features.
- Host: GitHub
- URL: https://github.com/johnpolacek/simple-grid-generator
- Owner: johnpolacek
- License: mit
- Created: 2015-06-28T23:57:26.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2017-05-20T04:50:41.000Z (about 9 years ago)
- Last Synced: 2025-03-10T18:49:09.360Z (over 1 year ago)
- Language: CSS
- Size: 26.4 KB
- Stars: 22
- Watchers: 3
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#Simple Grid Generator (SASS)
A SASS grid generator for creating responsive grids with some nice features. View an example at [johnpolacek.github.io/simple-grid](http://johnpolacek.github.io/simple-grid/).
##Features
####Easy to Use
```
@import 'grid.generator.scss';
@include gridGenerator();
```
####Set Your Columns
Switch to a 18-column or 24-column grid instead.
```
@include gridGenerator(18);
```
####Breakpoints and Breakpoint Prefixes
Change the breakpoints, or add in more. Name the prefixes whatever you like xs-, xl-, etc. If you prefer, set ems for your breakpoints.
```
@include gridGenerator(
12,
(0, 20em, 30em, 60em, 80em),
(xs-,s-,m-,l-,xl-),
'em'
);
```
Breakpoint prefixing allows for markup that sets a default grid width, then overrides at different screen widths.
```
```
####Spacing Helpers
For quick, easy layouts, set custom utility classes to set consistent padding and margin on all your elements.
```
@include gridGenerator(
12,
(0, 480px, 800px),
(s-,m-,l-),
'px',
$spaceUnits: (.5em,1em,2em)
);
```
In your HTML:
```
```
You can use responsive breakpoint prefixing on these as well.
```
```
Or don’t use any spacing helpers, if you prefer.
```
@include gridGenerator(
12,
(0, 480px, 800px),
(s-,m-,l-),
'px',
$spaceUnits: false
);
```
##License
Author & copyright (c) 2015: [John Polacek](http://johnpolacek.com), Dual MIT & GPL license