Improved theme designer mode

Improved theme designer mode

by Bas Brands -
Number of replies: 0
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers

Hi Themers! An old feature for helping theme developers has been revived and enhanced in the upcoming versions 3.10 and 4. (See also MDL-69117)

It is called the theme designer mode which can be enable through: 

Site Administration > Appearance > Theme Settings > Theme designer mode

This setting disables the caching of css so when editing the a theme scss file or a plugin styles.css the results are shown after reloading the page. The only problem with the setting was that it makes everything painfully slow. One way of improving the performance is to install the binary sassc on your server and configure it in the "Path to SassC" in Experimental settings which will bypass the core phpscss library.

With the recent changes we have improved performance of the theme designer mode for all setups by disabling the need for browser prefixes when compiling Bootstrap scss files. 

We have fixed this performance issue and as a bonus added source maps to the SCSS files in theme boost. That way you can easily find where a bit of css is defined en where to look when making changes.

See this video below for more info:

 

 


A special thanks to Gareth Barnard and Andrew Nicols for making this changes possible and for Helen suggesting to make a video about it.



Average of ratings: Useful (3)