Zymonic UI

Zymonic UI

In December 2022 the JS, CSS and XSL of Zymonic was given a major refactor - whilst the UI is still not perfect the following should be considered essential for anyone considering modifying the CSS or XSL.

Compatibility

The latest XSL/CSS/JS has been tested against Safari (including on iOS), Edge, Firefox and Chrome and on screens down to 350px wide - if you are making changes to the CSS/XSL/JS then ensure that the changes are tested in all browsers.

CSS Authoring

ZymonicDefault.css has evolved over many years - however there are some guidelines we are working to as we continue to improve the CSS:

• At the top of the file we define font sizes and colours - this is in order to make a 'theme' editor possible in the future. When defining the colours we use a name that reflects the use of the colour e.g. form-data-text and not 'dark-zymonic-grey'. If you are choosing a colour for a new UI element then please choose from the existing palette, if unsure then look at the colour names of the surrounding elements to see what 'sort' of colour you need e.g. data*, report*, form*, decoration* etc. Please do not add new colours without consulting the other developers - prior to December 2022 we had managed to use over 100 different colours; 23 of them different shades of grey...

• Please try and use the 'Cascading' nature of CSS, i.e., define how a group of UI elements will behave in a similar way and apply that to a class that covers all of them (get an XSL dev to add classes if necessary), then add rules that apply the variations in behaviour to specific UI elements. Please do not copy and paste large chunks of CSS because things behave in a similar way.

• Please avoid use of 'px' unless absolutely necessary - please use 'em' or percentage so that all elements scale with either the screen or the fonts.

• Please do not use media queries for scaling elements in the UI - Desktop mode allows users to resize blocks, a media query will not be applied 'per block', thus you need to ensure that your elements scale nicely as user's shrink and grow blocks.

• However... please bear in mind that the resolution of a device will have a significant impact on what fonts look like 12px on a mobile phone (500+ DPI) will be almost unreadable and 16px on an old fashioned TFT monitor (~100 DPI) will be enormous - this is one of the few places where we use media queries.

JS

Our JS is now all object oriented; anything not object-oriented should be considered deprecated.

XSL

As part of the December 2022 refactor there were two changes made to the structure of the XSL.

• The templates that were duplicated in ZymonicMain.xsl, ZymonicBlock.xsl, ZymonicDesktop.xsl and ZymonicDesktopBlock.xsl have been moved to 'utility' XSL files and included via ZymonicIncludes.xsl.

• Sub-Class XSL is included where the main class XSL is included - since our XSL Combiner can only go 2 levels deep when removing import/include XSL statements (and include/import does not work with JS Transformer objects).