My favorite & final project at Edgar Allan was publicly launching our internal CSS framework, Knockout. In some ways, this was the culmination of 6 years working in Webflow, & an evolution of our previous framework, Webflow For Teams.

We built knockout because we found that a utility class-based system allowed us to create a unified approach to development within our own team & allowed us to create thorough documentation that can be used for both training new team members & documenting the build for client handoff.

The system began as a brainstorming document where I jotted down all the classes we'd need & the order in which they'd need to be created for the modifiers, for instance, to overwrite the default element styles. And this ended up being the core of the framework: the right classes created in the right order.

The cloneable framework itself was built out as a style guide, so there's both an organized reference for each class as well as an example of the applied class, which can be used to customize the class according to the brand or project. These cover layout (columns, padding, margins, & flex), styles (text, icons, colors, & buttons), objects (images, forms, & misc. objects), & modifiers, as well as a small library of components & javascripts.

The name Knockout was chosen because at the time that I was building it, I was watching every Muhammad Ali documentary I could find. But also because this thing really will help you "knock sh*t out." It works quickly & makes development look easy, like Ali's fighting style. So the mood board for the branding focused heavily on the style of vintage boxing posters: bold, warm color blocks, rich textures, & big, condensed, high-contrast lettering. And the creative team (Kate, Chesley, & Jaime) did a bang-up job turning these mood boards into the finished designs, madewithknockout.com (which was itself built using the Knockout framework).

I then built an accompanying documentation portal housing detailed explanations and how-tos for setting up & using Knockout. But it also dug deep into the philosophies behind the framework: maximizing the power of inheritance, minimizing redundant style declarations, thinking modularly, using plain language in class naming, & so on. Since this was to function as our internal training tool & client handoff documentation, this section was equally as important as the framework itself.

And lastly, the creative team built a companion Figma file that leverages Knockout's type, color, & spacing systems, allowing for creative teams to design in ways that seamlessly translate to development.

The end result is a beginning-to-end picture of the Edgar Allan process, from design to handoff, which we were excited to share with the world (which was boosted when Barrett featured Knockout in the "Evolving design system tooling" presentation at Webflow Conference 2022). But since different developers & different teams have different needs, we released it under the Creative Commons Attribution-ShareAlike license, meaning anyone can modify & share their own version of the framework. So I'm most excited about seeing how the Webflow community builds upon the system, & how we might fold some of those innovations back into Knockout.