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.
By default Blokks automatically calculates the size of an Activity and adds class names indicating its measured size. Class names like
120px and smaller),
50px or smaller) and
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
Note: As an alternative, you can use the
data-duration property to determine the size of an Activity.
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.