Lumos Grid System | Webflow Framework

Поделиться
HTML-код
  • Опубликовано: 5 июл 2024
  • 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 - problems with the native Webflow grid
    02:33 - setting up Lumos grids
    03:31 - u-grid-column-2, u-grid-column-3, u-grid-column-4
    05:04 - u-grid-autofit
    07:19 - u-grid-custom
    07:46 - u-grid-custom with column spans
    09:05 - u-grid-desktop, u-grid-tablet, u-grid-landscape
    10:55 - u-grid-subgrid
    13:05 - u-grid-breakout
  • ХоббиХобби

Комментарии • 22

  • @njanadesign
    @njanadesign 12 дней назад +15

    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

  • @jessehebert8082
    @jessehebert8082 10 дней назад +3

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

    • @timothyricks
      @timothyricks  10 дней назад

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

  • @bamoj
    @bamoj 6 дней назад +1

    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
      @timothyricks  6 дней назад +1

      Haha, thanks so much!! Glad to hear that

    • @bamoj
      @bamoj 5 дней назад

      @@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
      @timothyricks  5 дней назад +1

      @@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
      @bamoj 5 дней назад +1

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

  • @pierrerobin5037
    @pierrerobin5037 12 дней назад +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
      @timothyricks  12 дней назад +2

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

  • @thomschdesign
    @thomschdesign 11 дней назад +2

    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
      @timothyricks  11 дней назад +1

      Thank you! I’ve built a lot of components with it in this video. More to come! ruclips.net/video/Q76GPu9_DnI/видео.htmlsi=d-oB9T6f4Q5DqFxn

  • @akilorosky
    @akilorosky 11 дней назад +2

    spectacular as always

  • @njanadesign
    @njanadesign 12 дней назад +2

    new T.RICKS video, I mean hell yeah!

  • @HStandard
    @HStandard 11 дней назад

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

    • @timothyricks
      @timothyricks  11 дней назад +1

      Thank you! I’m so glad this helps!

  • @DavidKathrein1
    @DavidKathrein1 12 дней назад +1

    Thanks! Great as always 👍

  • @labruda
    @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
      @timothyricks  2 дня назад +1

      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
      @labruda День назад

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

  • @dimka_tregubov
    @dimka_tregubov 12 дней назад +1

    First!🌝