Work with the CSS Stylesheets

The stylesheets are written in CSS. These stylesheets utilize CSS variables to keep the CSS DRY and easy to customize.

Stylesheet organization and processing

Within the default UI project, the stylesheet files are separated into modules to help organize the rules and make them easier to find. The UI build combines and minifies these files into a single file named site.css. During the build, the CSS is enhanced using PostCSS in much the same way as a CSS preprocessor works, only the modifications are made to the CSS directly. The modifications mostly center around injecting vendor prefixes for compatibility or backporting new features to more broadly supported syntax.

Add a new CSS rule

Let’s consider the case when you want to modify the font size of a section title.

First, make sure you have set up the project and created a development branch. Next, open the file src/css/doc.css and modify the rule for the section title.

.doc h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  margin-top: 2rem
}

Save the file, commit it to git, push the branch, and allow the approval workflow to play out.