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.
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.
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
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)
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.
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!