Block styling

Now that we understand the structure of the embed and are familiar with the naming convention used by Blokks, it’s time to bring everything together:

Blokks modifiers

Blokks adds modifiers indicating the state of its component. For example, modifiers are added when an Activity is favorited, delayed or when it’s a headliner. You can use these modifiers to style your embed.

Note: Download the CSS template to get a full list of modifiers used by Blokks.

Size modifiers

By default Blokks automatically calculates the size of an Activity and adds class names indicating its measured size. Class names like activity--small-size (120px and smaller), activity--smaller-size (50px or smaller) and activity--smallest-size (35px or smaller) are added when the component becomes too small to display all of its information.

Computing element sizes forces the browser to reflow. This is also known as layout trashing and can cause performance problems when you add a lot of activities. If this is the case, we recommend disabling auto measuring by setting the data-auto-measure-size to false.

Note: As an alternative, you can use the data-duration property to determine the size of an Activity.

CSS Template

We’ve created a CSS template containing separate files for all components with their elements and modifiers. The files don’t contain styling, but it’s simply a starting point enabling you to add your own styles. All components and modifiers are well documented with inline comments. You can use SASS or PostCSS to compile them.

Download the template