Using CSS preprocessor to build themes

[jochen-ac]

Currently admidio loads basic bootstrap css and theme specific css. This works fine for the basic layout but it is realy hard to customize for own layouts, especially for the tones of bootstarp definitions.

Bootstrap ships with Less and SASS files, where you can define variables (e.g. for colors), nesting or import. With only adjusting a few variables it is very easy for users to create their own theme. Those .less or .scss files can be precompiled to css an provided by the server (better performance) or on client side by Javascript (allowes to use an onscreen customizing tool - maybe later ).

Less themes to be easier to learn, SASS provides more functionality. Because bootstrap switches the development to SASS for V4, we should prefer this as well using the SCSS syntax.

[ximex]

part of: https://github.com/Admidio/admidio/issues/49

[jochen-ac]

I've created a feature branch with a first sass implementation:

• replaced all colors with vars
• replaced linear-gradients with @mixins
• replaced 768px / 767px with vars

[ximex]

maybe this also helps: https://github.com/ximex/admidio/commit/cd2e4f69c9e088c095f455c5f5bd0a65c2797fe4