gr8

Functional css layout utilities & command line tool.

Full documentation coming, eventually...

Utilities

gr8 is split into multiple files that contain specific layout utilities.

File	Contains
_c.scss	column
_co.scss	column offsets
_g.scss	gutter
_p.scss	padding
_m.scss	margin
_d.scss	display
_x.scss	flexbox
_f.scss	float
_ps.scss	positioning
_z.scss	z-index
_h.scss	header
_t.scss	text-align
_bg.scss	background
_op.scss	opacity
_etc.scss	various
_dev.scss	dev helpers
_options.scss	options
_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.

  <div
    class="c2"
    xl="c3"
    lg="c4"
    md="c6"
    sm="c12"
  ></div>

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.

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