Hi Timothy, what is the Lumos correct way to override the gap in a flexbox for some elements? Let's say I want the buttons to be a little bit further. Should I add a top margin to the button wrapper or use a new flexbox that encapsulates it with the original flexbox as a sibling?
Hi, we would add a new flexbox div to change the gap spacing. Margin doesn't work well currently with conditional elements. So if the heading or button is hidden in some instances of the component, we can end up with extra unwanted space on top or bottom when using margin. Once the margin-trim property has better browser support, I plan to introduce margins in Lumos.
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!
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
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 :)
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.
Hi Timothy! Thanks for consistently provide great content! Short question, I just started using the Client First approach, by Finsweet, and watching this...can Lumos approach mix with Client First? I am new into Lumos, maybe they complement, or maybe Lumos takes care of the same solutions provided by Client First, but from a different perspective. Should I forget Client First when trying to implement Lumos? Thanks!
Hi, Lumos is an alternative framework with a different perspective. There’s parts of Lumos that can be copied into any framework like the grid classes, flexbox classes, or fluid code, but to get the most out of Lumos, I would recommend using it as a standalone system.
I've been using this from previous videos but thanks for a standalone video on this, always handy for reference when needed!
Oh, cool! Glad it was helpful!
I just went Super Saiyan! THANK YOU!!!
Hi Timothy, what is the Lumos correct way to override the gap in a flexbox for some elements? Let's say I want the buttons to be a little bit further. Should I add a top margin to the button wrapper or use a new flexbox that encapsulates it with the original flexbox as a sibling?
Hi, we would add a new flexbox div to change the gap spacing. Margin doesn't work well currently with conditional elements. So if the heading or button is hidden in some instances of the component, we can end up with extra unwanted space on top or bottom when using margin. Once the margin-trim property has better browser support, I plan to introduce margins in Lumos.
@@timothyricks Great!
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!
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
@@timothyricks thank you so much for your reply will look into it!
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 :)
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.
Hi Timothy! Thanks for consistently provide great content! Short question, I just started using the Client First approach, by Finsweet, and watching this...can Lumos approach mix with Client First? I am new into Lumos, maybe they complement, or maybe Lumos takes care of the same solutions provided by Client First, but from a different perspective. Should I forget Client First when trying to implement Lumos? Thanks!
Hi, Lumos is an alternative framework with a different perspective. There’s parts of Lumos that can be copied into any framework like the grid classes, flexbox classes, or fluid code, but to get the most out of Lumos, I would recommend using it as a standalone system.
@@timothyricks great! I'll try it out on my next project. Thanks Tim
Great information. Thanks for the video, man!
Thank you! Glad it was helpful!