Grid & layout

The basic building block of a page is the Section class. This applies the Max Width & Page Gutters variables. Nested inside the section will be a section padding class, Padding - XXL through Padding - S. These will apply a spacing variable (like Spacing - XXL) to top & bottom spacing & the Side Padding variable to horizontal padding. To achieve a full-width 12-column layout, the Page Gutters variable can be set to 0px. To rely exclusively on the Page Gutters, the Side Padding variable can be set to 0px or else Padding Y classes like Padding Y - XXL can be used as a substitute.

Section padding values can be adjusted by updating the spacing variables, which will also update corresponding margin classes to maintain consistent padding.

Content can be placed inside the section padding class where content-level layout is accomplished using the column system.

Columns can be used alone or in sequence. To center a group of content in an 8-column wide div, for instance, the combination Column 8 Col Margin X - Auto can be used. Then to stretch this to full width on mobile, the class Whole Mob can be appended. To use multiple columns, the class Column Wrapper needs to be applied to the columns' parent div. This can be used with viewport width columns to create layouts, like placing an image inside a Column 4 Col div & the accompanying headline inside a Column 8 Col div, or with percentage classes for repeating content, like usingColumn Fourth divs in sequence to display eight content cards.

The Column Wrapper class can be used in concert with many flex classes. The Flex Align Center class will vertically center two columns against one another, for instance, & the Flex Vertical Reverse Mob will stack & reverse order two columns at the mobile viewport.

There is also a suite of Offset classes which will apply negative margins to a Column Wrapper in order to offset padding applied to a column. For instance, a string of Column Third Padding - 16px divs would require a Column Wrapper Offset - 16px parent. Since the Column Wrapper now has margin-bottom: -16px; applied, any bottom margin classes will then need to be applied to a parent div to space out sibling content.

Columns tend to pair best with the pixel based padding classes like Padding - 16px, since these apply uniform padding to all sides & all have corresponding offset classes.

The most useful thing about viewport width columns is that they hold their size regardless of the parent div, since they are sized relative to the browser screen. That makes them ideal for page structure. They can be used alone, as described in the previous section, or in multi-column applications.

The column width calculation takes into account the Page Gutters variable, the Scrollbar Width variable (calculated on page load via javascript), & any negative margin applied by an offset class to the Column Wrapper, so you never get horizontal scrolling introduced by width: 100vw; or any unwanted column wrapping.

There is also a Column Auto Col class, which simply expands to fill the rest of a row, & this can save you from having to calculate the remainder when one column is changing size across viewports.

Since percentage columns are sized relative to the width of their parent container, they are ideal for applying to repeated content. A row of 6 logos, for instance, can be created using Column Sixth. This can be set to stack to two rows on tablet using Third Tab, & then to three rows on mobile using Half Mob.

These can be used in tandem with the viewport width columns across viewports, leading to scenarios like Column 4 Col Half Tab Whole Mob.

There are two types of display classes, which sometimes conflict with one another. One type toggles between display: block; & display: none;, which is intended for hiding elements & components on specific viewports. The other type applies block, inline-block, inline, or flex to elements, affecting their display properties. Since an element can't be set to both display: flex; & display: none; on a given viewport, it may be necessary to apply a class like Desktop and Tablet Only to a parent div of an element that already has a conflicting display class like Flex Vertical Mob added.

Note: While grid classes are not included in the framework, they can be used in any Blockhead build & in combination with Blockhead classes.

The flex suite is the primary set of classes for alignment & justification of content. The definition of alignment & justification swap meanings if an element is set to Flex Horizontal or Flex Vertical, thus the naming conventions of "start" & "end" rather than left/right or top/bottom.

Flex classes can be used in concert with other classes, like Column Wrapper Flex Align Center to vertically center two columns against one another, or Column Wrapper Vertical Reverse Mob to stack & reverse the order of columns at mobile. The latter is particularly useful if you want to display a photo in the right column at desktop, but have it display on top at mobile.

Absolute positioning classes may need to be nested inside a Position Relative class in order to avoid escaping a component. And where an absolutely positioned element may need to escape a container that is set to position: relative; by default, that parent may need a Position Static class. Position Absolute - Full can be ideal for applying a background image to a column or section, but that column or section's content may then require a Position Relative class in order to display on top of the absolutely positioned content. Position Absolute - Full can also be ideal for placing a sibling link block on top of a piece of content. This can be ideal for when one piece of content may be linked to one of two different URLs, since sibling link blocks can be conditionally displayed & parent link blocks cannot.

Modals will likely require the Overflow - Auto class to enable vertical scrolling on mobile. Any use of position: sticky; might need Overflow - Visible to override any element that uses overflow: hidden; by default. Section, however, has an Overflow subclass for this purpose. The Overflow subclass will also be needed to allow any content to escape the section, whether by absolute positioning, negative margins, or transform properties.

Full Width & Full Height are often used in concert with Flex classes. Since Flex Horizontal sets child elements to shrink by default, Full Width can be used as an alternative to Flex Grow. It can also be used to stretch elements set to  display: inline; or display: inline-block; to full width. Full Height can be used to stretch interior content to the full height of a column to achieve uniform heights.