Versions Compared

Version Old Version 10 New Version 11
Changes made by

Fabian Frei

Fabian Frei

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Styla expects partners agencies to set up the styling for every new client during the onboarding phase, based on the client's CI guides. This can be done via our account management tool - the Organization Manager.

Table of Contents

Styling levels

Styling can be applied on several levels, depending on how specific a rule should be. Each of the levels inherits settings from its parent and can override them for its own scope.

...

Level

When to apply rules here:

1

Application defaults

These can only be changed by Styla developers by deploying changes to the Layout Engine (Styla front-end) project. If you create a new front and don't configure any Theme or Module settings, every module will use these defaults. By configuring settings you override these. If you configure something in a wrong way, the application will probably fall back to these defaults.

2

Front
(Theme and Module settings)

These are CSS and other settings influencing any piece of content you create for this front. "front" is Styla lingo for a store or a locale within an organization (client).
You configure general typography and colour settings plus sizing and gutters in Theme settings, then customise these for every module type that has a different HTML structure in Module settings. In general, every new front needs to have these configured and they will be applied automatically, unless overridden on a lower CSS level.

If you change one of them in the future, the changes will be applied retroactively to any existing content. This CSS is fetched from the top-level settings every time a Styla page is requested.

3

Presets for Modules

If you want to use several style variants of a module, you can apply some changes with the Editor UI and then reuse the resulting preset for any module of the same type. Which means that by selecting a different preset from the dropdown in the "Settings" tab, a different set of CSS rules will be applied. You can also apply any CSS rule to any HTML node, even if there is no UI for it in the Editor.

CSS from such preset will be merged into any other CSS applied for the module and override any module settings from the higher levels. If you update a preset itself, you need to reapply it to all modules you need the changes to be reflected on. Creating presets only makes sense if they really will be reused on multiple modules.

4

Module instance

You can apply CSS settings on a single module level as well - with the Editor UI or directly in the JSON editor. This makes sense if you only want the changes to be applied to one module and don't want to reuse them.

...