Changes to Envision in Sitevision 8.2

Envision is adopting CSS variables (CSS custom properties) .

Envision is an easy to use, open source, CSS and component framework for developing with HTML, CSS, and JS.

In the upcoming release of Sitevision 8.2, Envision will be using CSS variables internally for colors, spacings and more. Many old CSS variables will be deprecated and there will be many new variables added.

Settings merge

Settings in Sitevision for colors are no longer separate for badges, buttons and alerts, but grouped under "Element colors". All Elements/components will be using the same color setting for Primary, Success, Warning etc. If there are previous settings for each, these will be merged into one in the following order: Badge, button, alert, pagination and base color.

New color settings are added for Blocks. Blocks can be used as small or large containers for blocks of content where a certain color combination of border, background and text is wanted.

Take advantage

As a developer it will be much easier to change the looks of a site using custom CSS. There will be less need to override lots of classes, many changes will be as easily done as changing the value of a variable. When using the variables available in Envision in custom CSS, changes will affect all new Sitevision modules as well as custom modules and webbapps. We think this will make creating, using and changing themes a lot easier in the future.

Tech notes

We will no longer rebuild the Envision CSS file with Sass when a theme is changed. Envision will have a static build with default settings, and themes will be included as CSS with all the variables. Themes may be set on a page and will be inherited in the page tree. All themes will be accessible in all of the pages, so it will be possible to have multiple themes on a single page (planned feature).

See the Envision documentation and source code for current status and details.

Do you want to subscribe to News from Sitevision Developer team? Subscribe here!