Date |
|
|---|---|
Owner | Michal Wojtas, Antonio Elena |
Intended audience | Partner agencies |
Introduction
This page shows how to style content for a newly created Store (domainFront).
We expect our partners agencies to set up the styling for every new client during the onboarding phase, based on their CI guides. This can be done via our account management tool - the Organization Manager.
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.
Styling levels
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 | 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). |
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. |
Breakpoints
Any of the four levels rules above are applied to all view port widths and then can be overridden for mobile widths specifically.
...
The Organization Manager tool in which you create new organizations, domains fronts and users, is also where you configure CSS per domainfront. You do this in the THEME SETTINGS and MODULE SETTINGS tabs:
...
Obviously, you need to host font files (best: .woff or .wof2) somewhere and use the same font family names as defined in your CSS. You can upload both the CSS file and fonts on your static files for this use specifically, or just reference the files your website uses.
...
You can then reference these names as variables when setting up in any properties. For instance: "color": "{colors.black}" or "borderBottomColor": "{colors.secondary}". This does not work in shorthand definitions, where you need to use a full hex number.
...
imgixParams - you can modify image compression across all pieces of content with it. The setting will be used by Styla's imgix account, which provides image analysis and manipulation. Useful if your client tells you the load sizes/times for Styla content are too big. The default is 45.
Using presets from other
...
fronts
templateModuleIds - this array holds references to preset modules that can be used by this domainfront. It is updated automatically every time you add a new preset in the presets management list in the Editor. You can add new IDs manually if you want a domain front to use presets you've created for another one.
...
Once Theme settings have been configured, you can start configuring Module settings. We recommendto create recommend creating a page with each of the module types you or your client want to use in the future. This way you will see how each of them looks with only Theme theme settings applied (typography, colours and spacings).
...
CSS properties are represented by JSON nodes named after them, but written in camel cases. So, for instance, align-content becomes alignContent. Property values, however, stay as in CSS, so flex-start does not change and if you want to set it, you write: "alignContent": "flex-start" in module styles JSON.
...
This is where you set CSS properties that you want inherited on to every other module. Examples would be: a background colour and some instructions for browsers on how to render fonts.
...
This module displays a list with relative or absolute links that you set in the Editor. As the Editor features a very advanced UI with which you can set colours, paddings, margins and flex box properties, make sure you only apply only settings you always want inherited here (example: a font format).
...
This actually is not a module, but a set of row settings that lets you manage every new slider row created in the Editor. The most important is selecting between three types of navigation available and setting an animation delay.
...
A very straightforward module consisting of a text field for which background and paddings can be customised with the Editor UI. Its width is per default set to 88 base units, which you can change in Theme settings.
| Expand | ||
|---|---|---|
| ||
|
...
Text on video
This module is a banner with an .mp4 video file in the background. Same as banner, it display displays a text container with CTA buttons that can be customised with the Editor UI.
...