Implementing utility first css approach in webflow?

Also, if people wonder why some of us are obsessed with utility-first CSS… I did a talk on my journey from BEM to utility-first CSS last year, you might find it interesting!

3 Likes

If you have an ongoing webflow project with Utility-First CSS approach, could you please share the read-only link with me so that I can learn more, if its not too much to ask for?

lol i don’t. that’s why i made the thread. i was trying to find someone who has.

1 Like

yup…here is an example of how tailwind implements it: Responsive Design - Tailwind CSS

awesome!!! i’m going to check your talk out. thanks for posting it.

Actually there is one huge caveat to this whole system due to Webflow feature that I forgot about. Here is my topic on the matter. I am not sure I agree with this implementation but that’s how it is currently :frowning:

This means you will have to be absolutely sure your naming convention is correct from the start

for those of you looking to build out a system with utility classes, i came across this excellent resource for creating them in webflow. the whole series is excellent as well.

https://www.edgarallan.com/courses/webflow-for-teams/utility-classes

6 Likes

Now, I was really looking forward to implementing a Utility-First approach and was ready to build a page that has a list of all common utility/global-classes which I could use. But then, I just came across these on webflow university:

We do not recommend using global classes as combo classes as there can be inheritance issues that can break your design across your project.

^ Why not? Is it because of a technical issue?

But, it’s not recommended to create more than one combo class since it gets hard to manage the inheritance of multiple levels of combo classes.

^ Again, why not? Isn’t this exactly how a Utility-First approach works?

If you see yourself wanting to make even deeper variations it’s best to duplicate a class which creates a new separate class with all the stylings of the original class

^ Is this webflow’s recommended alternate way?

Link: Classes - Webflow University Documentation

I spent some time playing around with building out a design system based around the tailwind css utility classes. I never fully finished it but decided to make it cloneable a few days ago. Figured I’d post it in this thread in case anyone wants to take it for spin, finish it up, remix it, etc.

https://webflow.com/website/davida-design-system

I’m still holding out for whenever we have better control over global classes to really build out my system and use it in production. I think with the recent changes in symbols and the upcoming ones are setting the stage for future development in this area.

1 Like

The one set of classes I found to be extremely useful is a set of margins on all sides with modifiers of huge/large/normal/small/tiny and set sizes. This is one the most often used classes that I add all the time to all the elements. That and robust grid system are a must.

1 Like

Thought I would share this. I have a never ending project that is supposed to be a framework/startup for most of my projects. Feel free to clone or do whatever you want with it. For me it’s very useful, especially the grid and all sets of padding and margin (nearly finished). https://webflow.com/website/Real-Estate-Framework

2 Likes

A work of titanic proportions, haha

Funny you mentioned that. I was actually just reading an article today that dug into some of the coding practices for facebook. One part of it showed how facebook is using vertical spacers instead of margins. I use horizontal spacers instead of margins often but hadn’t built out vertical ones. I think I am going to explore adding them to my system.

There was another similar article floating around last week about not using margin for spacing as well. Basically the idea is to encapsulate the spacing inside of components so that they do not affect other components when placed on a page.

Here is the facebook article in case you are interested.
It is the second section " The Use Of Spacer Divs Instead Of Margin"

2 Likes

Cool! Thanks for that! I always love me some new techniques to try that would completely change my regular workflow, haha

1 Like

Can you point out that particular article? Yet to see a large advantage of using separate divs for spacing

Sure. Here you go. Margin considered harmful

1 Like

no problem. also his blog in general is really great.

Also for my stack spacer components in webflow, I was originally using divs and adding margin-bottom to them but have move towards using height instead. This is so that the empty divs actually show the correct space in the designer without having to choose the “hide empty elements” setting which isn’t persistent.

Interesting new point of view! Thanks for sharing! There is at least one problem that I thought of when reading: when I have a certain margin size applied to numerous elements I can easily change it in only one place. With multiple divs stacked approach this will require removing or adding one from/to the stack everywhere which is really bad sometimes.

edit: but I agree that margins are destructive to layout sometimes. When using grid structure where every grid column is encapsulating everything there is no fear of some module breaking out of the structure I think, and margins used on, say, headings and font blocks aren’t that bad.

1 Like

Agreed. This approach only works well with components (i.e symbols) that you can modify in one instance and reflect all iterations of the component throughout. Or if not using symbols, then smaller sites (less than 10 pages) that making changes isn’t as cumbersome.

I also typically don’t stack multiple divs. I have different size divs based on the spacing used in the original design. I’m a designer as well so this approach makes perfect sense to me since when I am designing I’m already using some kind of baseline grid based on a multiple (typically 8).

1 Like