Increased Envision usage in built-in Sitevision modules - Part 2
Sitevision 2023.09.1 continues on the Envision migration path that was started in Sitevision 2023.07.1. This time inline styling of built-in modules has been replaced with Envision classes.
The Envision migration path continues
This is the second milestone on the Envision migration path that started in Sitevision 2023.07.1. Last time we migrated usage of legacy css classes to Envision classes. This time we migrate inline styling to Envision classes.
In order to modernize and future-proof the built-in modules, we continue migration of legacy styling to use Envision instead. 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 styling in regards of the legacy styling state. Such customizations must be overseen and potentially adjusted when Sitevision is updated to the 2023.09.1 release (or later).
What's changed then?
This step on the conversion path changes of style attributes in the (Velocity) templates of the built-in modules and layout rendering. Basically, an expression in the style attribute has been replaced with an Envision class whenever applicable. For example:
<!-- Before (Sitevision 2023.08.1 or earlier) -->
<span class="some-class" style="vertical-align: middle">
<p class="some-class" style="display:inline; margin:0;">
<div style="vertical-align: top">
<label style="text-align:right; margin-top:15px; padding:0">
<!-- Now (Sitevision 2023.09.1 or later) -->
<span class="some-class env-align--middle">
<p class="some-class env-d--inline env-m-around--0">
<div class="env-align--top">
<label class="env-text-align--right env-p-around--0" style="margin-top:15px">Inline style | Envision class |
|---|---|
display: none | env-d--none |
display: block | env-d--block |
display: inline | env-d--inline |
vertical-align: top | env-align--top |
vertical-align: middle | env-align--middle |
margin: 0 | env-m-around--0 |
margin: 0 0 | env-m-around--0 |
margin: 0 auto | env-m-vertical--0 env-m-horizontal--a |
margin-left: 0 | env-m-left--0 |
margin-bottom: 0 | env-m-bottom--0 |
padding: 0 | env-p-around--0 |
padding-top: 0 | env-p-top--0 |
padding-left: 0 | env-p-left--0 |
text-align: left | env-text-align--left |
text-align: center | env-text-align--center |
text-align: right | env-text-align--right |
border: none | env-border--0 |
width: 25% | env-w--25 |
width: 50% | env-w--50 |
width: 100% | env-w--100 |
list-style: none; margin: 0; padding: 0 | env-list |
list-style: none; margin-left: 0; padding-left: 0 | env-list |
list-style-type: none; margin: 0; padding: 0 | env-list |
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.
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!