Content-specific Layouts

Frames are centrally configured layouts for different content elements. Frames can be used, for example, to allow a content editor to apply a specific background image and/or color to specific content elements throughout the website.

Ruler before

In [Appearance] ... [Frame Options] you can check the [Ruler before] box ...

Ruler after

Here the ruler is positioned after the element.

Ruler after coloured

Here the ruler is positioned after the element and [Background Color] is set to “light”.

Ruler before coloured

You can set a rulers before or after each content element.

Indent (left)

with mustard

Far back, behind the mountains of words, far from the countries of vowels and consonants, live the blind texts. They live in seclusion in Buchstabhausen on the coast of the Semantik, a large linguistic ocean. A small stream called Duden flows through their village and supplies them with the necessary regularities. It's a paradisiacal land where fried sentence fragments fly into your mouth.

Indent right

Not even the almighty punctuation controls the blind texts - an almost unorthographic life. One day, however, a small line of dummy text, her name was Lorem Ipsum, decided to go out into the wide world of grammar.

Indent, left & right

The great Oxmox advised her against it, as it was teeming with nasty commas, wild question marks and sneaky semicolons, but the little blind text was undeterred. He grabbed his seven capitals, slipped his initial into his belt and set off.

Coloured Backgrounds (Light)

Once it had climbed the first hills of the Italic Mountains, it took one last look back at the skyline of its home town of Buchstabhausen, the headline of Alphabetdorf and the subline of its own street, Zeilengasse. A rhetorical question ran wistfully down its cheek, then it continued on its way. On the way, it met a copy.

Coloured Backgrounds (Dark)

The copy warned the dummy copywriter that it had been rewritten umpteen times where it came from and that all that was left of its origin was the word ‘and’ and that the dummy copywriter should turn round and return to his own safe country.

Coloured Backgrounds (Primary)

However, all the good-talk couldn't convince it and so it wasn't long before a few insidious copywriters ambushed it, got it drunk with lunge and slogan and then dragged it back to their agency, where they misused it again and again for their projects.

If the same backgrounds follow each other, the distance between the elements is reduced.

Duis vitae ipsum et ante sollicitudin tincidunt a nec sem. Maecenas ultricies lacinia nunc at adipiscing? Nam ullamcorper commodo elit in euismod. Fusce nec varius tortor. Fusce justo diam, interdum quis egestas et, luctus a purus.

Coloured Backgrounds (Secondary)

And if it hasn't been rewritten, they're still using it.

Background Image (Simple)

Far back, behind the mountains of words, far from the countries of vowels and consonants, live the blind texts. They live in seclusion in Buchstabhausen on the coast of the Semantik, a large linguistic ocean. A small stream called Duden flows through their village and supplies them with the necessary regularities. It's a paradisiacal land where fried sentence fragments fly into your mouth.

Background Image (Blur)

Not even the almighty punctuation controls the blind texts - an almost unorthographic life. One day, however, a small line of dummy text, her name was Lorem Ipsum, decided to go out into the wide world of grammar.

Background Image (Grayscale)

The text style, for example ‘Danger’ (or red), is reset to ‘Lead’ (or black) by ‘Background Image (Grayscale)’. This means that Grayscale is only suitable for images that are already very light in colour, as otherwise the superimposed text is not legible.

Background Image (Sepia)

(Sepia) actually shows very clearly that superimposed fonts only make sense if you can use HTML5 drop shadows for the applied font.

Background Image (Fade)

(Fade), as used for the Intruduction package, is the only image style that can be used without further font and/or image processing.

Background Image (Parallax)

However, all the good-talk couldn't convince it and so it wasn't long before a few insidious copywriters ambushed it, got it drunk with lunge and slogan and then dragged it back to their agency, where they misused it again and again for their projects.

And if it hasn't been rewritten, they're still using it.

Embedded

It is interesting that the Bootstrap framework only partially allows the standard colour palette as a background colour, but apparently twice ‘almost black’, in the form of ‘dark’ and ‘quaternary’. There is an urgent need for correction.

Setting everything to ‘idiot-proof simple’ also ensures that only idiotic results are possible.

Here it would be a good idea to develop a template that provides a previously defined ‘corporate design colour palette’ for any ‘colour issues’, which is then supplemented by uniform variations in brightness and saturation. ...