Style

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

• CUBE CSS
• Open Props

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 and motion.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 in src/lib/styles/scss/tokens/layout.scss
      • function-name-case : this rule is set to null to allow use of RGBA function using modern color function notation
      • scss/load-no-partial-leading-underscore : this rule is set to null to allow @forward of [*]/_index.scss files in scss/core/index.scss
  • Jit Props