Styling content with Styla Frontend

Date	16 Mar 2021
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 (Theme and Module settings)	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). 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 domain 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.

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

Defining fonts families:

Styla can use external sources of font files to be loaded by Styla front-end and Editor preview. Setting them up is only needed for displaying text with a specific font outside of the parent website. Styla content embedded on a website will use font files loaded by this website, so the only thing you need to set up for such case is proper font-family rules.

However, you may need to load external font files to demo content and approve the CSS with your client - even before Styla content has been embedded on the website and is able to use the external font files.

Setting font-family without loading external fonts:

The only thing you need is to set up a list of font names that will populate the font-family CSS property in Styla front-end. They need to match font files loaded by the website or installed on user's machine, otherwise browser will fall back to whatever is defined in the fallback field.

Code Snippet for Fonts

{
    "fonts": {
        "families": {
            "body": {
                "fallback": "sans-serif",
                "fontName": "GlacialIndifference-Regular"
            },
            "cta": {
                "fallback": "Helvetica, sans-serif",
                "fontName": "Oswald"
            },
            "headline": {
                "fallback": "Arial, sans-serif",
                "fontName": "GlacialIndifference-Bold"
            },
            "serif": {
                "fallback": "serif",
                "fontName": "Butler"
            }
        }
    }    
}