cu.css

Getting started

cu.css should be relatively straight forward to start working with in your next project. However, please keep in mind that this project is still in its infancy, so the installation methods described below are likely to change as the project evolves.

Installation #

There are currently two different ways to install cu.css in your project, depending on whether you prefer to work with CSS or SASS.

Installing CSS #

Follow these steps if you plan to work with CSS:

  1. Download the full project from Github.
  2. Copy main.css or main.min.css from the public/css folder into your project.
  3. Copy the fonts directory into your project.

The final step is to link to your stylesheet file inside the <head> of your pages:

<link rel="stylesheet" href="main.min.css" media="screen">

Installing SASS #

Follow these steps if you plan to work with the SASS:

  1. Download the full project from Github.
  2. Copy the scss directory into your project.
  3. Copy the fonts directory into your project.

You will also need a build step to transpile Sass to CSS. Those working with Hugo can refer to the Hugo Docs or the cu.css repository to learn how this works.

Working with CSS #

If you plan to customise or build upon cu.css, then you will find it much easier to work with the unminified css found in public/css/main.css. If you wish to use cu.css without modification, then working with the minified CSS found in public/css/main.min.css will ensure the smallest file size.

The stylesheets in public/css contain configurations for custom fonts, customising the theme of cu.css, and managing fluid type and space scales. Most of these configurations consist of CSS custom properties.

Updating fonts #

The default font in cu.css is Inter by Rasmus Andersson. The font has been subset and the @font-face code generated using Google Webfonts Helper. This makes it easier to self-host Google Fonts and optimse for performance.

You may wish to replace the generated code with a different font using Google Webfonts Helper, or remove this code entirely and use a system font stack instead.

/* 
Google fonts with subsetting via Google Webfonts Helper
@link https://gwfh.mranftl.com/fonts/inter?subsets=latin 
*/
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v12-latin-regular.woff2") format("woff2"), url("../fonts/inter-v12-latin-regular.woff") format("woff");
  /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v12-latin-700.woff2") format("woff2"), url("../fonts/inter-v12-latin-700.woff") format("woff");
  /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

Customising the theme #

To customise the theme of cu.css look for the Global theme tokens, a.k.a CSS Custom Properties. These tokens are used throughout the framework and cascade through the entire CSS, so any changes you make here will have a wide reaching impact.

Typography, color (light and dark mode), grid gutter, border radius, are all managed here.

/* 
Global theme tokens
*/
:root {
  /* Typography */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  --font-display: var(--font-base);
  --font-accent: 'Menlo', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', 'Courier New', monospace;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --line-height-compact: 1.2;
  --line-height-base: 1.5;
  --line-height-loose: 1.7;
  --width-compact: 35ch;
  --width-longform: 65ch;
  --tracking: -0.05ch;
  --tracking-s: -0.05ch;
  /* 
  Colors created with Utopia Kickstarter project 
  @link https://www.figma.com/community/file/1122903924123950023
  */
  --color-text: #1D1D1D;
  --color-text-mod-1: #494949;
  --color-text-mod-2: #616161;
  --color-bg: #ffffff;
  --color-bg-mod-1:#F8F8F8;
  --color-bg-mod-2: #EDEDED;
  --color-border: #1D1D1D;
  --color-brand: #4f29f0;
  --color-accent: #9F2C5E;
  --color-highlight: #eefbc1;
  
  @media (prefers-color-scheme: dark) {
    /* 
      If theme doesn’t require a dark mode then remove this media query altogether
    */
    --color-text: #CED3E8;
    --color-text-mod-1: #C4CAE3;
    --color-text-mod-2: #8995C8;
    --color-bg: #0D101A;
    --color-bg-mod-1:#121626;
    --color-bg-mod-2: #212845;
    --color-border: #CED3E8;
    --color-brand: #a08aff;
    --color-accent: #FF70AE;
  }

  /* Grid */
  --gutter: var(--space-s-m);
  /* Effects */
  --border-radius: 0; // Set a rem value to add border radius to buttons, form elements, cards, callouts and accordians. 
  --shadow: 0px 3px 7px rgba(0, 0, 0, 0.08), 0px 0px 1px rgba(0, 0, 0, 0.025);
}

Choosing a fluid type scale #

Use Utopia’s Fluid Type Scale Calculator to modify typography. Once you are happy with your scale, copy the CSS generated by Utopia and use it to replace the existing type scale.

/* 
Utopia fluid type

@link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,4,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN 
*/
:root {
  --step--1: clamp(0.83rem, calc(0.78rem + 0.29vw), 1.00rem);
  --step-0: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
  --step-1: clamp(1.20rem, calc(1.07rem + 0.63vw), 1.56rem);
  --step-2: clamp(1.44rem, calc(1.26rem + 0.89vw), 1.95rem);
  --step-3: clamp(1.73rem, calc(1.48rem + 1.24vw), 2.44rem);
  --step-4: clamp(2.07rem, calc(1.73rem + 1.70vw), 3.05rem);
}

Choosing a fluid space scale #

In the same way as modfiying type, use Utopia’s Fluid Space Calculator to modify the existing space scale. Once you are happy with your scale, copy the CSS generated by Utopia and use it to replace the existing space scale.

/* 
Utopia fluid space

@link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 
*/
:root {
  --space-3xs: clamp(0.25rem, calc(0.23rem + 0.11vw), 0.31rem);
  --space-2xs: clamp(0.50rem, calc(0.46rem + 0.22vw), 0.63rem);
  --space-xs: clamp(0.75rem, calc(0.68rem + 0.33vw), 0.94rem);
  --space-s: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
  --space-m: clamp(1.50rem, calc(1.37rem + 0.65vw), 1.88rem);
  --space-l: clamp(2.00rem, calc(1.83rem + 0.87vw), 2.50rem);
  --space-xl: clamp(3.00rem, calc(2.74rem + 1.30vw), 3.75rem);
  --space-2xl: clamp(4.00rem, calc(3.65rem + 1.74vw), 5.00rem);
  --space-3xl: clamp(6.00rem, calc(5.48rem + 2.61vw), 7.50rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, calc(0.12rem + 0.65vw), 0.63rem);
  --space-2xs-xs: clamp(0.50rem, calc(0.35rem + 0.76vw), 0.94rem);
  --space-xs-s: clamp(0.75rem, calc(0.58rem + 0.87vw), 1.25rem);
  --space-s-m: clamp(1.00rem, calc(0.70rem + 1.52vw), 1.88rem);
  --space-m-l: clamp(1.50rem, calc(1.15rem + 1.74vw), 2.50rem);
  --space-l-xl: clamp(2.00rem, calc(1.39rem + 3.04vw), 3.75rem);
  --space-xl-2xl: clamp(3.00rem, calc(2.30rem + 3.48vw), 5.00rem);
  --space-2xl-3xl: clamp(4.00rem, calc(2.78rem + 6.09vw), 7.50rem);
  /* Custom pairs */
  --space-s-l: clamp(1.00rem, calc(0.48rem + 2.61vw), 2.50rem); 
}

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 the project configurations outlined above:
    • @font-face declarations for including custom fonts in the project.
    • CSS custom properties for theming.
    • CSS custom properties for Utopia fluid type and space scales.
  • The base directory contains low-specificity global styles that style HTML elements and apply to the whole project. Here you will find:
    • A reset file.
    • “Core” global styles.
    • “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 #

I’ve intentionally used SASS with a very light touch, mostly just to split the CSS into granular partial files. This makes it super easy to ditch certain styles you have no use for in your 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.

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