https://github.com/jongacnik/gr8-css
Functional css layout utilities
https://github.com/jongacnik/gr8-css
Last synced: 12 months ago
JSON representation
Functional css layout utilities
- Host: GitHub
- URL: https://github.com/jongacnik/gr8-css
- Owner: jongacnik
- Created: 2015-08-04T05:32:54.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-07-18T22:27:00.000Z (almost 10 years ago)
- Last Synced: 2025-04-02T15:38:19.606Z (about 1 year ago)
- Language: CSS
- Size: 65.4 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# gr8
Functional css layout [utilities](#utilities) & [command line tool](#command-line-tool).
**Full documentation coming, eventually...**
s/o [gravitons](https://github.com/jxnblk/gravitons), [Basscss](http://basscss.com) and [f(css)](http://www.jon.gold/2015/07/functional-css/).
## Utilities
gr8 is split into multiple files that contain specific layout utilities.
File | Contains
--- | ---
[_c.scss](https://github.com/jongacnik/gr8/blob/master/source/_c.scss) | column
[_co.scss](https://github.com/jongacnik/gr8/blob/master/source/_co.scss) | column offsets
[_g.scss](https://github.com/jongacnik/gr8/blob/master/source/_g.scss) | gutter
[_p.scss](https://github.com/jongacnik/gr8/blob/master/source/_p.scss) | padding
[_m.scss](https://github.com/jongacnik/gr8/blob/master/source/_m.scss) | margin
[_d.scss](https://github.com/jongacnik/gr8/blob/master/source/_d.scss) | display
[_x.scss](https://github.com/jongacnik/gr8/blob/master/source/_x.scss) | flexbox
[_f.scss](https://github.com/jongacnik/gr8/blob/master/source/_f.scss) | float
[_ps.scss](https://github.com/jongacnik/gr8/blob/master/source/_ps.scss) | positioning
[_z.scss](https://github.com/jongacnik/gr8/blob/master/source/_z.scss) | z-index
[_h.scss](https://github.com/jongacnik/gr8/blob/master/source/_h.scss) | header
[_t.scss](https://github.com/jongacnik/gr8/blob/master/source/_t.scss) | text-align
[_bg.scss](https://github.com/jongacnik/gr8/blob/master/source/_bg.scss) | background
[_op.scss](https://github.com/jongacnik/gr8/blob/master/source/_op.scss) | opacity
[_etc.scss](https://github.com/jongacnik/gr8/blob/master/source/_etc.scss) | various
[_dev.scss](https://github.com/jongacnik/gr8/blob/master/source/_dev.scss) | dev helpers
[_options.scss](https://github.com/jongacnik/gr8/blob/master/source/_options.scss) | options
[_main.scss](https://github.com/jongacnik/gr8/blob/master/source/_main.scss) | main
## Responsive
Custom attributes are used to define responsive values. The names of the attributes are the keys of the breakpoints set in the options.
```
```
## Customization
Breakpoints, whitespace, font size, responsive classes and nested columns can be changed in `source/_options.scss`. To add more/fewer breakpoints, whitespace, or font sizes, add/remove elements from the arrays.
If using nested columns and nested column offsets I recommend using something like [purify-css](https://www.npmjs.com/package/purify-css).
## Command Line Tool
Expose `gr8` command to quickly add the source of gr8 to a project.
```
npm i -g gr8
```
```
Usage: gr8 [options] [target]
Options:
-h, --help output usage information
-V, --version output the version number
-d, --dirname gr8 directory name
```
```
# Add gr8 to current directory
gr8
# Add gr8 to specified directory
gr8 put/it/here
# Add gr8 to specified directory and change gr8 directory name
gr8 -d gr8css put/it/here
```
## Build
```
npm install
npm run dist
```