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}