Webflow Style Guide + Framework

So I really enjoyed the style guide and template that Ryan made the other day, but I didn’t feel it was super applicable/useful to us webflow users, so I incorporated how I use style guides with webflow on his template - with some minor changes.

The point of this template is to utilize style chaining which I give an example on with the flex grid. This allows for very fast and unified building of pages.

Template: https://webflow.com/website/Webflow-Style-Guide-and-Framework?s=wf-style-guide-and-framework

The style guide is placed inside its own folder so you can build pages while still staying organized. Also I ran out of time, but some additional things I would do is to create the flex row styling (start, center, end, etc.) and standardized spacing (padding and margins) - you should be able to see how I do this to allow chaining.

Hopefully this is helpful to you guys. Let me know if you have any questions.

Edit: created clone-able link

12 Likes

Can you give us a link for cloning please?

4 Likes

I thought I did. Where’s that checkbox?

also, maybe put a link from the home page to the style guide page.

Done, done and done: https://webflow.com/website/Webflow-Style-Guide-and-Framework?s=wf-style-guide-and-framework

I updated the above link as well

5 Likes

@Randy Thank you so much :heart_eyes:

This is too awesome!

Glad you like it.

I’ve only recently been utilizing chaining in webflow and it’s completely changed my workflow. Here’s another example using grid + background and font color

Default screen size

Mobile landscape

Take note of: The right column doesnt have a default large screen size, it’s expanding based on the left column size (size-8) it only has a set width from tablet below as shown in the second screen shot. Also see how you can chain more classes together than just grid like background color, text color, and even spacing.

You can also add standardized spacing to this too like in the example above by creating a class that only has a set padding (or margin or whatever attribute you want). In the example above, padding-all-lg = padding all sides = 4rem

I love doing this method because when you export you wont get an insane amount of chained classes together. As long as you don’t make any edits in the UI they will be exported as global elements and not chained together keeping your code super light and dry.

Additionally - if you want to style something differently outside of the structured format do that class/styling first and then add the global class. It will all work the same.

Final note: for new people not familiar with bootstrap methodology make sure the total of all column sizes does not exceed 12, if it does it will push the column to the next row. Example size-6 + size-6 = 12, md-8+md-4=12, md-8 + md-8 = 16 (This will push the right column to the next row)

Happy building!

1 Like

Very nice and very helpful! Thank you!

Hey man can you update your link, it seems it’s not working again.

Cheers

1 Like

The Webflow link is down. Anyway we can reconnect?

Sorry, been away for a bit. I didnt notice it was down, I’ll take a look at it and get it reconnected. It may be a day or so, I’m a bit busy at the moment.

Thank you so much Randy!

Hi Randy, when I click the link it brings me to a webflow page where I can’t find your style guide. Could you please check the link, I’m very interested!

Tom

Any updates @Randy? Thanks again for sharing your work.