Devin Haska
879ec1b533
Adds some basic CSS utilities for layouts. Uses any css defined by `src/css/styles.css`, and utilizes the `postcss-import` plugin to resolve imports into their contents. The combined final output contains the base style as defined by the configuration options, as well as some basic utilities. |
||
|---|---|---|
| config | ||
| src | ||
| .gitignore | ||
| index.js | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
lilypad
A lightweight utility class generator. A jumping off point for a larger design system!
Instructions
- Install dependencies (
npm i). - Configure any variables desired within
/config. Adding new properties hasn't been tested yet, so do so with caution! - 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
remor at leastemto 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-primaryandtext-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!