The Death of Flexbox in Webflow

Get the cloneable for this project (affiliate link)
try.webflow.co...
Join my Webflow Wizards Community
/ timothyricks

[@jelenajovanovic1472]

Amazing! I love your videos Timothy.

[@timdaff]

I dunno if this is the death of flexbox but interesting work! For the child flex-boxes alignment, couldn’t we just set to inherit?

[@timothyricks]

It’s a different way to work for sure, but I’m already seeing big benefits which I should probably cover in a future video. Child flex alignment can be set to inherit as long as the flex direction matches the parent. So flex align inherit wouldn’t work on horizontal button wraps.

[@matthiaspanopau]

I love these little hacks you share with us. Thank you! Isn't it sometimes frustrating to have to invest so much time to make simple layout adjustments like this by writing all these special rules? I wish we could make such things in Webflow much more intuitively and that an intelligent system would do these CSS tweaks intelligently in the background for us.

[@timothyricks]

Thanks so much! Webflow is designed to be un-opinionated so it can work with any way someone might choose to build. I think that's a great thing because it allows us to add in different frameworks that handle these intelligent things in the background for us. I do wish Webflow would open up some of its restrictions around variables though. That would remove the need for a lot of custom code and allow us to make more things natively.

[@matthiaspanopau]

@timothyricks: Good point. I agree, and certainly see the benefit of this openness to different ways of setting up and organising this set of rules, and am very grateful for your wonderful contribution with Lumos :) Coming from a graphic design background and enjoying the freedom of programs like InDesign and AfterEffects for layout and animation, I sometimes dream of a program where it is possible to set up this set of visual rules in a purely intuitive way, without sacrificing (an obsessive) attention to detail. What a true no code web design tool would look like. After all, the design decisions we make as designers are primarily based on conceptual, visual and of course structural considerations like hierarchy and order. Personally, I would like to leave the translation of these decisions to algorithms and automated processes which turn them into the abstract languages of HTML, CSS and JS. I have to be honest and say that this may be due to my lack of understanding, but I have always wondered why these in my eyes "simple" capabilities of HTML, CSS and JS cannot be translated better and more intelligently into automated rules and actions. If I have any hope for AI, beside not completely f*cking up this planet, it is that it can provide this interface that Dreamweaver once tried to be. Sorry for that outburst, but it had to be said. A question for the crystal ball: Do you see a program like the one I describe coming in the near future?

[@timothyricks]

Oh, I see! We’re already experiencing different tools coming out with various levels of abstraction. As a general rule the more abstracted a tool is, the more control we give up. I love digging into css and understanding all of the minor details because that’s my main focus. But if I was to create an animation, I wouldn’t want to understand all the complex details of after effects. I would want a tool that handles some of that stuff for me. So I think there’s room for tools with varying levels of complexity for experts, hobbyist, and others who just want something out quickly.

[@dragan516]

Hello, Timothy! First of all, thank you for everything you do. I have a few questions regarding Lumos, and I would really appreciate your answers. For example, I have a div with the class hero_wrap, and I’ve added utility classes for h-flex and gap. Now, if I want to add some CSS that Lumos doesn't have in its utility classes, like a transform rotation, is it better to go back to the hero_wrap class and add that CSS for the transform, or can I simply add that CSS while the utility classes are still applied? Which is the better practice? Why is there now a text-wrap: pretty on paragraphs in the latest version, but there is no max-width in ch units in the component settings? As far as I know, text-wrap: pretty is not yet supported in Safari and Firefox. Is there something I'm not aware of? When we have a u-grid-custom that has a main layout of 12 columns by default on the desktop version, should we set it to 1 column at lower breakpoints, or can it remain at 12 columns? Will there be overflow issues due to spacing between the columns? If I have a slightly more complicated site with colors that may be difficult to set up with Lumos embeds for colors, and I want some custom complicated buttons, can I bypass Lumos colors by simply removing the CSS embed related to colors and manually set the colors through Webflow variables, like in Client First?

[@anenglishmanyoutube]

I have been using Lumos and can answer the colour problem to the best of my knowledge (not as good as Timothy lol) You can add new 'swatch' colours to Variables. For example, maybe dark-1, dark-2, dark-3, light-1, light-2, light-3 etc. Then also add new 'theme' variables like background-2 or text-2 what you need for your design. Then in the page 'Custom Code' page_code_color you can add and reference these new values for light and dark themes. If you need another background that is dark on both themes add something like --theme--background-2: var(--swatch--dark-1); to the light theme and --theme--background-2: var(--swatch--dark-3); to the dark theme. God, its hard to explain just in words lol. Does that help at all?

[@timothyricks]

Thanks so much, @@anenglishmanyoutube! That's exactly right​

[@timothyricks]

Hi, thank you for the kind words! Great questions! 1. It's best to apply any custom styles to the base class (hero_wrap) when possible in case any of the utilities need to be removed in the future or if more utilities need to be added later. With the Lumos Chrome Extension if you press the "shift" and "up arrow" keys, it will jump to the base class for easy styling. 2. text-wrap: pretty just ensures that the last line of text has more than one word on it. It's a progressive enhancement so for browsers that don't support it, nothing breaks. The styling just looks nicer in browsers that do. Text-wrap: balance isn't always ideal on paragraphs especially for long form content like blog posts because each paragraph starts to look like it has inconsistent widths. For a single paragraph like in a CTA section, the u-text-wrap-balance utility could always be added. Lately, I've been applying my max-width directly on the rich text element and not linking it to a component field especially for paragraphs because I notice my clients and team aren't taking the time to readjust the max-width when they change the copy. But that max-width could still be linked to a component field if you'd like. 3. Yes, we always want to reduce the column count of a grid on lower breakpoints because the gaps count as space and can cause overflow issues especially with an increased font size. The new column-width variables in Lumos allow us to avoid using grid all together in many cases, they don't have the overflow issue, and are easier to work with. 4. Yes, the color embed can be completely removed if you'd like, and you can apply swatches directly without going through themes. Themes can handle really complicated colors in an easy way if setup correctly though and have a lot of benefits. For multi-brand sites, the Lumos Brand Switcher can help. webflow.grsm.io/tricks?path=lumos-brand-switcher

[@ItsEricPhung]

Amazing. Are these already applied to the Lumos Style Guide Template?

[@timothyricks]

Thank you! Yes, they are

[@ItsEricPhung]

@@timothyricks thank you Tim. I have 3-4 projects I want to use Lumos but I'm still learning all the goodies. Quite a learning curve.