Lumos Flexbox System | Webflow Framework

Get the Lumos Cloneable (affiliate link)
webflow.grsm.io/tricks?path=l...
Lumos Docs
lumos.timothyricks.com/
Join my Webflow Wizards Community
/ timothyricks
00:00 - Flex Gap vs Margin
00:51 - Benefits Of The System
01:32 - Using The System
03:39 - Class "Already Exists"
03:51 - Overriding Styles On Mobile
04:22 - Flex Child Styles

[@divonci-world]

I've been using this from previous videos but thanks for a standalone video on this, always handy for reference when needed!

[@timothyricks]

Oh, cool! Glad it was helpful!

[@DANNFIGDESIGNS]

I just went Super Saiyan! THANK YOU!!!

[@justinromano1989]

Great information. Thanks for the video, man!

[@timothyricks]

Thank you! Glad it was helpful!

[@timigubernu6121]

Great video! But i was wondering how can i get access to these classes? Just stumbled across your channel a few days ago! Do you have a video where do you set them or something? Thanks!

[@timothyricks]

Thank you! For the flex class, we could copy the div that holds them on the style guide page and paste them into any project. This is part of a larger framework I created called Lumos so it’s better to start a new project by cloning the whole framework when possible so that the variables and components transfer over also. webflow.grsm.io/tricks?path=lumos-v2-beta

[@timigubernu6121]

@@timothyricks thank you so much for your reply will look into it!

[@pierrerobin5037]

That's awesome! Thanks Tim.
Little question then: What to use GRID vs FLEX and when? How do you use them? I use flexbox for almost everything except a repetitive grid of items like a blog feed. Not sure how you would use those systems :)

[@timothyricks]

Thank you! As a general rule of thumb, I use flex when the size of children should be based on the size of their content. Example: a list of nav links. Some links will be wider or more narrow depending on the length of the words inside them. And then I use grid when the size of children should be defined by their parent. Example: a heading that spans two of three columns with a paragraph next to it that spans one of three columns.
Grids are great for visual consistency and alignment across multiple sections. A lot of designs are even designed on a global 12 column grid.