OMNOMNOMNOM

Simple functional css library aka. "you should never have more than what you need".

Heavily inspired by gr8, x001F, some Jon-Kyle projects, but spiced for my personal taste.

Installation

npm i -S omnomnomnom

Usage

design.js

var omnomnomnom = require('omnomnomnom')

// default values
module.exports = omnomnomnom()
// custom values
module.exports = omnomnomnom({
  spacing: [0.75, 1.5, 3, 4.5, 6]
})

index.js

var css = require('sheetify')

css('./design.js')

Alternatively you can run npm run build and use build/omnomnomnom.css directly with the default values.

API

Defaults

{
  textSpacing: 1.5,
  spacing: {
    '0-5': [0.75, ''],
    '1': [1.5, 'trbl'],
    '2': [3.0, 'tb']
  },

  normalFontSize: '14px',
  fontSize: [3.0, 2.25, 1.5, 1.25, 1, 0.875],
  fonts: {
    default: 'sans',
    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    mono: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
    serif: "georgia, serif"
  },

  colors: {
    white: '#fff',
    black: '#000',
    grey: '#999'
  },

  breakpoint: 900,

  utils: [],
  customs: []
}

As utils it accepts an array of gr8-util compatible objects.

As customs it accepts an array of string that will be simply included at the bottom of the file.

  custom: [
    `nav {
      padding-top: 3px;
      margin-left: 4px;
    }`
  ]