contentfry

Appearance

Styles ​

Display SDK loads some CSS classes as a boilerplate starting point. Check Boilerplate CSS

Editor sets classes for available features on the root element (<html> for websites). Very similar to how modernizr works.

Features ​

Possible enabled features:

css
.with-banner {}
.screens-shadow-true {}
.screens-fill-outline {}
.screens-font_size-text-lg {} /* test-sm | text-md | text-lg */
.social_icons-shape-rounded {} /* rounded | square | circle */
.social_icons-brand_colors-true {}
.inframe {} /* display is inside embedded iframe */
.inside-editor {} /* display is inside editor iframe */
.autorefresh-active {} /* display has autorefresh and refreshing state is active. Max duration 0.5s */

Sample root element:

html
<html class="with-banner screens-shadow-true screens-fill-outline"></html>

Boilerplate root element classes

main-center centers main container, good for sliders and single posts.

autorefresh-transition adds fade-in/out transition to main container during fetching new data. Autorefresh details

Modified css variables:

css
:root {
  --color-background: #ddd;
  --color-text: #000;
  --color-card: #fff;
  --color-action: #2563eb;
  --color-actiontext: #fff;
  --color-social-icon: inherit;
  --color-social-background: transparent;
  --color-banner-background : #333;
  --color-banner-text : #999;
  --banner-image-focal-x: 50%;
  --banner-image-focal-y: 50%;
  --background-contrast-opacity: 0;
  --background-contrast-color: #fff;
  --design-font: Arial;
  --card-border-radius: 0;
  --card-border-width: 0;
}

Eqio ​

We use Eqio for element/container queries.

WARNING

Eqio observes main container size changes, @media handles screen size changes. Since screen size is always larger or equal to container size you can add both to make sure till Eqio is initialized, there is a media fall back.

css
/* instead of using media queries */
@media (min-width: 768px) {
  .tablet-bg {
    background: red;
  }
}

/* try using object (container) queries */
.eqio-\>768 .tablet-bg {
    background: red;
}

in the future eqio will be replaced with Native Container Queries

Editor ​

When display is rendered inside editor, root html element adds inside-editor class.