2shine 5.3 is a Dnn Theme which now fully uses CSS Variables, making most customizations take mere seconds.
WTF are CSS Variables?
Note that CSS variables are also called CSS custom properties.
When creating any kind of design, a core challenge is that certain changes, such as the primary color, will affect many styles across the entire system.
In the very old days, you just had to updated the CSS everywhere to make this work, but around 2006 new technologies emerged such as SASS or SCSS which allowed developers to create pre-CSS called SASS, which had SASS-Variables and SASS-rules, and a compiler would then generate CSS as needed. In the end it's all about reusing parameters.
SASS has become the industry standard since then and was also the backbone of Bootstrap 4 and Bootstrap 5. But the HTML standards have improved a lot since 2006. Browsers have implemented CSS-Variables (not to be confused with SASS-Variables) to reuse such parameters, and Bootstrap 5 has been gradually moving towards this.
Using the new mechanisms allows designers to make most theme changes without the need for SASS, NPM or the huge node_modules.
Implementation in 2shine 5.3
2shine 5.3 uses Bootstrap 5.3 and the conventions which apply there.
- It uses both SASS and CSS-variables.
- The theme.css file is used in it's raw form and contains all the CSS-variables which are easy to customize, without recompiling.
- The remaining SASS files generate the primary CSS files which have references to the CSS-variables.
Using this setup, we can modify most aspects such as all colors and fonts for all kinds of scenarios and variations without requiring a SASS compiler. Some aspects, such as margins or paddings, still require SASS recompiling.
2shine Default vs. after 3 quick changes
The three simple changes
The following setup shows a brand new DNN 9.13 with 2shine 5.3 comparing the initial look and the one after just changing 3 lines of the theme.css (shown below). After these changes you needed a full refresh (Ctrl+F5) but no NPM or SASS or anything.
Major Productivity Boost
We've been experimenting with this for about half a year now, and we've seen huge productivity boosts. Most design changes are done within mere seconds!
Some things to consider:
- You should learn about css variables (aka. css custom properties) and how it's different from SASS variables (eg. runtime vs. compile time; procedural vs. declarative, etc.)
- In advanced scenarios - eg. when you need more bootstrap features - you will still need to run SASS.
Get in Now
Download it from Github and give it a spin: https://github.com/2sic/dnn-theme-2shine-bs5/releases
Love from Switzerland,
Tom & Roman