gr8r

Functional CSS-in-JS shorthand utilties.

npm i gr8r

Note: gr8r is under active development!

Not quite ready for use, there are still some todos:

• [ ] Testing
• [ ] Breakpoints and common declarations (cxs)
• [ ] Extended documentation and example page

Features

• Customizable: Adjust breakpoints, units, grid, etc...
• Extendable: Add your own shorthand methods.
• Prefixed: Handles browser prefixing out of the box.
• Ultralight: Generated on the fly—no stylesheets.

Use short-hand utilities within JS to generate your styles in the DOM. For a CSS-only solution, check out gr8. Prepped for use with Browserify, pairs nicely with choo and yo-yo. Shoutout understyle, f(css), etc…

• gr8 for CSS
• gr8r for CSS-in-JS

gr8 and gr8r are maintained by Jon Gacnik and Jon-Kyle and used extensively within projects at Folder Studio.

Usage

const gr8r = require('gr8r/html')

gr8r('¡estupendo!', 'c6 ttu')

Content

Accepts either an HTML Element, string or array as the first argument. An HTML element is always returned.

• HTML Element: The gr8 class(es) are added, which is then returned.
• String/Array: A new element is returned containing the content.

An example using yo-yo:

const gr8r = require('gr8r/html')
const yo = require('yo-yo')

gr8r('We construct and keep on constructing...', 'c12 m2')
// <div class="cxs-3919501705">We construct...

gr8r(yo`<header>yet intuition is still a good thing.</header>`, 'c12 m2')
// <header class="cxs-3919501705">yet intuition…

Arguments

Methods can contain variable arguments such as c6 and p2, or predefined rules like ttu. It’s also possible to pass a string as an argument using : as a delimiter. For example, you could add a custom method called bg and use it with the shorthand bg:black.

Units

It’s possibible to set a custom unit when declaring the value of a method. Fallsback to options unit.

gr8r('When I haven’t any blue…', 'p20px')
gr8r('... I use red.', 'p2')

Breakpoints

Methods can be redeclared for each breakpoint. Additionally, use an integer as a key to get ultra-specific.

gr8r('Put this there.', 'p2', {
  xl: 'p6',
  lg: 'p4',
  600: 'p3.5',
  md: 'p3',
  sm: 'p2'
})

Options

Several options are configurable by calling setOptions.

const gr8r = require('gr8r')

gr8r.setOptions({
  breakpoints: {
    xl: '1439px',
    lg: '1260px',
    md: '1023px',
    sm: '767px'
  },
  // Min or max width
  max: true,
  // Grid
  cols: 12,
  // Default unit when none is passed
  unit: 'rem'
})

Custom Methods

It’s possible to extend gr8r by creating your own methods. Ensure you’re returning an object which contains the appropriately formatted CSS styles. Prefixing is handled for you.

const gr8r = require('gr8r')

gr8r.addMethod({
  match: 'omg',
  value: ({ omg }) => {
    const color = 'gold'
    return { border: '20px solid ' + color }
  }
}

gr8r.e('It works!', 'p3 c6 omg', { md: 'p1' })

Methods

Background

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | bgsc | | background-size | cover | | bgsct | | background-size | contain | | bgpc | | background-position | center | | bgpt | | background-position | top | | bgpr | | background-position | right | | bgpb | | background-position | bottom | | bgpl | | background-position | left | | bgrn | | background-repeat | no-repeat | | bgrx | | background-repeat | repeat-x | | bgry | | background-repeat | repeat-y | | bgn | | background | none |

Shortcuts

| Utility | Value | Returns | |:--------|:------|:--------| | bgc | | bsc bgpc bgrn | | bgct | | bsct bgpc bgrn |

Column

Columns are calculated by comparing the passed value against the cols option. By default there are 12 columns, so passing 6 will return a width of 50%. Additionally, you can offset a column (co) in a similar way, which will push the column to the right by returning margin-left.

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | c | int/float | width | (value/cols)% | | co | int/float | margin-left | (value/cols)% |

Dev

This is useful for seeing the underlying structure of an element for debugging purposes.

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | dev | | outline | (nested structure) |

Display

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | x | | display | flex | | db | | display | block | | dib | | display | inline-block | | di | | display | inline | | dt | | display | table | | dtc | | display | table-cell | | dtr | | display | table-row | | dn | | display | none |

Flex(box)

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | xac | | align-items | center | | xab | | align-items | baseline | | xas | | align-items | stretch | | xafs | | align-items | flex-start | | xafe | | align-items | flex-end | | xdr | | flex-direction | row | | xdrr | | flex-direction | row-reverse | | xdc | | flex-direction | column | | xdcr | | flex-direction | column-reverse | | xjc | | justify-content | center | | xjb | | justify-content | space-between | | xja | | justify-content | space-around | | xjc | | justify-content | flex-start | | xje | | justify-content | flex-end | | xw | | flex-wrap | wrap | | xwr | | flex-wrap | wrap-reverse | | xwn | | flex-wrap | no-wrap |

Float

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | fl | | float | left | | fr | | float | right | | fn | | float | none |

Margin

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | m | int/float | margin | {value}{unit} | | mt | int/float | margin-top | {value}{unit} | | mr | int/float | margin-right | {value}{unit} | | mb | int/float | margin-bottom | {value}{unit} | | ml | int/float | margin-left | {value}{unit} |

Misc

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | curp | | cursor | pointer | | curd | | cursor | default | | usn | | user-select | none | | usa | | user-select | auto | | ust | | user-select | text | | usc | | user-select | contain | | usall | | user-select | all |

Opacity

Value is 0-100.

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | o | int/float | opacity | {value/100} |

Overflow

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | ofh | | overflow | hidden | | ofhx | | overflow | hidden-x | | ofhy | | overflow | hidden-y | | ofs | | overflow | scroll | | ofsx | | overflow | scroll-x | | ofsy | | overflow | scroll-y |

Padding

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | p | int/float | padding | {value}{unit} | | pt | int/float | padding-top | {value}{unit} | | pr | int/float | padding-right | {value}{unit} | | pb | int/float | padding-bottom | {value}{unit} | | pl | int/float | padding-left | {value}{unit} |

Positioning

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | psf | | position | fixed | | psa | | position | absolute | | psr | | position | relative | | t | int/float | top | {value}{unit} | | r | int/float | top | {value}{unit} | | b | int/float | top | {value}{unit} | | l | int/float | top | {value}{unit} |

Size

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | h | int/float | height | {value}{unit} | | vh | int/float | height | {value}vh | | w | int/float | height | {value}{unit} | | vw | int/float | height | {value}vw |

Typography

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | lh | int/float | line-height | {value} | | fs | int/float | font-size | {value}{unit} | | fsi | | font-style | italic | | fsn | | font-style | normal | | fwb | | font-weight | bold | | fwn | | font-weight | normal | | tal | | text-align | left | | tac | | text-align | center | | tar | | text-align | right | | tdl | | text-decoration | line-through | | tdn | | text-decoration | none | | tdo | | text-decoration | overline | | tdu | | text-decoration | underline | | ttc | | text-transform | capitalize | | ttl | | text-transform | lowercase | | ttn | | text-transform | none | | ttu | | text-transform | uppercase | | vab | | vertical-align | bottom | | vabl | | vertical-align | baseline | | vam | | vertical-align | middle | | vat | | vertical-align | top |

z-index

| Utility | Value | Attribute | Returns | |:--------|:------|:----------|:--------| | z | int/float | z-index | {value} |