Date |
|
|---|---|
Owner | Michal Wojtas, Antonio Elena |
Intended audience | Partner agencies |
Introduction
This page shows how to style content for a newly created Store (domain).
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 domain 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 | Store/domain | These are CSS and other settings influencing any piece of content you create for this domain. "domain" is Styla lingo for a store or a locale within an organization (client). 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.
Styla Frontend features one breakpoint applied with standard media queries. This breakpoint is set per default to 767px and can be modified in Theme settings. This means there is no intermediate breakpoints you'd normally use to apply a different CSS to tablets, laptop screens etc.
You can apply any CSS property (not just widths, margins or font-sizes) to any Styla HTML element separately. This is in line with the Editor UI which lets users override certain settings from desktop on mobile.
Organization Manager (admin.styla.eu)
The Organization Manager tool in which you create new organizations, domains and users, is also where you configure CSS per domain. You do this in the THEME SETTINGS and MODULE SETTINGS tabs:
Theme settings
This is where settings affecting any module are set. This includes typography, colours, sizes, gutters etc. They are inherited and can be modified on lower CSS levels.
Base unit:
Almost all sizes in this tab are defined in base unit which itself is defined in pixels. You define it by simply setting: "baseUnit": 10, on the highest JSON level. Setting it to 10 will make every other setting multiply its value by 10px. This way you can make every CSS property larger/smaller by changing this one setting. This will not be possible if you use px, rem, vw or any other CSS unit on a (lower) module level. These would keep their values in standard CSS units no matter what you change the base unit to.
Defaults: all: 8, smallScreen: 7
Add Comment