Skip to content
Some simple, common style utilities to use with composable css-in-js libraries
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
.babelrc
.gitignore
.npmignore
README.md
package-lock.json
package.json
rollup.config.js

README.md

cooltilities

Some simple, common style utilities to use with composable css-in-js libraries like emotion and vudu.

Usage

Basic

cooltilities returns an object with an assortment of color and layout utilities. To see them all, check out the docs.

import cooltilities from 'cooltilities'

console.log(cooltilities)

// returns {
//    block: { display: 'block' },
//    flex: { display: 'flex' },
//    r0: { right: 0 },
//    ...etc,
// }

Custom Colors

If you'd like to generate utilities for custom colors, cooltilities can be configured with a colors object and will return all the utilities including your custom colors.

import { generate } from 'cooltilities'

console.log(generate({ red: 'red' }))

// returns {
//    block: { display: 'block' },
//    flex: { display: 'flex' },
//    red: { color: 'red' },
//    bgRed: { backgroundColor: 'red' },
//    ...etc,
// }

Examples

emotion

import c from 'cooltilities'
import { css } from 'emotion'
import styled from 'react-emotion'

const Component = styled('div')(css(c.flex, c.alignCenter, c.justifyCenter))

vudu

import c from 'cooltilities'
import v from 'vudu'

const styles = v({
  component: { '@composes': [c.flex, c.alignCenter, c.justifyCenter] }
})

const Component = ({ children }) => (
  <div className={styles.component}>{children}</div>
)

Documentation

Documentation can be found at: https://lalena-co.github.io/cooltilities/

Note

All documentation follows jsDoc and can be regenerated using documentation.js, by typing the following in Terminal:

npm run docs:build

Or if you'd like to keep it running while you work:

npm run docs:build:watch

You can’t perform that action at this time.