# 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](https://cube.fyi/) 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!