Skip to content

Customizing CSS or SASS

Jump to bottom
iJungleboy edited this page Oct 22, 2016 · 6 revisions

Editing the CSS directly

To customize the CSS you can just edit the dist/styles.css.

This styles.css was auto-generated and can be modified as needed, as long as you don't re-generate the CSS and accidentally overwrite your changes :)

Using CSS Preprocessors

Most modern designs today use CSS generated by a CSS preprocessors like SASS or LESS. This allows the designer to automate most of the CSS work and is much more efficient than writing CSS manually.

We from 2sic also use these, which is why the styles.css is auto-generated. The original source-file is src/styles.scss.

It doesn't really matter if you prefer LESS or SASS, both are very popular and similar. We from 2sic recommend SASS because it has additional features and because it's preferred in newer css-frameworks like Bootstrap4 or Angular Material.

A note about the terms SASS and SCSS: by convention, these words mean the same thing. Technically there is a minimal difference, but people use these two terms as if they mean the same thing.

Why use SASS for Something so Trivial?

Now you may be surprised that we added SCSS when our CSS is so trivial. The reason is that in the design workflow, we usually combine the skin CSS rules and the content-template CSS rules. This allows us to rebuild (compile) the CSS for both skin and content-templates based on the same variables (like the variable $grid-gutter-width).

Just Rebuild your SASS

  1. Update the values in the src/variables.scss
  2. rebuild the SASS, put the result in dist/styles.css

There is an included gulp task which automates the SASS building, but if you've never used it, this may be too difficult to get started as you'll need to install a bunch of stuff first. But you can use any kind of SASS compiler you want - the simplest is probably Koala

Optimizing your CSS Workflow

The way we 2sic do it, is that we use a list of central variables and keep it in the skin/theme-package, which also includes the bootstrap3 SASS with everything. So we don't use the src/variables.scss, but instead change the src/styles.css to point to our current skin.

Here are some examples:

  1. When we build a design using our bootstrap3 Instant! theme, we point it to this included _variables.scss
  2. when we build it using our bootstrap3 Single Pager theme we point it to this included _variables.scss
Clone this wiki locally