Utility Flow
A utility-first framework for designers to use in Webflow.
How does it work?
A designer in Webflow might style an element by adjusting the padding, margin. She might display it as flexbox. She might make the typography in the element black. She might add a background color.
Result:
This element with a class of "example-1" now carries all of those attributes. If she uses "example-1" elsewhere and changes any of the values, they will all update. That is very useful.
It is common to want the ability to change the value of one element without changing all of the elements. Popular solutions include using a combo class or creating symbols and overrides.
A utility-first approach, however, tackles this problem from the start. Using helper classes, or selectors that carry a single attribute, and adding them to any element gives the designer the power to add values without changing any other part of the design.
Using the example above, here is how a designer might style the element using a utility-first approach:
This is an extreme example for demo purposes. In practice, for an element requiring this many utility classes, I might opt to create a custom element.
A case for using utility classes to scale design teams
A short time ago I was working on a small creative team comprised of me - a UX/UI designer - and a couple of developers. We were looking for ways to streamline our design-to-dev handoff process and have consistent and predictable results.
At the time, our process looked something like this:
- Designer creates a pixel-perfect design in Sketch with multiple breakpoint screens and delivers it through Zeplin
- Developer translates design into Wordpress
Pretty basic, right? This is how most teams operate on a very superficial level. The problem I kept running into was the "pixel-perfect" designs I saw on my screen never matched the output in Wordpress. Although I learned to manage my expectations, I knew there was a better way.
I was just starting to be interested in incorporating Webflow into my workflow and experimenting with how I could use it to deliver my designs - removing Sketch and Zeplin from the equation entirely.
At first, I only used a stylesheet to manage classes of typography and colors. As I became comfortable with the power of naming selectors, it was clear how quickly a design would turn into a cluster of overrides if it wasn't managed correctly.
It dawned on me that what I was looking for was a super stylesheet - one with pre-defined classes that carry a single value that I can add à la carte to any element. I realized that what I was touching on was a growing trend called utility-first css.
People who are smarter than I am have talked about it at length:
watch video