Refokus Styleguide for Webflow

Community resources Show & Tell
1

Hey Everyone!

Wanted to share this one over here. At Refokus we use Webflow as an implementation tool, and as such we follow implementation best practices.

Having a pre-define Style System allows us to keep things organized, keeping to our high-quality standards, and allowing our clients to scale their Website with proper guidelines.

After using this in hundreds of projects, we are now sharing it with the world.

Documentation: Refokus Styleguide for Webflow

Cloneable: https://webflow.com/website/refokus-styleguide-webflow

Have fun!

1 Like
2

Thanks for sharing this Leo - Had a look at the docs and I like what I see, very structured and I assume would really help the onboarding process.

Can I ask if there are other base class prefixes you use besides c-?

When I saw the typography classes also had this prefix, I thought these would be better suited to a t- (typography) prefix or something similar.

3

The reason is simple: standardization on the hierarchy we are using classes.

c- is the parent class, the component, and we use it for ANY type of component regardless if it is a div, p, a, ul, etc.

4

Hi Leo,

Thanks for explaining. If a system you’ve designed is working well for you then that is all it needs to do.

I come from a CSS background and liked the atomic / smacss architecture the best.

The main difference I can think of when comparing to your styleguide would be it’s use of “atoms” ie. elements.

Elements, when put together, create components.

Basically, most HTML tags were considered elements, and when combined, made components.

For example:

<p> = element
<h1> = element

Below = component

<div>
<h1>Nifty heading</h1>
<p>Subtitle here</p>
</div>
5

Makes sense, our approach is actually based on oocss (which what BEM is based on, which is what our styleguide is based on).

Atomic structures in Webflow are no ideal, as the class management is not the most versatile and it’s even harder to tell what the relationship between classes is, specially without the ability to document anything. Further more, BEM woks great with large teams and having all our development team on the same page is key as an agency. Specially if you want to have multiple developers working on the same webflow project simultaneously.

That’s why we prefer and object-oriented css where we can isolate objects classes per component, that not only have reusability in the same project but also allows us to copy them on other projects without major css architectural issues.