Working with SASS

You can find the Sass files for cu.css inside the assets/scss directory. You may find working with Sass gives you a little more flexibility when customising.

Understanding the directory structure #

Inside assets/scss you will find 5 directories and a bunch of files.

• The abstracts directory contains project configurations:
  • @font-face declarations for including custom fonts in the project.
  • CSS custom properties for Utopia fluid type and space scales.
  • CSS custom properties for theming.
• The base directory contains low-specificity global styles that style HTML elements and apply to the whole project. Here you will find:
  • A _reset.scss file, used to tame default browser styles.
  • “Core” global styles which can be found inside _global.scss.
  • “Non-core” global styles, which you may wish to keep or discard depending on your project requirements.
• The blocks directory contains component styles, a.k.a blocks.
• The compositions directory contains flexible layout styles, a.k.a compositions.
• The utilities directory contains utility classes.
• The main.scss file pulls all other files together into a single file, ready for transpilation to CSS.

Working with partial files #

cu.css intentionally uses SASS with a very light touch, mostly just to split the CSS into granular partial files. This makes it super easy to ditch certain .scss files, if you have no use for the styles in a particular project.

For example, your project may not use forms, tables or cards, so you might decide to delete base/_form.scss, base/_table.scss and blocks/_card.scss, respectively. Likewise, if you have no need for compositions/_sidebar.scss, just remove the file.

If you do decide to delete certain partials, ensure you also remove the associated @import from the main.scss file.