# Customising CSS

A guide to customising CSS in Jumpstart

###

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 Jumpstart'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 Jumpstart 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" />