Knockout: A CSS framework for Webflow

Created by the folks at Edgar Allan

Knockout: A CSS framework for Webflow

Created by the folks at Edgar Allan

As we've been putting the final touches on Knockout this last couple of weeks, fueling it up for its maiden voyage down the information superhighway, I've been thinking about the early days when we first started building in Webflow, circa 2015. Back then, I was the only developer at Edgar Allan. I remember how I would start each project from scratch. And every project would teach me something new and I'd incorporate that into the next one. And Webflow would add new features all of the time, so we'd adjust our projects to incorporate them. And over time we built up our own little treasure chest of Webflow learnings. What worked and what didn't. Where the limitations were and how to work around them. We captured these learnings in a project called Template 1.0, and that became the project we'd duplicate to start each new build. And we began to work a lot faster with this little head start.

Later on, our team began to grow so we created a course called Webflow For Teams. This was primarily for internal training but we put it out into the world because we wanted to share from our Webflow knowledge treasure chest. From that we got some really great feedback from Webflow users who were, as we once were, just starting out. Because it turns out it's always great to get some guidance from someone who is a little further up the trail than you. And we kept updating our Template project for internal use, all the way through version 3.1.

Then, a year ago, I took some time off client projects to rebuild the Template from scratch. I began brainstorming in a text file, jotting down all of the features I felt a Webflow framework would need, removing stuff that felt extraneous, and then ordering all the necessary classes to avoid any CSS hierarchy conflicts that might break our utility class system. You have to do a lot of strategizing up front for something like this, because if you build the classes in the wrong order in Webflow, you can't fix it. (Or at least you couldn't at the time. Thanks, Finsweet!)

A few weeks later I emerged from my apartment with Knockout — so named because I was watching every Muhammad Ali documentary I could find at the time. But also because this thing really will help you knock sh*t out. This is our full treasure chest. We've used it on every Edgar Allan project for the last year, and in addition to speeding up our workflow and delivering faster results, it’s the backbone of a unified approach to development between team members, meaning different developers can hop in on any project with minimal friction.

Next, the design team stepped in. We set up a companion Figma template, built using auto-layout, to standardize spacing and components based on Knockout in order for our designs to translate seamlessly to development. This gave our design team the same head start the devs enjoyed. The result is a system that functions in harmony from design to development to client handoff.

And now we're ready to share it with the world.

Knockout exists somewhere in between Finsweet's Client-First Style System and a fully rendered CSS framework like Tailwind. It's intended to be more robust than Client First, but also far more streamlined than Tailwind. It's client-first, but it's also utility-first. Most importantly, though, it's adaptable. It's meant to be edited and extended, so we're releasing it to the Webflow community under the Creative Commons Attribution-ShareAlike license. That means you're free to remix it based on your own workflow and to share your own version with the Webflow community (with proper attribution, of course).

But there are also a number of cool out-of-the-box features worth pointing out. The class library itself speeds up the development process and largely eliminates the chore of naming classes, dealing with CSS hierarchy rules, and redundant style declarations. (Learn more in On Frameworks, our full explanation for why we built Knockout.) The conversational class naming conventions make it easy for clients to manage their site through adding and removing classes, rather than engaging directly with the style panel. Our fully responsive grid and spacing system grows and shrinks along with the width of the viewport, reducing issues where a design looks great at a breakpoint's mid-point, but too stretched out at the max-point or too squished at the min-point. It's pre-optimized for smaller viewports, so things like margin and padding automatically size down to mobile-friendly specs. And type and spacing on large viewports converts to VW units, expanding proportionately up to 1920px, eliminating the need for designs above 1440px. (Play with the browser width of madewithknockout.com on a large screen to see this in action.) There's also support for switching columns, headline sizes, image aspect ratios, or flex directions on the fly across viewports, simply by appending a tablet- or mobile-specific class. Plus lots of other little time-saving tricks and features.

So go on ahead and kick the tires. And let us know how she drives. We're excited to see where it takes you.