Styla CSS

TLDR: Styla does not use style sheets of any page it is embedded on. Instead, style definitions are loaded by the JS you embed your Styla content with and need to be configured for any new client. We need some guidelines from you to define them during onboarding.

The above means that you only need to reference one JavaScript file to have all Styla resources loaded on your website:

• Your CSS should not interfere wiith Styla's and vice versa as our selectors are very specific and uncommon.
• Styla JS can also load any fonts that are referenced in our CSS. But in case your front-end loads them already, Styla will only define font-family rules to use exactly the same variants and not load anything twice. Styla itself can load fonts from various sources like: fonts.com, Google Fonts, typekit. We can also host font files ourselves.
• Styla CSS is divided into three sets of rules:
  • Theme: font-family, font-size, line-height and other font properties per content class like headlines, body copy; list of colors to be used for each of them,
  • General layouting guidelines mostly amount of white space defined by gutters, padding, margin,
  • Style settings for a specific module that can override settings from the general theme.
  • Style preset which overrides the default style set for a specific module - this way you can reuse several variants of it
• Styles for a specific module can be futher overriden with Style Presets that you select from a dropdown when adding a new module.
• This helps you using several variants of a given module. For instance: banners with blue and red buttons for different campaigns or sections of your website.
• Also, fonts and colors can be changed freely on single instances of text and banner modules. As a result, there are four cascading levels of CSS:
  • General settings for an account,
  • General settings for a module,
  • Style Preset for a module,
  • Style overrides for an instance of a module.
• Styla modules are fully responsive and Styla JS "knows" what size of view port it is displayed on. In addition to the four above cascading levels, every CSS property can be separately set for two sizes (for each of the four levels listed above):
  • general - with a set max-width which usually reflects the width of your main conntent column,
  • mobile - below the single breakpoint Styla layouts use, which can be set for your account. Modules below this breakpoint can have different font properties, paddings, colors and any other CSS property.

Styling for a new client is configured during onboarding. We need your guidelines to define it, especially:

• What font-families with what further font properties you want to use for specific content elements like: headlines, body text, buttons, banners, product name, product price etc.
• Links to examples of pages using these settings - they will let us understand better and configure your styling to match that.
• Link to the website on which Styla content will be embedded. If the website is still in development, we'd be glad to get a stage access or even flattened designs of its front-end.
• A CI guide, especially its part about online presence and specific guidelines for typography, colors and content formats on websites.

Then we create an example page with all possible modules for you to see how the style works there and ask you to review it.
The best way to review it is to create several pages that you want to build anyway, so that you can see how the style is used for specific modules, how it changes from desktop to mobile view ports and send us feedback with any changes you need. This is a part of our integration process for new clients.
After your Styla content is launched, we can update your styling and add new presets. General CSS changes will influence all content but presets will only change content they will be set for.

When reviewing appearance of Styla content, please have in mind that modules can be reused ad what really matters is not for the style to work on one very specific layout, but on any layout you can build with these modules. The more specific the style for a module, the less flexible use on pages.

In general, the only thing that limits us when changing appearance of Styla modules is their HTML structure. We can apply every CSS property supported by browsers as long as we have a tag to apply to. Therefore sometimes it is not possible to exactly reproduce a look of an element on your website because a Styla module simply has a different HTML structure.

That being said, we can find workarounds for most appearance-related issues. And we can also build new modules on client's request, especially if they benefit our other clients.

The quickest workaround is usually the HTML module that can be used to host any HTML structure with custom classes and custom CSS as well as JavaScript code embedded in an iframe.