search
Image

Customising CSS

A guide to customising CSS in Insight

SCSS Method - user.scss (recommended)

The most streamlined way to make edits and additions to the theme CSS is to use the provided user-variables.scss and user.scss files located in the scss folder.

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 scss/bootstrap/_variables.scss or scss/custom/variables.scss can 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 Insight'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 components/plugins/prism.css file.

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 - custom.css

If you prefer to work with Insight 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 <head> of each page:

<link href="assets/css/custom.css" rel="stylesheet" type="text/css" media="all" />