Styles & objects

Text styles are defined as variables in pixel-equivalent REM units. Technically, this means all REM units are divided by the Base Value variable defined in the Custom Code component, assuming a default root font size of 16px. This allows text in Blockhead can take advantage of browser accessibility features without requiring developers or their clients to deal in abstract decimal values for text size. A Body Text variable of 16rem will display as 16px at default browser settings.

Note: If for some reason the root (html element) font size is set to something other than 16px, the Base Value variable will need to be updated to mach.

Blockhead supports 50 colors by default. To customize the palette, start by adjusting the color variables in the Variables Panel. Then rename the background color, text color, button color, & border color classes appropriately. If your project does not require 50 colors, removing surplus colors from the styleguide will allow you to Clean those classes from the stylesheet via the Style Selectors panel.

Note: Some color classes used in the styleguide can not be removed. This will be rectified in a future update.

Included are a number of objects & object styles. Horizontal Rules are controlled in size with the Border Width & Border Width Thick variables, & can be combined with any background color class. Buttons use the Border Radius S variable by default, but can be updated at the Button class which will apply to all button variations. Object styles like corner radiuses & Drop Shadow can be applied to any object or element. And the Link Block object style simply sets a link block to inherit styles from its parent element.

Cursor Pointer applies the hand pointer to a div that may be interactive thanks to an applied Interaction, but because it is not a link element, does not display the hand pointer by default. Pointer Events - None allows an element to be interacted with from underneath another element. For instance, a large graphic set on top of a page can use the Pointer Events - None class to allow the user to interact with any content underneath.

The image suite allows images to be cropped to various aspect ratios & optimized across different viewports. This is done by applying the Object Fit Cover class to an image, & applying the Image class to it's parent div, along with an aspect ratio subclass like 16x9. A user can then append viewport-specific classes to the parent div, like 4x3 Tab & 1x1 Mob. This will produce an image that is widescreen aspect on desktop, traditional "tv" aspect ratio on tablet, & then square on mobile.

The advantage to using the object-fit: cover; method over background-image: url(...); method is that the element can be updated through the Editor mode by clicking directly, no element-specific class needs to be made, & the image will take advantage of Webflow's responsive images feature.