Predefined CSS Styles
Here are some preconfigured styles for getting you started. There are plenty styles concerning typography and color. If you want to modify specific styles like headline sizes etc., just dig into the corresponding stylesheet and do so.
- Large screen = width larger than 768px (desktop, iPad landscape).
- Medium sized screens = width larger than 420px but smaller than 768px (small desktops and iPad portrait).
- Small screens = width smaller than 420px (iPhone in landscape and portrait orientation).
“large-column” (can be combined with “float-right” oder “float-left”)
Main text. It’s width is eight columns on large screens, six columns on medium sized screens and one column on small screens.
“medium-column” (can be combined with “float-right” oder “float-left”)
A column which is half the size of the “content-element” on large and medium screens. On small screens it is as wide as the “content-element”. Images placed in a “medium-column” are always resized to the width of that column.
“small-column” (can be combined with “float-right” oder “float-left”)
Two columns form a “small-column”. Images placed in a “small-column” are always resized to the width of that column.
A column which is always as wide as the “content-element”.
“float-left”, “float-right” (only used in combination with one of the three column-styles)
Always used in combination with “dossier-text”, “small-column” or “medium-column” (seperated by a space, e.g. <Div class=”dossier-text float-right”). Defines whether text is floated left or right.
“media-left” (can only be within “large-column float-right”)
“media-left” places it’s content slightly to the left or right of “large-columns” text. On large screens it’s width is four columns while on medium sized screens it’s three columns. On small screens it’s width is that of the “content-element”.
“media-right” (can only be within “large-column float-left”)
The same as “media-left”, but for a left floated “large-column”.
Defines the styling of a caption.