3.0.0

[jongacnik]

3.0.0 is a full rewrite of gr8 internals. The resulting css is still the same (with a few additions), but how you go about generating it has been refined. Documentation has been fully rewritten.

Some larger updates:

Just a function

gr8 is now just a function which returns a string of css:

var gr8 = require('gr8')
var css = gr8({/* options */})

gr8-util

The functionality for generating a css utility is pulled out into it's own module called gr8-util. This is just a little function where given some options, returns a string of css. gr8 is now just a collection of calls to gr8-util.

Custom utilities as options

Add custom utilities by passing objects into the utils option. These objects are passed directly into gr8-util.

var bgcolor = {
  prop: {
    bgc: 'background-color'
  },
  vals: ['red', 'blue', 'green']
}

var fontcolor = {
  prop: {
    fc: 'color'
  },
  vals: ['red', 'blue', 'green']
}

var css = gr8({
  utils: [
    bgcolor,
    fontcolor
  ]
})

Split (.s) classes

Nested columns are removed and replaced with split classes. These classes are meant to split a container. For example, .s2 splits a container in half, aka width:50%. By combining column and split classes almost any level of column nesting can be achieved.

.s1{width:100%}
.s2{width:50%}
.s3{width:33.33%}
.s4{width:25%}
.s5{width:20%}
.s6{width:16.67%}
.s7{width:14.29%}
.s8{width:12.5%}
.s9{width:11.11%}
.s10{width:10%}
.s11{width:9.09%}
.s12{width:8.33%}

<div class="c12 x xw dev">
  <div class="c10 x">
    <div class="s5">Nested</div>
    <div class="s5">Nested</div>
    <div class="s5">Nested</div>
    <div class="s5">Nested</div>
    <div class="s5">Nested</div>
  </div>
  <div class="c2">
    2-Column
  </div>
</div>

Avoids generating obscene amounts of nested column and column offset classes.

Selectors as functions

Define selectors as functions for more flexibility:

// es6
var css = gr8({
  selector: s => `.gr8-${s}`
})

// es5
var css = gr8({
  selector: function (selectorName) {
    return '.gr8-' + selectorName
  }
})

Custom media queries

Breakpoints will now accept media query strings as values:

var css = gr8({
  breakpoints: {
    sm: 768,
    portrait: 'screen and (orientation: portrait)'
  }
})

Breaking Changes

• gr8 is now just a function call
• Removed attach, opt for insert-css or similar instead.
• Removed toString method.
• Removed add method. Add custom utilities by passing objects into the utils option.
• Responsive utilites generated by default
• Responsive utilites are min-width based by default
• Removed responsive option, pass breakpoints: false to remove responsive utilities
• Removed nested columns and replaced with .s classes.
• Added selector options to define selector as a function.
• Removed attribute option and replaced with breakpointSelector option. Can define selector as function.
• Removed max option, pass media query string directly into breakpoints for custom media queries.
• Custom utility api updated. Refer to gr8-util documentation.

✌️✨

[tttimur]

nice!

[jondashkyle]

looking awesome