Private

Note

Let’s have a closer look at the Sass setup within /private and explain how we structured the code in there. These principles can be expanded to other preprocessors options such as Less or HAML.

Every folder within /private/sass has a file called _all.scss. This file ultimately gets imported by /private/sass/base.scss which gets compiled into /static/css/base.css. Update the _all.scss file to include additional modules. To keep the file simple, do not include files directly within base.scss.

Let’s cover the folders individually:

components/

If a component is plug-and-playable, it probably belongs in here. Good examples are jQuery plugins or django CMS addons. Sometimes larger application such as a shop might also be pluggable.

libs/

All independent files are placed within this folder. This implies that the order of inclusion does not matter within /sass/libs/_all.scss.

Hint

Libraries are, in their very core, plug-and-playable. The main difference between libraries and other plug-and-play components is, that if a library is removed, things will break.

mixins/

This folder is used to store additional functions or mixins which are not part of the default bootstrap eco-system.

We provide already some helper functions such as em(12px, 16px) that calculates the pixel values from a given size in relation to the parent size.

Additionally we have mixins for managing z-index layers and hide-content.

settings/

It is very useful to store values, that are used more than twice, within their own variable. We even encourage storing all colour values within the settings. Don’t repeat yourself. Create a sub-structure, similar to /sites if the structure becomes more complex.

Warning

Do not add additional variables to /private/sass/settings/_bootstrap.scss. This file is reserved for Bootstrap-only variables. Use /private/sass/settings/_custom.scss instead.