Initial setup

Page Gutter variables determine the left & right padding of the Section class. They can be set to any available unit & column classes will automatically compensate for their value. For a full width, 12-column grid, set the Page Gutter variables to 0px.

‍Note: The Page Gutter variables are manually set on Styleguide pages to avoid layout malfunctions.

Max Width variable sets the maximum width the layout will stretch to, & is applied to the Section class. The default value is max-width: 1440px;. To extend content outside of the max width, it must exist outside of the Section or a subclass must be added to the Section to override the Max Width variable.

To achieve a layout where sections are nested in columns, the Max Width variable will need to be applied to a wrapper class.

The Side Padding variables control the left & right padding of Padding - XXL through Padding - S. Appending a Padding X class will override Side Padding. Padding classes below Padding - S are uniform, but Side Padding can be applied with the Padding X - Default class.

The spacing variables define the values for margin & padding classes for the sizes XXL through S. By default, these are defined in responsive VW units based on units of 12. Padding - L, for example, is defined as padding: 8.333vw;, which is equal to a 1/12th column. The mob variables are converted to pixels at 767px & the max variables are converted at 1440px, so Spacing L Max is 120px (1440 * 0.08333) & Spacing L Mob is 64px (767 * 0.08333). If the Max Width variable changes, then, the max spacing variables will need to be recalculated.

However, this is not the only way to use the spacing variables. The variables can be redefined with any value or unit to fit any design system.

The text & heading size variables are defined in REM units, but in pixel equivalent values. REM units grow or shrink based on browser type size settings, but must be defined relative to the type size of the page's HTML element (16px). To avoid having to deal with abstract decimal values, the text sizes are defined with calc expressions, i.e. text-size: calc(var(--text-s) / 16);.  This means if the Text S variable is defined as 14rem, it will display as 14px at default browser settings.

Project font assignments are easily managed from the Variables Panel. By default, Blockhead includes variables for Body font, Heading font, Serif font, & Sans font. But more variables can be added to support more types if needed.

Line heights are defined in EM units so that they can be applied across multiple text sizes.

Blockhead comes set up by default for 5 shades of 6 colors, 9 shades of neutral, black, white, & transparent. In addition to updating the names & values of the color variables, you will also need to rename the class names related to these colors for background color classes, text color classes, border color classes, & button classes.

In the event that you need fewer colors than Blockhead comes set up with, extra colors can be deleted from the styles & objects styleguide page & from the Variables Panel, then cleaned out of the stylesheet in the Style Selectors panel.

The border radius variables adjust the border radius sizes & the Border Width variable adjusts both border widths & also the default size of the Horizontal Rule class.

The Scrollbar Width variable sets the default width of the scrollbar for calculating column widths. VW units do not account for scrollbars, which is why many websites designed in Webflow have a small amount of horizontal scrolling on Windows browsers. Blockhead accounts for this by using a calc function to account for the scrollbar when determining column widths, i.e. width: calc(((100vw - var(--scrollbar-width) - (var(--page-gutter) * 2)) / 12) * 1);. A small javascript updates the Scrollbar Width variable on page load, but this means that some users may see a slight adjustment. If the variable is set to 0px, users whose browser forces a scrollbar will see a slight adjustment on page load. If it is set to 17px, users whose browser does not force a scrollbar will see the slight adjustment.