Lumos Grid System | Webflow Framework

[@njanadesign]

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

[@TonySossong]

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]

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

[@TonySossong]

@@timothyricks thank you!!

[@jessehebert8082]

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

[@timothyricks]

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

[@pierrerobin5037]

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

[@timothyricks]

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

[@bamoj]

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]

Haha, thanks so much!! Glad to hear that

[@bamoj]

@@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]

@@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]

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

[@thomschdesign]

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]

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

[@akilorosky]

spectacular as always

[@austinandriese]

This is insane Tim! Stoked to give this a try 👏🏼

[@timothyricks]

Thanks Austin! Please let me know if you run into any questions along the way.

[@njanadesign]

new T.RICKS video, I mean hell yeah!

[@MaxWeir]

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

[@timothyricks]

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.

[@HStandard]

I am really impressed. Thank you so much for the valuable content

[@timothyricks]

Thank you! I’m so glad this helps!

[@DavidKathrein1]

Thanks! Great as always 👍

[@timothyricks]

Thanks so much!

[@FloNocode]

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

[@labruda]

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]

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]

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

[@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! 🙏

[@Sarah-Kylie]

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]

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]

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

[@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.

[@benjamin.lhuillier]

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]

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.

[@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! ⚡⚡⚡

[@magdasok-f2i]

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]

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.

[@JOSECASTILLO-r1i]

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

[@timothyricks]

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

[@Ali_UX_Desinger]

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

[@dimka_tregubov]

First!🌝