lilypad

A lightweight utility class generator. A jumping off point for a larger design system!

Instructions

1. Install dependencies (npm i).
2. Configure any variables desired within /config. Adding new properties hasn't been tested yet, so do so with caution!
3. The output is stored in dist/lilypad.css. Ready for inclusion in your project!

So what does it generate?

A bunch of utility classes to make building UIs easier! The idea is that basic layout can be taken care of using these utility classes, any anything specific beyond layout is taken care of via CSS. Following the CUBE CSS method, all of the generated classes would live in the utilities folder, ready for use!

When numeric values are used, they are based off of the spacing values inside config/spacing.js. By default "one space" equals 4px, So "two spaces" (e.g. p-2 or "apply two spacing's worth of padding in each direction") would be 4px * 2 = 8px!

N.B. The spacing values should probably use rem or at least em to be compatible with changing font sizes!

A non-exhaustive list:

• Helpers for margin and padding, e.g. m-1, px-2, ml-3, etc.
• Helpers for using the colours in the design system, e.g. bg-primary and text-secondary.
• CSS variables to utilize the fonts configured in config/fonts.js, e.g. --font-family-display.

It's not meant to provide everything possibly required, just a small subset of commonly used utility functions to make building faster and fun!