Increased Envision usage in built-in Sitevision modules - Part 1
Sitevision comes with approximately 150 modules that have been around for years. The time has now come for these modules to start using Envision for CSS styling. Changes in Sitevision 2023.07.1 are the first baby steps on this future path.
Software development is a constant battle against legacy over time
Sitevision comes with approximately 150 built-in modules. Several of them have been around for many years and were created long before Envision was released. These modules typically uses a mix of Sitevision CSS classes and inline styling. This is a styling legacy that has been built up over the years they have been improved and updated.
All new modules that has been created by Sitevision the last years are WebApp-based. These are typically released, distributed and updated via Sitevision Marketplace. New modules all use Envision for CSS styling.
The legacy styling battle starts now
In order to modernize and future-proof the built-in modules, they will start to use Envision as of the Sitevision 2023.07.1 release. This is of course a good thing. Envision is the way to go and increased usage could also help improve future page rendering responsiveness/time (e.g. Pagespeed).
There are drawbacks though - changes of the legacy styling can potentially cause problems for web sites that has customized their CSS styling in regards of the legacy styling state. Such customizations must be overseen and potentially adjusted when Sitevision is updated to the 2023.07.1 release (or later).
What's changed then?
The first baby steps on this conversion path are basic one-to-one changes of class attributes in the (Velocity) templates of the built-in modules. Basically, a Sitevision CSS class has been replaced with an Envision class. Typically the Envision class has important priority but the legacy class typically does not (hence, evaluated selector priority order might change).
Legacy CSS class | Envision CSS class |
|---|---|
svhidden | env-d--none |
sv-hidden | env-d--none |
sv-inline | env-d--inline |
sv-visuallyhidden | env-assistive-text |
sv-vamiddle | env-align--middle |
sv-nomargin | env-m-around--0 |
sv-notopmargin | env-m-top--0 |
sv-nopadding | env-p-around--0 |
sv-text-align-center | env-text-align--center |
sv-text-align-right | env-text-align--right |
What about our custom rendering templates?
Many Built-in modules allows developers of the site to customize the rendering of the module. This is typically done via exposure of a Velocity template and an accompanying checkbox that allows template changes and dispatches rendering (to the custom template).
Custom Velocity templates that already are in use will not be affected by any of these changes described above! Though, you should typically apply some (or all) of the changes in order to modernize your templates and keep them up-to-date with the updated Sitevision template. Things will work completely fine without any changes but your templates gets more and more outdated if you wait indefinetely.
Future - the legacy battle will continue
As always, we will continue to make improvements and deprecate legacy code. There are future plans that Sitevision some day will provide an optional "slim rendering" mode that completely discards usage of legacy CSS classes (sv-hidden et al).
Such potential "slim rendering" mode will improve page rendering responsiveness (e.g. Pagespeed). But it will also mean that legacy css classes no longer will not have any effect. In other words - using such future "slim rendering" mode will typically require that custom Velocity templates of built-in modules are updated/adjusted to use non-legacy classes.
Envision is an open source UI Library for Sitevision (MIT License)
- Envision documentation is available at https://envisionui.io
- Source is available at https://github.com/sitevision/envision
Do you want to subscribe to News from Sitevision Developer team? Subscribe here!