jongacnik / gr8 Goto Github PK

View Code? Open in Web Editor NEW

174.0 5.0 11.0 201 KB

Customizable, functional css utilities

License: MIT License

JavaScript 100.00%

css utilities functional

gr8's Introduction

gr8

Customizable, functional css utilities built using gr8-util. Includes:

css stylesheet with default utilities
gr8 function to generate and customize utilities within javascript

Usage

stylesheet usage

The simplest way to use gr8 is to include the gr8.css stylesheet in your project:

<link rel="stylesheet" href="dist/gr8.css" />

javascript usage

Use the gr8 function to generate utilities:

var gr8 = require('gr8')
var css = gr8()

Detailed usage →

Utilities

Default utilities:

column

.c1{width:8.33333%}
.c2{width:16.66667%}
.c3{width:25%}
.c4{width:33.33333%}
.c5{width:41.66667%}
.c6{width:50%}
.c7{width:58.33333%}
.c8{width:66.66667%}
.c9{width:75%}
.c10{width:83.33333%}
.c11{width:91.66667%}
.c12{width:100%}
.s1{width:100%}
.s2{width:50%}
.s3{width:33.33333%}
.s4{width:25%}
.s5{width:20%}
.s6{width:16.66667%}
.s7{width:14.28571%}
.s8{width:12.5%}
.s9{width:11.11111%}
.s10{width:10%}
.s11{width:9.09091%}
.s12{width:8.33333%}
.co0{margin-left:0}
.co1{margin-left:8.33333%}
.co2{margin-left:16.66667%}
.co3{margin-left:25%}
.co4{margin-left:33.33333%}
.co5{margin-left:41.66667%}
.co6{margin-left:50%}
.co7{margin-left:58.33333%}
.co8{margin-left:66.66667%}
.co9{margin-left:75%}
.co10{margin-left:83.33333%}
.co11{margin-left:91.66667%}
.co12{margin-left:100%}

margin

.m0{margin:0}
.m1{margin:1rem}
.m2{margin:2rem}
.m3{margin:3rem}
.m4{margin:4rem}
.mt0{margin-top:0}
.mt1{margin-top:1rem}
.mt2{margin-top:2rem}
.mt3{margin-top:3rem}
.mt4{margin-top:4rem}
.mr0{margin-right:0}
.mr1{margin-right:1rem}
.mr2{margin-right:2rem}
.mr3{margin-right:3rem}
.mr4{margin-right:4rem}
.mb0{margin-bottom:0}
.mb1{margin-bottom:1rem}
.mb2{margin-bottom:2rem}
.mb3{margin-bottom:3rem}
.mb4{margin-bottom:4rem}
.ml0{margin-left:0}
.ml1{margin-left:1rem}
.ml2{margin-left:2rem}
.ml3{margin-left:3rem}
.ml4{margin-left:4rem}
.mx0{margin-left:0;margin-right:0}
.mx1{margin-left:1rem;margin-right:1rem}
.mx2{margin-left:2rem;margin-right:2rem}
.mx3{margin-left:3rem;margin-right:3rem}
.mx4{margin-left:4rem;margin-right:4rem}
.my0{margin-top:0;margin-bottom:0}
.my1{margin-top:1rem;margin-bottom:1rem}
.my2{margin-top:2rem;margin-bottom:2rem}
.my3{margin-top:3rem;margin-bottom:3rem}
.my4{margin-top:4rem;margin-bottom:4rem}

padding

.p0{padding:0}
.p1{padding:1rem}
.p2{padding:2rem}
.p3{padding:3rem}
.p4{padding:4rem}
.pt0{padding-top:0}
.pt1{padding-top:1rem}
.pt2{padding-top:2rem}
.pt3{padding-top:3rem}
.pt4{padding-top:4rem}
.pr0{padding-right:0}
.pr1{padding-right:1rem}
.pr2{padding-right:2rem}
.pr3{padding-right:3rem}
.pr4{padding-right:4rem}
.pb0{padding-bottom:0}
.pb1{padding-bottom:1rem}
.pb2{padding-bottom:2rem}
.pb3{padding-bottom:3rem}
.pb4{padding-bottom:4rem}
.pl0{padding-left:0}
.pl1{padding-left:1rem}
.pl2{padding-left:2rem}
.pl3{padding-left:3rem}
.pl4{padding-left:4rem}
.px0{padding-left:0;padding-right:0}
.px1{padding-left:1rem;padding-right:1rem}
.px2{padding-left:2rem;padding-right:2rem}
.px3{padding-left:3rem;padding-right:3rem}
.px4{padding-left:4rem;padding-right:4rem}
.py0{padding-top:0;padding-bottom:0}
.py1{padding-top:1rem;padding-bottom:1rem}
.py2{padding-top:2rem;padding-bottom:2rem}
.py3{padding-top:3rem;padding-bottom:3rem}
.py4{padding-top:4rem;padding-bottom:4rem}

opacity

.op0{opacity:0}
.op25{opacity:0.25}
.op50{opacity:0.5}
.op75{opacity:0.75}
.op100{opacity:1}

background

.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}

flex

.x{display:flex}
.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}
.xjs{justify-content:flex-start}
.xje{justify-content:flex-end}
.xw{flex-wrap:wrap}
.xwr{flex-wrap:wrap-reverse}
.xwn{flex-wrap:nowrap}
.xi{flex:initial}
.xx{flex:1}
.xa{flex:auto}
.xn{flex:none}
.xo0{order:0}
.xo1{order:1}
.xo2{order:2}
.xo3{order:3}
.xo4{order:4}
.xot{order:-1}
.xob{order:99}

display

.df{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}

float

.fl{float:left}
.fr{float:right}
.fn{float:none}
.cf:after{content:"";display:block;clear:both}

overflow

.oh{overflow:hidden}
.os{overflow:scroll}
.ov{overflow:visible}
.oxh{overflow-x:hidden}
.oxs{overflow-x:scroll}
.oxv{overflow-x:visible}
.oyh{overflow-y:hidden}
.oys{overflow-y:scroll}
.oyv{overflow-y:visible}

positioning

.psa{position:absolute}
.psr{position:relative}
.psf{position:fixed}
.pss{position:static}
.t0{top:0}
.r0{right:0}
.b0{bottom:0}
.l0{left:0}
.z0{z-index:0}
.z1{z-index:1}
.z2{z-index:2}
.z3{z-index:3}
.z4{z-index:4}

size

.w0{width:0}
.w100{width:100%}
.h0{height:0}
.h100{height:100%}
.vw50{width:50vw}
.vw100{width:100vw}
.vwmn50{min-width:50vw}
.vwmn100{min-width:100vw}
.vwmx50{max-width:50vw}
.vwmx100{max-width:100vw}
.vh50{height:50vh}
.vh100{height:100vh}
.vhmn50{min-height:50vh}
.vhmn100{min-height:100vh}
.vhmx50{max-height:50vh}
.vhmx100{max-height:100vh}
.ar25:before{padding-top:25%;content:"";display:block}
.ar50:before{padding-top:50%;content:"";display:block}
.ar75:before{padding-top:75%;content:"";display:block}
.ar100:before{padding-top:100%;content:"";display:block}

typography

.fs1{font-size:1rem}
.fs1-2{font-size:1.2rem}
.fs1-6{font-size:1.6rem}
.fs2-4{font-size:2.4rem}
.fs3-2{font-size:3.2rem}
.fs6-4{font-size:6.4rem}
.lh1{line-height:1}
.lh1-5{line-height:1.5}
.fsn{font-style:normal}
.fsi{font-style:italic}
.fwn{font-weight:normal}
.fwb{font-weight:bold}
.tal{text-align:left}
.tac{text-align:center}
.tar{text-align:right}
.taj{text-align:justify}
.toi{text-overflow:initial}
.toc{text-overflow:clip}
.toe{text-overflow:ellipsis}
.tdu{text-decoration:underline}
.tdo{text-decoration:overline}
.tdlt{text-decoration:line-through}
.tdn{text-decoration:none}
.ttu{text-transform:uppercase}
.ttl{text-transform:lowercase}
.ttc{text-transform:capitalize}
.ttn{text-transform:none}
.vabl{vertical-align:baseline}
.vat{vertical-align:top}
.vam{vertical-align:middle}
.vab{vertical-align:bottom}
.wsn{white-space:normal}
.wsnw{white-space:nowrap}
.wsp{white-space:pre}
.wsi{white-space:inherit}
.tc1{columns:1}
.tc2{columns:2}
.tc3{columns:3}
.tc4{columns:4}

miscellaneous

.curp{cursor:pointer}
.curd{cursor:default}
.cura{cursor:alias}
.curzi{cursor:zoom-in}
.curzo{cursor:zoom-out}
.usn{user-select:none}
.usa{user-select:auto}
.ust{user-select:text}
.pen{pointer-events:none}
.pea{pointer-events:auto}
.vh{visibility:hidden}
.vv{visibility:visible}

development

.dev{outline:1px solid #912eff}
.dev > * {outline:1px solid #5497ff}
.dev > * > * {outline:1px solid #51feff}
.dev > * > * > * {outline:1px solid #ff0000}
.dev > * > * > * * {outline:1px solid #00ff00}

API

`css = gr8([opts])`

Generate utilities and return a string of css. opts accepts the following values:

Value Options

opts.spacing [Mixed] values for margin & padding utilities
opts.fontSize [Mixed] values for font-size utilities
opts.lineHeight [Mixed] values for line-height utilities
opts.size [Mixed] values for width & height utilities
opts.viewport [Mixed] values for viewport utilities
opts.zIndex [Mixed] values for zIndex utilities
opts.flexOrder [Mixed] values for flex-order utilities
opts.opacity [Mixed] values for opacity utilities
opts.aspectRatio [Mixed] values for aspect ratio utilities
opts.textColumn [Mixed] values for text columns utilities

Selector Options

opts.selector [Function] css selector template function
opts.breakpoints [Object] values for breakpoint utilities
opts.breakpointSelector [String | Function] selector shortcut or css selector template function

Custom Utilities Options

opts.utils [Array] custom gr8-util utilities
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:

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
  ]
})

Output

.bgcr{background-color:red}
.bgcb{background-color:blue}
.bgcg{background-color:green}
.fcr{color:red}
.fcb{color:blue}
.fcg{color:green}
/* etc... */

@media (min-width:768px) {
  [sm~="bgcr"]{background-color:red}
  [sm~="bgcb"]{background-color:blue}
  [sm~="bgcg"]{background-color:green}
  [sm~="fcr"]{color:red}
  [sm~="fcb"]{color:blue}
  [sm~="fcg"]{color:green}
  /* etc... */
}

@media (min-width:1024px) {
  [md~="bgcr"]{background-color:red}
  [md~="bgcb"]{background-color:blue}
  [md~="bgcg"]{background-color:green}
  [md~="fcr"]{color:red}
  [md~="fcb"]{color:blue}
  [md~="fcg"]{color:green}
  /* etc... */
}

@media (min-width:1280px) {
  [lg~="bgcr"]{background-color:red}
  [lg~="bgcb"]{background-color:blue}
  [lg~="bgcg"]{background-color:green}
  [lg~="fcr"]{color:red}
  [lg~="fcb"]{color:blue}
  [lg~="fcg"]{color:green}
  /* etc... */
}

Refer to gr8-util for further documentation on generating custom utilities.

`opts.exclude`

Use the exclude option to remove some of the default utilities. Accepts an array with any of the following values:

column, margin, padding, opacity, background, flex, display, float, overflow, positioning, size, typography, miscellaneous, development

Proxies

For more advanced use cases, some additional methods are proxied:

// direct access to gr8-util
var gr8util = require('gr8/util')
var css = gr8util({options})

// direct access to gr8-utils
var gr8utils = require('gr8/utils')
var css = gr8utils({options})

// or even lower level
gr8utils.generate(gr8utils.utils, gr8utils.defaults)

Notes

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!

Todo

Advanced documentation
Website

License

MIT

gr8's People

Contributors

Stargazers

Watchers

Forkers

jondashkyle tttimur bcomnes dedurus stan83w foggy1 bdf-so beleancristian

gr8's Issues

flex-grow values

Could be nice to be able to specify some common flex-grow values for simple grids. Maybe 1-5?

CSS Grid

When using gr8 to scaffold out grid layouts I use the provided column (cX) utilities and flexbox. Recently CSS grid has been seeing some action, and has been implemented widely within the big three browsers. So this raises the question; what could gr8 utilities for grid look like?

There are a few properties associated with grid which could be implemented:

display: grid
grid-row
grid-column
grid-template-rows
grid-template-columns
grid-gap
grid-row-gap
grid-column-gap

The values for this get somewhat complex, as the grid spec is the first widely implemented use of css functions, such as:

repeat()
minmax()
fitcontent()

These enable you to assign values such as grid-template-columns: repeat(3, 1fr).

It seems obvious we could simply implement the existing 12 column grid as default as a starting point, and consider how some of these more complex values could be introduced down the line.

Consider per utility breakpoints

It might be handy to be able to define breakpoints on a per utility basis. Examples to follow...

Readme Examples Clarification

Documentation cites a custom text-color property as an example multiple times. Wouldn't it make more sense to do a custom color property as there is no text-color in CSS spec?

Responsive using root font-size

Maybe something like

var css = gr8({
  responsiveRoot: true,
  rootSizes: {
    xl: '250%',
    lg: '200%',
    md: '100%',
    sm: '62.5%'
  }
})

Which would return

@media (max-width: 1439px) {
  html{font-size: 250%}
}

@media (max-width: 1260px) {
  html{font-size: 200%}
}

@media (max-width: 1023px) {
  html{font-size: 100%}
}

@media (max-width: 767px) {
  html{font-size: 62.5%}
}

Remove nested columns

We can remove nested columns in favor of %-of-parent classes:

.x1 { width: 100% }
.x2 { width: 50% }
.x3 { width: 33.333% }
.x4 { width: 25% }
.x5 { width: 20% }
.x6 { width: 16.666% }
.x7 { width: 14.285% }
.x8 { width: 12.5% }
.x9 { width: 11.111% }
.x10 { width: 10% }
.x11 { width: 9.09% }
.x12 { width: 8.333% }

Maybe they should be called pop lol.

margin[left|right|x]: auto

Remove value options?

Perhaps it is more clear if we actually remove all value options and require overwriting utilities using the add method instead:

gr8.add({
  prop: 'font-size',
  vals: [3, 2, 1]
})

I feel like this would clarify what the add method does, as well as prevent confusion why only some things are editable via options.

visibility: [hidden|visible]

Without .remove([]), how do we exclude built-in utils?

Seems like with 3.0.0 it's not very easy to exclude any of the default utils anymore unless doing something using the proxies - and then breakpoints aren't generated.

I'd like to use just a few of the defaults and some custom utils with the breakpoints feature.

Perhaps there could be an exclude option?

const css = gr8({
  breakpoints: {
    sm: 768,
    md: 1024,
    lg: 1280
  },
  exclude: ['column', 'margin']
  utils: [customUtil]
});

Thanks!

Per breakpoint values

An idea been toying with is per-breakpoint values. This could be handy when doing something like font sizes for a site. Not sure if this would be a convoluted addition or not, conceptually goes against single purpose classes a bit... pseudo code:

fontSize = {
  1: {
    *: 6,
    md: 5,
    lg: 4
  },
  2: {
    *: 3,
    md: 2,
    lg: 1
  }
}

.fs1 { font-size: 6rem }
.fs2 { font-size: 3rem }

@media (min-width: 1024px) {
  .fs1 { font-size: 5rem }
  .fs2 { font-size: 2rem }
}

@media (min-width: 1280px) {
  .fs1 { font-size: 4rem }
  .fs2 { font-size: 1rem }
}

Rename prefix to name

For clarity in upcoming 3.0, it could make sense to rename prefix to name, since prefix might imply a prefix before prop generated name.

Ignore option does not add util to breakpoints

When adding a util to the ignore option, it does not get added to breakpoints if the responsive option is enabled. Planning to fix this one, but trying to wrap up a project, so will circle around and submit a pull request soon.

Remove attach method

Remove attach in favor of using toString in combo with insert-css in instances where you actually need to attach css to head w/ js. Seems like generally should be encouraged to make use of toString and write to files during build.

Helpful also so we don't have to clarify advantage of toString over attach in readme.

Idiomatic hover states

Is the the most idiomatic way to generate rules for hover states?

var textTransformHover = {
  prop: 'text-decoration',
  vals: {
    'u-hover': 'underline',
    'o-hover': 'overline',
    'lt-hover': 'line-through',
    'n-hover': 'none'
  },
  tail: ':hover'
}

It seems like something like this might be a little cleaner...

var textTransformHover = {
  prop: 'text-transform',
  vals: [
    'uppercase',
    'lowercase',
    'capitalize',
    'none'
  ],
  tail: ':hover',
  tailSuffix: '-hover' // or tailModifier: '-hover'
}

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

engines was only updated if it defined a single version, not a range.
.nvmrc was updated to Node.js 10
.travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Default utils

I wanted to open a thread about what utils might make sense to add to core. One that I am always recreating is letter-spacing:

{
  prop: 'letter-spacing',
  vals: {
    1: '-0.15',
    2: 0
  },
  unit: 'em'
}

I'm also always creating borders, backgrounds, font colors, etc (see my default style.js), but I still think keeping design oriented classes out of core fits better with the intention of this module, since those are the places where I often get specific and granular. Open to a convo on this though.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

jongacnik / gr8 Goto Github PK

gr8's Introduction

gr8

Usage

stylesheet usage

javascript usage

Utilities

API

css = gr8([opts])

Value Options

Selector Options

Custom Utilities Options

Value Options

Selector Options

opts.selector

opts.breakpoints

opts.breakpointSelector

'class' Shortcut

Selector Function

Custom Utilities Options

opts.exclude

Proxies

Notes

Todo

See Also

License

gr8's People

Contributors

Stargazers

Watchers

Forkers

gr8's Issues

Version 10 of Node.js (code name Dubnium) has been released! 🎊

Recommend Projects

Recommend Topics

Recommend Org

`css = gr8([opts])`

`opts.selector`

`opts.breakpoints`

`opts.breakpointSelector`

`'class'` Shortcut

`opts.exclude`