opts.exclude[Array] keys of default utilities to exclude
Value Options
Value options customize numeric gr8 utilities. They accept Numbers, Strings, Arrays, or Objects. Typically Arrays of Numbers will be used. Refer to gr8-util for details on all possible ways to format values.
Defaults:
var css =gr8({
spacing:[0,1,2,3,4],
fontSize:[1,1.2,1.6,2.4,3.2,6.4],
lineHeight:[1,1.5],
size:[0,100],
viewport:[50,100],
zIndex:[0,1,2,3,4],
flexOrder:[0,1,2,3,4],
opacity:[0,25,50,75,100],
aspectRatio:[25,50,75,100],
textColumn:[1,2,3,4]
})
Selector Options
Selector options control selectors & breakpoints.
Defaults:
var css =gr8({
selector:s=>`.${s}`,
breakpoints:{
sm:768,
md:1024,
lg:1280
},
breakpointSelector:'attribute'
})
opts.selector
Function expects a selector name as input and returns a css selector string as output. For example, to use an attribute selector instead of classes:
var css =gr8({
selector:s=>`[gr8~="${s}"]`
})
Output
[gr8~="fs1"]{font-size:1rem}
[gr8~="fs1-6"]{font-size:1.6rem}
/* etc... */
opts.breakpoints
Object keys are used in selector names and object values are used to define the media queries. Object values can either be integers (which results in a min-width media queries), or object values can be media query strings. Pass false to disable breakpoint utilities entirely:
var css =gr8({
breakpoints:{
small:1024,
medium:'(min-width:768px) and (max-width:1280px)',
'not-big':'(max-width:1024px)',
portrait:'(orientation:portrait)'
}
})
Output
@media(min-width:1024px){
[small~="fs1"]{font-size:1rem}
/* etc... */
}
@media(min-width:768px)and (max-width:1280px){
[medium~="fs1"]{font-size:1rem}
/* etc... */
}
@media(max-width:1024px){
[not-big~="fs1"]{font-size:1rem}
/* etc... */
}
@media(orientation:portrait){
[portrait~="fs1"]{font-size:1rem}
/* etc... */
}
Note: If you care about valid attribute selectors, prepend data- to your breakpoint keys.
opts.breakpointSelector
By default, attribute selectors are generated for breakpoint utilities (as seen above). Use prefixed classes instead by passing in the 'class' shortcut, or provide a selector function for more granular control:
'class' Shortcut
var css =gr8({
breakpointSelector:'class'
})
Output
@media(min-width:768px){
.sm-fs1{font-size:1rem}
/* etc... */
}
@media(min-width:1024px){
.md-fs1{font-size:1rem}
/* etc... */
}
@media(min-width:1280px){
.lg-fs1{font-size:1rem}
/* etc... */
}
Selector Function
var css =gr8({
breakpointSelector:key=>s=>`.gr8-${key}-${s}`
})
Output
@media(min-width:768px){
.gr8-sm-fs1{font-size:1rem}
/* etc... */
}
@media(min-width:1024px){
.gr8-md-fs1{font-size:1rem}
/* etc... */
}
@media(min-width:1280px){
.gr8-lg-fs1{font-size:1rem}
/* etc... */
}
Custom Utilities Options
gr8-util is a little function for generating functional css utilities. Given a plain object, concise css utilities are generated. All the utilities in gr8 are built using this.
Use the utils option to pass an array of gr8-util objects to extend the gr8 output with custom utilities:
gr8 is developed and iterated-on primarily for use within projects at Folder Studio. It shares similarities with other functional css libraries like tachyons or basscss, but diverges in its minimalism and customizability. gr8 provides no colors, no borders, no font-families, etc out of the box, but instead provides ways to quickly define your own utilities for things like these using plain objects. It facilitates creating coherent design systems without imposing one by default.
In any case, I hope you like it and perhaps find it useful!