Contents
This is essentially an opinionated CSS library packaged as an npm module. The package’s exports are:
- a minified
index.css
- a prettified, fully concatenated
main.css
stylesheet - individual stylesheets under
css/**
Requirements
A Node.js environment and a package.json
.
The rest of this project uses Vite, which allows static asset imports in JavaScript files.
Install the package as a devDependency
:
pnpm i -D @fat-fuzzy/style
You can then import the desired CSS stylesheet from another CSS file:
@import '@fat-fuzzy/style/css';
Or import the full minified CSS using JavaScript, for example in +layout.svelte
:
import '@fat-fuzzy/style'
[WIP] Or import the individual stylesheets into your components (recommended usage for a component library)
import '@fat-fuzzy/style/css/blocks/button.css'
[WIP] Or link to the files in a Django template
<link
href="{% static 'styles/css/main.css' %}"
rel="stylesheet"
type="text/css"
/>
Resources
TODO
- optimize CSS loading strategy
- load custom design tokens
- CSS library:
- a11y testing
- design tokens doc
- Improve design workflow: 💡 Design viewer app ?
- Design + dev:
transitions.scss
andmotion.scss
- Font loading strategy (for some interesting pointers see this article on Web Fonts)
- Postcss:
- environments DEV/PROD
- stylelint
- Style lint rules are defined in
ui/.stylelintrc.json
- NOTE: the following rules have issues:
scss/operator-no-unspaced
: throws 10 false positives insrc/lib/styles/scss/tokens/layout.scss
function-name-case
: this rule is set tonull
to allow use ofRGBA
function using modern color function notationscss/load-no-partial-leading-underscore
: this rule is set tonull
to allow@forward
of[*]/_index.scss
files inscss/core/index.scss
- Style lint rules are defined in
- Jit Props