Lumos Grid System | Webflow Framework

Рет қаралды 6,261

Күн бұрын

Пікірлер: 51

@njanadesign 3 ай бұрын

what I love about Tim, not only does he know by heart the tools and the framework things he built, but he makes these flawless tutorials that he practiced a couple of times, and when you're watching the video, you know the guy is not going to waist your time and will give you the most valuable things that you'll need. Kudos and congratulations! you never failed to deliver the best of the best

@thomschdesign 3 ай бұрын

this looks really great! are you planning on doing a video on something like building a navigation, menu or simple, fast components - all with lumos best practices in mind? thank you very much for your hard work, you push the boundaries of what one can do with webflow ❤

@timothyricks 3 ай бұрын

Thank you! I’ve built a lot of components with it in this video. More to come! kzbin.info/www/bejne/h2iZeIOrbsR3pKssi=d-oB9T6f4Q5DqFxn

@pierrerobin5037 3 ай бұрын

Okay this is a lot, lemme watch this about 7 times again. But I already know it's a great system! Thanks Tim

@timothyricks 3 ай бұрын

The grid system is probably the most in depth part of Lumos. 😄 Thank you for the kind words!

@jessehebert8082 3 ай бұрын

I’ve been completely overlooking the subgrid and desktop/tablet/mobile utilities. Sooo helpful! Thanks for this 🙏

@timothyricks 3 ай бұрын

Oh, awesome! So glad this helps! The breakpoint grid utilities are newer additions.

@FloNocode 15 күн бұрын

Hello Timothy, with lumos, when you have already made a video from scratch or you are building a complex bento grid site with interactions when hovering over the element or other. I heard that Lumos makes it easier to make bentos but I would like to understand how to make bento sites with advanced animations on webflow but I can't find any content

@Ali_UX_Desinger 26 күн бұрын

Tim for PM this time ❤ I really want to join your patreon but little expensive , do you have any promotion going on? 😜

@njanadesign 3 ай бұрын

new T.RICKS video, I mean hell yeah!

@benjamin.lhuillier 2 ай бұрын

What would be the best way to have max width on my titles ? Is it to use a custom grid on the parent and a u-column-6 on the children (the title) for exemple ? Or is-it better to apply directly a max-with 20 ch on the children (the title) ?

@timothyricks 2 ай бұрын

Oh, good question! I always put a ch max width on titles because it helps lock in the ideal line wrap, especially if the container max width changes one day or fluid font sizes are added. In addition to a ch max width on the heading, the heading’s parent could have a u-column-6 if we’re trying to align the end of the heading visually with some other elements in our design. But if there’s nothing next to the heading, I usually find it’s better to let it fill all 12 columns because it maintains the ideal line wrap for longer on smaller screens and just overflows into the other columns.

@benjamin.lhuillier Ай бұрын

@@timothyricks Thanks for the answer :) Another question, Is it possible to reduce the external grid margin ? The two parts outside of the grid (left and right). If it is possible how to do it ? I'm working with Lumos for the first time, so convenient to build consistant and fast websites.

@timothyricks Ай бұрын

@@benjamin.lhuillier Glad to help! In the Webflow Variable panel, there’s a padding-horizontal/main variable that controls that left and right spacing.

@akilorosky 3 ай бұрын

spectacular as always

@bamoj 3 ай бұрын

Okay Tim, please let me catch up haha. This is probably the most flexible way to build a layout, and yet still maintaining a consistency. Thank you, Tim!

@timothyricks 3 ай бұрын

Haha, thanks so much!! Glad to hear that

@bamoj 3 ай бұрын

@@timothyricks It should've been us who thank youu for making this neat system! Btw, I notice, now you have 2 way of managing responsiveness, 1st is the adaptive, and 2nd is the Fluid. Which one of these 2 that you're often use? and why? Sorry for asking too much lol! Thanks again sir Tim!

@timothyricks 3 ай бұрын

@@bamoj I love the questions! I use fluid now because it makes the sizes between breakpoints look better. Like right before the tablet breakpoint, things don’t look as cramped with fluid enabled. Fluid is also a better experience for people who use zoom because the font size consistently gets larger with each zoom. With adaptive sizes, zooming in can actually make the font size smaller when the zoom crosses between a breakpoint, and then the user has to keep zooming to bring it back up.

@bamoj 3 ай бұрын

@@timothyricks Ah that make perfect sense, I feel like Fluid is better too. Thank you so much for such detailed answer!

@dimka_tregubov 3 ай бұрын

First!🌝

@JOSECASTILLO-r1i 2 ай бұрын

Hey Timothy, I'm new to webflow, where can i get access to Lumos (code) for enabling other site builds?

@timothyricks 2 ай бұрын

Hi, the Lumos Cloneable has all of the code, variables, and classes needed for this. It's best to start a project by cloning the Lumos styleguide when possible since it's much more time consuming to rebuild Lumos into an older project. More info on that here. lumos.timothyricks.com/docs/faqs#how-to-add-lumos-into-an-existing-project

@stevenlee6353 Ай бұрын

Hey Tim, is using a large column span size a better alternative to manually changing the column length for a grid that spans a lower column size?

@timothyricks Ай бұрын

Hi Steven, are you referring to columns that contain text? If so, I like to keep the column size as wide as possible on desktop to give space for the user to increase their font size and so we don't have to adjust it as much on mobile like you mentioned. Each text element can have its own ch max-width to prevent the text from getting too wide.

@TonySossong 28 күн бұрын

With every video I am absolutely mindblown how good this is. I am constructing my first full client site using Lumos and these videos are absolute lifesavers. I am so inspired watching them and motivated to build awesome sites with Lumos. Thank you so much for your hard work and exceptional explanations Timothy!

@timothyricks 28 күн бұрын

Thank you so much, Tony! This is really encouraging to read. Great luck with your next project!

@TonySossong 26 күн бұрын

@@timothyricks thank you!!

@Sarah-Kylie 14 күн бұрын

Hi, this is super helpful. One thing I don't yet understand, though, is how you have created the gray numbered 12-column grid. In these tutorials, you specify how to edit the spanning elements, but I cannot figure out how to set up the grid in the background of the elements you are editing. Does that make sense, and is this a native Webflow feature or part of Lumos? Thank you!

@timothyricks 14 күн бұрын

Thank you, Sarah! I'm glad this helps. The grid guides in the background are a part of Lumos. If you look at the Grid Guides component, you could see how they're setup. The guides are built out of divs and set to position fixed so we can quickly check to ensure sections are aligning with each other.

@Sarah-Kylie 14 күн бұрын

@@timothyricks Thank you so much! You are a life saver

@MaxWeir 2 ай бұрын

That's a amazing, plan on converting a client site over to Lumos

@timothyricks 2 ай бұрын

Thank you, Max! Great luck with converting it over! Copying the page_wrap of the styleguide page should bring most of the classes over. Webflow will unlink any variables attached to elements though so classes like the container and gap classes would need to be relinked manually. The CutCopy Webflow App can bring the variables over into an older project, but for now the components have to be recreated manually. Hopefully Webflow Libraries will improve bringing components over into an older project.

@LukeHallickII Ай бұрын

Hi Tim! I'm struggling with subgrid when trying to space elements within the subgrid. For some reason everything aligns perfectly until I apply a utility spacing class to the subgrid element. Once I apply the "u-gap-large" class to my subgrid element, the children elements no longer align to the main grid properly. I can use top/bottom margin to space the elements within the component but wasn't sure if I'm doing something wrong when applying the u-gap utility. I've also thought about using a max-width instead of subgrid but I'd like to do it "the right way."

@timothyricks Ай бұрын

Hi Luke, currently we can't edit the column gaps of the subgrid without breaking the alignment, but the row gaps can be edited freely to adjust the vertical spacing. The latest version of Lumos even has utilities for adjusting just the row gap without affecting the column gap like u-gap-row-large.

@LukeHallickII Ай бұрын

@@timothyricks Aaah. The row gap utility is just what I need then. Thank you for the response! ⚡⚡⚡

@michelehimself Ай бұрын

Hey Timothy, first of all thanks for creating that Framework and giving your knowledge away for free, this is so helpful. I am trying to learn Lumos now to build my own website in Webflow and wanted to ask if it's possible to change the width of the 12 col grid?

@timothyricks Ай бұрын

Hi, thanks so much for the kind words! I’m glad this helps! In the Webflow variable panel, max-width/main controls the max width of all containers throughout the site. And padding-horizontal/main controls the left and right padding on all containers. The grids just fill the remaining space within the container.

@michelehimself Ай бұрын

@@timothyricks Fantastic, thank you so much! I did expect an answer but not that fast, you're a true wizard! 🙏

@magdasokolovic 2 ай бұрын

hi Timothy, thank you for your great content! Do you know if I can become a Webflow Expert if clone your Lumos framework and use it as a base for my cients' sites? I need to submit 3 clients' sites without using Webflow Templates. Thanks in advance. Magda

@timothyricks 2 ай бұрын

Hi, good question! I just looked through the grading rubric and the only thing that stood out to me was this. "Combo classes don't go more than two levels deep." It’s possible to build a Lumos site with no more than two stacked classes per element, but it might require not using the flex classes or adding extra divs to meet that requirement. experts.webflow.com/partner-program-grading-rubric

@rodivilin Ай бұрын

@@timothyricksThat is just one of many criteria. I believe that if everything else is done well, it will not play a big role.

@labruda 2 ай бұрын

Great resource, Tim! What happened then with the “old” classes: gd1, ct2… etc? I’ve been using Lumos for my new projects and those are the ones Ive seen in the project. Are those outdated?

@timothyricks 2 ай бұрын

Thank you! Those classes were part of Lumos V1 before Webflow released custom css properties making this all possible natively. The Lumos V2 cloneable uses all native classes and native Webflow variables. Lumos V2 Cloneable (affiliate link) webflow.grsm.io/tricks?path=lumos-v2-beta

@labruda 2 ай бұрын

@@timothyricks great! Thanks for the clarification, Tim. I'll have to now get used to the v2 haha