Page Comparison

...

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.

...

{
    "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"
            }
        }
    }    
}

Setting font-family and loading external font files:

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.

Styla has a loader mini app for Google Fonts and will load them via Google Fonts API as long as you set them up correctly (example below).

{
  "fonts": {
      "custom": {
          "families": [
              "ObiSans_ML_Bold",
              "ObiSans_ML_Regular"
          ],
          "urls": [
              "https://fonts.styla.com/obi-redesign.css"
          ]
      },
      "families": {
          "body": {
              "fallback": "sans-serif",
              "fontName": "Roboto"
          },
          "headline": {
              "fallback": "ObiSans_ML_Bold, Arial, sans-serif",
              "fontName": "Obi-bold"
          },
          "interaction": {
              "fallback": "sans-serif",
              "fontName": "Lato"
          },
          "product": {
              "fallback": "Helvetica Neue, Helvetica, sans-serif",
              "fontName": "Arial"
          },
          "subheadline": {
              "fallback": "ObiSans_ML_Regular, Arial, sans-serif",
              "fontName": "Obi-regular"
          }
      },
      "google": {
          "families": [
              "Roboto:400,400i,700,700i",
              "Lato:300,300i,700,700i:latin"
          ]
      },
      "source": [
          "custom",
          "google"
      ]
}

Leading and line height

Instead of directly setting up font-size and line-height for each font format, Styla front-end needs them to be configured in leading and lineHeight fields, which will result in the above CSS properties in pixels. It's done this way to enable baseUnit changes influence any text size.

The leading field defines overall text line height, from the top to the bottom of every possible character. It is counted by multiplying the value you set by baseUnit. The lineHeight defines a fraction of font-size that the lineHeight will be. It's a bit hard to get the math done in your head, so we've created a spreadsheet for you to convert the standard CSS properties into the Styla properties and the other way round. Add it to your bookmarks if you are going to use it often.

Font formats

Once you've set up your font-families, you use them to set up font formats. These are typography definitions which you can reuse on any number of modules and presets by adding a 
"fonts.formats" : "formatName" reference there. You can then update this format for all modules using it by changing its properties in Theme settings.

Font formats you define here can also be selected by users in the Editor in the "Advanced" tab for any module. Selecting them from the below dropdown list will make a specific field on your module load typography properties from the format assigned.

...

Font format examples:

The below JSON node shows how to set them up. Please don't use any non-typography CSS settings (paddings, colours, transitions) there. They won't work as they are applied on the module level.

As you can see, properties can be set just for mobile views in the smallScreen node.

{
    "fonts": {
        "formats": {
            "body": {
                "fontFamily": "body",
                "leading": 2,
                "lineHeight": 1.5,
                "smallScreen": {
                    "leading": 2.4,
                    "lineHeight": 1.5
                },
                "styles": {
                    "fontStyle": "normal",
                    "fontWeight": 400
                }
            },
            "headline-1": {
                "fontFamily": "headline",
                "leading": 3.333333333,
                "lineHeight": 1.052631579,
                "smallScreen": {
                    "leading": 2.5,
                    "lineHeight": 1
                },
                "styles": {
                    "fontWeight": 700,
                    "letterSpacing": "1.5px",
                    "textTransform": "uppercase"
                }
            },
            "productModuleOldPrice": {
                "fontFamily": "serifMedium",
                "leading": 1.6,
                "lineHeight": 1.333333333,
                "smallScreen": {
                },
                "styles": {
                    "fontWeight": "bold",
                    "textDecoration": "underline"
                }
            }
        }
    }
}

...

Color

The same way you create font formats to be reused in many different modules, you configure colours to be able to reference their name and change them in Theme settings for any module using it. You set them up by giving them a name and then assigning a CSS hex or RGB scheme value.

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.

Colours you define here can also be selected by users in the Editor in the "Advanced" tab for any module. Selecting them from the below dropdown list updates will apply a CSS property with this colour to a given HTML element.

...

Examples

The contrast is per default used for all background elements and in 90% of cases will be white. The bodyCopy will per default be applied to paragraph copy and in 90% of cases will be black or dark grey. Some other names like primary or link will also be automatically applied to some HTML elements in some modules unless you override them in module settings.

As you can see below, every CSS-compliant colour notation can be used, including colour hex and RGB numbers with opacity.

{
   "colors":{
      "bodyCopy":"#000",
      "contrast":"#fff",
      "headline":"#17332f",
      "link":"#1454fe",
      "neutralBackgroundDark":"#1e212a",
      "neutralBrownGrey":"#909090",
      "neutralWarmGrey":"#979797",
      "primary":"#ffdd00",
      "secondaryBurgundy":"#8b5f65",
      "secondaryDarkSlateBlue":"#224a63",
      "secondaryDustyOrange":"#f6912c",
      "secondaryFadedOrange":"#efa152",
      "utilityHighlight":"rgba(20, 84, 254, 0.3)",
      "whiteOpacity":"#fffc"
   }
}

...

Max widths, page margins and gutters

Theme settings feature a property for setting a max-width for any Styla content (which will be used for the row "Default Width" in Editor) and a separate one for the "Smaller" width. These are set in pixels. "Full Bleed" will always use 100% of browser width unless Styla content sits in an external HTML that has its own width or margins/paddings set.

It is good practice to set the pageMaxWidth to the same pixel value parent website uses. This will make content appear more or less the same in the Editor. In addition, you can set a pageMargin value in base units which will apply paddings on the left and right, visible once you resize the browser window below the pageMaxWidth.

Values from the gutters array populate the dropdown in the Editor where you can apply margin-top to layout rows, spaces between modules in a row and external paddings for a row background. They are defined in base units and can be set for desktop and mobile separately. This lets you space rows or modules differently on smaller screens.

Applying row margin-top in the Editor:

...

Applying row background padding in the Editor:

...

Applying row inner padding in the Editor:

...

{
    "baseUnit": 10,
    "gutters": {
        "block": 4,
        "double": 2,
        "extraLarge": 8,
        "extraSmall": 0.5,
        "large": 4.5,
        "medium": 3,
        "none": 0,
        "single": 1,
        "small": 1.5,
        "textMaxWidth": 88
    },
    "pageMargin": 0,
    "pageMaxWidth": 1220,
    "smallerContentMaxWidth": 1000,
    "smallScreen": {
        "baseUnit": 10,
        "gutters": {
            "extraLarge": 3,
            "large": 3.5,
            "medium": 2,
        },
        "pageMargin": 2,
    },
    "smallScreenMaxWidth": 768,
}

...

Other settings of importance

Quality compression for Images

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 domains

templateModuleIds - this array holds references to preset modules that can be used by this domain. 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 to use presets you've created for another one.

Max width for Texts

textMaxWidth - this field sets a max-width value (in base units) for the textWrapper HTML div in which content of Text module sits. The default is 88.

{
    "gutters": {
        "textMaxWidth": 88
    },
    "imgixParams": {
        "q": 20
    },
    "templateModuleIds": [
        123565,
        128574,
        270166
    ]
}

...

Module Settings

Once Theme settings have been configured, you can start configuring Module settings. We recommendto create a page with each of 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 settings applied (typography, colours and spacings).

The next step would be to start updating settings for each specific module. You do this by applying CSS and other settings in a JSON node named after the module.

Each module node contains a styles subnode, where CSS is applied and a settings subnode where non-CSS settings are applied. These include some switches/feature flags for which there is no UI in the Editor, some of them very client-specific features that Styla had been asked to develop for them.

CSS that you set for a module is delivered by Styla to your browser and will work as CSS on any other website. So any CSS property can be set and will be rendered, as long as your browser supports it. You can transform, animate objects, change their position, display and z-index properties - which of course can break module layouts.

Naming convention and property values

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.

Most CSS properties should be set as strings, for instance:

"backgroundPosition": "93% center",
"boxShadow": "0 2px 6px 0 rgba(0, 0, 0, 0.12)",
"fontSize": "1.4em",
"width": "calc(100% - 60px)"

and you use strings to reference Styla variables too:

"backgroundColor": "{colors.primary}",
"fonts.formats": "price"

However, any size properties that you normally set in px or em can be set in base units if you simply use numbers (positive or negative) to set them:

"bottom": 0,
"marginTop": -1.2,
"paddingLeft": 0.5

Many non-CSS settings take Boolean values, some of them are numbers or strings:

"isExternalLink": false,
"priceMinFractions": 2,
"priceTemplate": "#{price} €"

Any JSON you enter into the Organization Manager or Editor will be validated before saving. If it's invalid the changes won't be saved and will be lost, so if you're planning to enter a big chunk of JSON into the editor, better validate it somewhere else beforehand or back it up. The best approach is small incremental changes.

...

App

This is where you set CSS properties that you want inherited on every other module. Examples would be: a background colour and some instructions for browsers on how to render fonts.

{
    "App": {
        "styles": {
            "App": {
                "all": {
                    "backgroundColor": "{colors.lightGrey}",
                    "marginTop": 0,
                    "paddingBottom": 4,
                    "textRendering": "optimizelegibility",
                    "-webkit-font-smoothing": "antialiased"
                }
            }
        }
    }
}

...

Banner

This is one of the most complex and definitely the most often used module. It consists of a text and buttons (in textLayercontainer) and an image (in imageLayer container).

{
    "BANNER": {
        "styles": {
            "ctaLink": {
                "all": {
                    "border": "1px solid",
                    "borderRadius": "25px",
                    "fonts.formats": "button",
                    "padding": "14px 25px"
                }
            }
        }    
    }
}

...

Carousel Controls

This is a generic module reused for carousel arrows left and right on Product slider and Product Details modules. If you change settings here, they will be updated for both of them.

{
    "CarouselControls": {
        "styles": {
            "left": {
                "all": {
                    "left": "-40px",
                    "position": "absolute",
                    "top": "55%"
                },
                "smallScreen": {
                    "left": "-34px"
                }
            }
        }
    }
}

...

Divider / Section Title

This is the module used for graphically separating some other modules (groups) while not being semantically a headline. When updating its appearance, you should pay attention to Section Title too, where default font format will come from and whose module settings will influence it too.

{
    "DIVIDER": {
        "styles": {
            "DIVIDER": {
                "all": {
                    "position": "relative"
                },
                "smallScreen": {
                    "display": "flex",
                    "flexDirection": "column",
                    "justifyContent": "center",
                    "position": "static"
                }
            }
        }
    },
    "SectionTitle": {
        "styles": {
            "SectionTitle": {
                "all": {
                    "backgroundColor": "#fff",
                    "boxShadow": "0px 0px 0px 30px #ffffff",
                    "display": "inline-block",
                    "left": "50%",
                    "marginBottom": 0,
                    "marginTop": 0,
                    "position": "absolute",
                    "top": "6px",
                    "transform": "translateX(-50%)"
                },
                "smallScreen": {
                    "boxShadow": "0px 0px 0px 15px #ffffff",
                    "top": "auto"
                }
            }
        }
    }
}

...

Image

A simple module consisting of an image and caption text. Still, you can adjust typography or caption background for it.

{
    "IMAGE": {
        "styles": {
            "picture": {
                "all": {
                    "borderRadius": "3px",
                    "boxShadow": "0 1px 4px 0 rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 1px 11px 0 rgba(0, 0, 0, 0.14)",
                    "overflow": "hidden"
                }
            }
        }
    }
}

...

Navigation

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).

{
    "NAV": {
        "styles": {
            "elem": {
                "all": {
                    "borderBottom": "1px solid",
                    "fonts.formats": "navigation",
                    "margin": "0px!important",
                    "marginRight": "70px!important",
                    "transition": "all .2s"
                }
            }
        }
    }
}

...

Slider

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.

Settings:

• autoPlay - switches autoplay on/off, the default is true,

• autoPlayDelay - sets a delay (in milliseconds) between modules in the slider being animated,

• showArrows - switches navigation arrows left and right on/off, the default is false

• showDotNavigation - switches navigation dots below slider on/off, the default is true

• showThumbnailNavigation - switches navigation image thumbnails on/off, the default is false, you need modules with images in the slider for this to make sense

If you need to override these settings for a single slider instance, you need to do this in. page JSON directly. There is currently no Editor UI for doing this.

{
    "STANDARD_SLIDER": {
        "settings": {
            "autoPlayDelay": 5000,
            "showDotNavigation": true,
            "showThumbnailNavigation": false
        },
        "styles": {
            "dotNavigation": {
                "all": {},
                "smallScreen": {}
            }
        }
    }
}

...

Product details

This module consisting of a product slider, product text with multiple fields and a button.

Settings:

• autoPlay - switches autoplay on/off, the default is true,

• autoPlayDelay - sets a delay (in milliseconds) between product images in the slider being animated

• arrowsIconsSize - sets navigation arrows size (in pixels),

• infiniteScroll - switches animation looping on/off, the default is true,

• showArrows - switches navigation arrows left and right on/off, the default is false

• showDotNavigation - switches navigation dots below slider on/off, the default is true

• showThumbnailNavigation - switches navigation image thumbnails on/off, the default is false,

• targetRatio - sets a target shape to which product images will be autocropped to fit into the slider, the default is 1 (square), 0.5 is landscape rectangle, 1.5 portrait rectangle, 0 switches the autocropping off and uses the original image ratio,

• transitionDuration - sets CSS transition time (in milliseconds)

{
    "PRODUCTDETAILS": {
        "settings": {
            "showArrows": false
        },
        "styles": {
            "container": {
                "all": {
                    "marginLeft": "auto",
                    "marginRight": "auto",
                    "maxWidth": "1488px",
                    "padding": "60px 0px"
                },
                "smallScreen": {
                    "padding": "20px 0px"
                }
            }
        }   
    } 
}

...