func

Express a design system with configuration, get your classes for free

Functional CSS is the best! Writing tons of classes is a chore. Libraries like Tachyons help, but only go as far as their authors wish to. Other libraries sometimes go too far.

func currently focuses on generating classes from a color palette. It outputs a stylesheet that you can import alongside your own CSS, or those from libraries. It also outputs JSON for import into JavaScript modules.

Install
Usage
Configuration
Colors
Classes
Output
Contribute
License

Install

npm install func-css

or:

yarn add func-css

try it out first:

npx func

Usage

$ func --help

  Usage
    $ func [-o output path]

  Configuration is loaded from a file or a func key in your package.json

  Options
    -o, --output    Filepath for generated stylesheet
    --jsonOutput    Filepath for generated JSON
    --config        Custom config filename, defaults to (funcrc|func.config).(json|yaml|yml)
    --watch         Watch config files and regenerate on changes

Configuration

files
- classes relative filepath for optional class config
- colors relative filepath for colors config
properties
- {css-property-name} desired class name format, interpolate colors with ${name}
states array of pseudo-class names to generate for each property

Colors

Define your palette as a mapping of color names to values in any of these formats:

#ff0000 hex
#fff shorthand hex, # is optional
255, 0, 0 comma-separated rgb values

These color models can also be used:

…with a verbose object:

hue: 0
saturation: 100%
lightness: 50%

…or a terse object:

h: 0
s: 100%
l: 50%

Colors are parsed and converted with the powers of chroma.js

Classes

It’s often best to avoid including the names of colors in your classes. Stay flexible with role-based names mapped to colors:

error: red-aa
error-bg: red
error-border: red

success: green-aa
success-bg: green
success-border: green

Property Suffixes

Note the use of suffixes in the class names in the example above. They not only provide a unique name but also assign CSS properties they alias.

suffix	property
—	color
bg	background-color
border	border-color

Child Selectors

Space-separated child selectors following the named color will be appended to the class selector:

disabled: gray *:link *:visited *:hover *:active input::placeholder

↓

.disabled *:link *:visited *:hover *:active input::placeholder { color: hsl(0, 0%, 50%) }

Order is respected, sometimes it matters.

Pseudo Classes

Use a & selector shorthand to specify pseudo-classes:

disabled: gray &:link &:visited &:hover &:active input::placeholder

↓

.disabled:link { color: hsl(0, 0%, 50%) }
.disabled:visited { color: hsl(0, 0%, 50%) }
.disabled:hover { color: hsl(0, 0%, 50%) }
.disabled:active { color: hsl(0, 0%, 50%) }
.disabled input::placeholder { color: hsl(0, 0%, 50%) }

Alpha Adjuster

Tweak the alpha of a color like so:

disabled: gray a(0.8)

Only this adjuster is supported for now. You can specify additional shades and tints of your colors using sensible systems like HSL.

CSS Keywords

Classes mapped to CSS Keywords such as currentColor and transparent can also be defined. Any values that don’t match a named color will passthrough.

Output

CSS

Specified classes are expanded with colors in HSL functional notation, or HSLA wherever alpha is specified.

.red-color { color: hsl(0, 100%, 50%) }
.bg-red-color { background-color: hsl(0, 100%, 50%) }
.b--red-color { border-color: hsla(0, 100%, 50%, 0.5) }
.blue-color { color: hsl(240, 100%, 50%) }
.bg-blue-color { background-color: hsl(240, 100%, 50%) }
.b--blue-color { border-color: hsla(240, 100%, 50%, 0.5) }

JSON

JSON property names are camelCased and colors are output in hex notation for broader compatibility. rgba values are used whenever alpha is specified.

{
  "redColor": "#f00000",
  "redBg": "#f00000",
  "redBorder": "rgba(240, 0, 0, 0.5)",
  "blueColor": "#0000ff",
  "blueBg": "#0000ff",
  "blueBorder": "rgba(0, 0, 255, 0.5)"
}

Contribute

Pull requests accepted!

pushred/func