A guide to customising CSS in Pipeline
SCSS Method -
The most streamlined way to make edits and additions to the theme CSS is to use the provided
user.scss files located in the
When used in conjunction with the provided dev tools, your custom CSS is included in
theme.css and overrides the default theme style.
This is the preferred method as your changes are kept separate from the core theme files. By separating your CSS edits into their own files, you can easily overwrite all of the default theme SCSS files when you update the theme.
To make broader changes to the design of the theme, such as changing the colour scheme or font sizes, use
scss/user-variables.scss. Any variable from
be overridden with your own value.
If you need to add CSS for additional components or other needs, simply edit
scss/user.scss and add any SCSS or CSS you require.
Omitting optional SCSS components
Listed under Optional Components in
scss/custom/components.scss are all the non-essential parts of Pipeline's CSS. If your project does not need CSS for one of these components, such as progress bars, simply
delete or comment out the line (by adding // at the start of the line) and it will not be included in the compiled CSS.
Some optional components such as Prism require additional CSS for syntax highlighting. The required CSS is included via the
import statement in
components.scss. By including the Prism component, the
required CSS is imported from
By removing as many unused components as possible, you can streamline your CSS to optimise file size of
theme.css. Of course, the components can always be added back in if the needs of your project change.
CSS Method -
If you prefer to work with Pipeline as a static source without the aid of Gulp and Sass, you will need to add custom CSS through a separate CSS file.
We have provided a blank
custom.css file in the
assets/css folder. To make your custom CSS active, you will need to add the following line after
theme.css is referenced in the
<link href="assets/css/custom.css" rel="stylesheet" type="text/css" media="all" />