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.

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:

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