Stylesheets

Ideally you would build the css from the Bloembraaden admin interface, just like the templates, but this is not yet possible. You need to prepare the css separately and upload it as style.css to the _site folder of the website you are designing.

What to style

Bloembraaden has a default stylesheet that resets standard browser styles. This leaves you as a designer with a blank canvas.

As a rule you only need to define styles to make your own (html) templates look good. To make your design accessible you need to explicitly define :focus (and :focus-visible) styles, among other things.

When styling links (a tags) remember to style .bloembraaden-email-link in a similar way, these are obfuscated e-mail links that appear as a span element.

Standard classes

The following css classes can be used in your template without having to define this behaviour yourself.

• peatcms-current-slug - set on links that point to the current slug (usually Element).
• nowrap - use in a span if you do not want the contents wrapped.
• attention-grabber - will move frantically.
• nodisplay and display-none - will have display: none;.

More classes to style

Find classes you can target for styling by inspecting your source. For example .messages for messages, .carousel for (Image) carousels. Etc.

Admin interface style

The admin interface laid over your design by Bloembraaden defines its own styles. Some of your styling may ‘bleed’ over to the admin. In that case:

• refrain from using !important (bad practice anyway and seldom necessary).
• target your item more specifically.
• contact me with your issue, so I can update the admin stylesheet.

Css processors are not supported, especially since css is nowadays mature enough to just use vanilla. Here are some interesting resources:

• Css variables
• Using ‘n’ in css (but don’t forget about the simple :even and :odd selectors).
• Combinators