Usage

Styles

The CSS is processed with PostCSS and uses CUBE CSS as the methodology. Tailwind CSS is used as a utility class and CSS Custom Property generator. All core partials are bundled into one single output CSS file: global.css.

CSS Folder Structure

The CSS code is divided into two categories:

  • Global styles contain all the code that should be included in the global.css file.
  • And additional files that should be bundled with a component or loaded on demand.
assets
└── css
    └── global
        ├── components
        ├── global
        ├── compositions
        ├── utilities
        └── global.css
    └── bundle
        ├── file-a.css
        └── file-b.css

The CSS folder mostly resembles the CUBE CSS structure and is as follows:

  1. global: global styles, broken up into handy partials
  2. compositions: layout compositions
  3. components: contains css components
  4. utilities: core utilities
  5. global.css: the main CSS file that pulls everything together