Asset File Structure

Root Folder

Convertr uses SASS as our CSS pre-processor language. All CSS files are located within the above file path within the 'styles' folder.

Theme Files

Currently, our theming solution accounts for 2 themes within the above path. 

• Theme 1 (theme1.scss)

  •  The default theme used across most enterprises.

• Theme 2 (theme2.scss)

  • Used in a single instance, specifically created for Incisive (incisive.cvtr.io)

Each of the theme files above contains common aesthetic variables for each theme (colours and font families), and also import the parent components file (components.scss).

The components file then imports all subsequent .scss files, organised in a very simple structure which includes global styles, layout styles and individual component styles. 

This structure of theme and component files allows separate visuals between specific enterprises, whilst still sharing common .scss files for UI component. 

Why global styles over component level CSS?

The 'themes' section above explains that global .scss files are used within the platform, which means that we currently do not utilise component level styles. This is our current approach because components frequently share common UI features, where the structure is dictated by our current theming file structure hierarchy solution (explained above). To implement component level styling would require a much more complex structure involving a convoluted import system, however, in the future this may change.