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