SCSS Styleguide (WIP)

SCSS linting preparations

In our repositories you will find a linter config for scss (.scss-lint.yml). It contains our default settings & preferences for writing scss code. You will need to install the ruby gem locally with sudo gem install scss_lint. Then run scss-lint directly from your console in the project folger, e.g. scss-lint app/assets/stylesheets/frontend/. You can also install a plugin for your editor (see instructions for Atom: https://atom.io/packages/linter-scss-lint). It will constantly lint your stylesheets and alert you to violations while you code.

Our CI server automatically checks every PR and will alert you to violations - so it's generally advisable to check for violations and fix them prior to pushing your commits to the remote repository.

Below you can find a summary of the most important rules.

General Guidelines

There is no need to follow all rules religiously. However, you should have a good reason to violate our default rules (e.g. while generally advisable to avoid using !important in properties it's okay to make exceptions if you need to e.g. overwrite styles set by an third party JavaScript library.) If you violate a rule and the reason for the violation is not immediately obvious from the context please put a comment on the line indicating your reasoning.

Modularity

• SCSS code should be as modular as possible - i.e. we aim to create small, self-contained modules that can be re-used.

Responsiveness

• Each module should be designed keeping responsiveness in mind - i.e. the behavior of elements when used on devices with varying screen sizes.

Versatility

• SCSS modules should be designed keeping versatility in mind - i.e. variables should be parameterized (see section Variables below)

Usage of Bootstrap

• If possible, use standard bootstrap classes for styling within html templates (e.g. use class="text-nowrap" rather than styling nowrap options in css). If the element to be styled does already have a css class attached you may also put your color styles in this class.
• Use Bootstrap mixins rather than writing plain vanilla css code (e.g. use @include text-overflow(); rather than writing

...
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
...