Blockhead is an evolution of my previous Webflow CSS framework, Knockout, but employing the new variables & custom CSS features. (The framework was featured in Webflow's blog announcing the custom CSS feature.) There are minor updates to the class naming system, but what's transformative is the ability to easily manipulate the design system through variables.

The foundation of the framework is a library of utility classes that can be stacked to build layouts & components. These classes provide a system that clients can easily learn & teams can adopt to optimize for long-term manageability of project. This type of system is full of advantages when it comes to managing a build. But before Webflow launched variables & custom CSS, using a CSS framework meant you were forced to design according to the limitations of the framework. Technically you COULD change the value of "spacing - medium," but it would mean updating dozens of padding & margin classes to keep the system consistent. With Blockhead, it's now as simple as updating a single variable. Padding, margin, page gutters, etc, are now unlocked to be customized to a given project.

My favorite part of the system is the column suite. Using calc functions, they can adapt to the content area of the page, accounting for page gutters. This makes them behave flexibly, like percentage columns do, but independent of the width of the parent container. And so you can have beefy page gutters, slim gutters, or no gutters at all, & the columns adapt automatically.

The column system also accounts for the scrollbar width, using javascript to detect the scrollbar width on page load & update the variable, eliminating the telltale sign of a Webflow dev with limited CSS knowledge developing on a Mac: the horizontal scrolling introduced by a 100vw value.

Heading values also use calc functions so that font sizes can be declared in pixel-equivalent REM values. REMs are great because they enable browsers' built-in text resizing accessibility features. They're bad because they have to be expressed in fractional numbers. Pixels are great because the values are descriptive & transfer from design tools like Figma to the browser. But they're bad because they don't respect the browser's accessibility features. Doing the fractional math in the calc function, however, provides the best of both worlds: the descriptive quality of pixel values with the accessibility feature of REM values.

In addition to the system itself, I built a detailed documentation portal that explains the frameworks features & uses, including a blog with commentary on web dev & a bug reporting feature.

To beta test the system, I rebuilt all of the projects from Tips 'N Tricks (with a number of upgrades) in Blockhead. This included a CMS-driven, multi-pin Google Map, a Jetboost-powered search/sort/filter UI, an AJAX method for displaying dynamic content on static pages, & custom accordion, modal, & slider components. This process was crucial to fine-tuning the framework.

The end result is a very robust system for quickly building Webflow sites that I'll be using as the basis for my projects going forward. You can view & clone the framework at blockheadcss.dev/styleguide, you can view the documentation at docs.blockheadcss.dev, & view projects built on Blockhead at projects.blockheadcss.dev.