Learning Finsweet first was a mistake. This is where I should have started. Less divs inside of divs and a few good utility classes make this a lot more approachable for newbs. Especially since my first few clients just needed simply marketing sites with 5 pages max and maybe a CMS. Other naming conventions and systems were overkill for me and slowed me down. Those will come in handy as I grow, but for now this will reduce overthinking and give me that speed boost I need during development. TY!
When I started using Webflow I dived into finsweet and it was so frustrating. I felt like i'm building under limitation which made it really hard for me to progress. Finsweet naming system is for intermediate.
@@Cs2GamiNG Intermediate I think might be the wrong word. Its really depends on the type of project and size of your team. For us solo "teams" this convention can be used at mastery level. Now wouldn't be nice if Relume used this naming convention instead of Finsweet?
Thank you so much for your clarity, Timothy! I've been designing with Webflow from 2017 to 2020 and then left the web design space altogether. I am getting back to it this year (2024), but I found these new Finsweet and utility classes confusing and don't like how bloated they make the hierarchy tree. This lesson finally helped me sort out and focus on the essentials of utility classes. This is a priceless re-skilling lesson on the latest "good practices." Thank you!
This video helped me a lot, thanks Tim. Would love if you made more of these build along videos. The other video I watched of yours was the "Remarkable" build. I tried following along, but a lot of things were going over my head that I didn't understand. I would love to see a video that shows how to use all those very useful Lumos tricks with custom code, but crafted for a beginner audience. Thanks.
These short tutorials have been a godsend for my learning. The clear detailed explanations have helped me through some mental roadblocks I have created for myself. I really can't thank you enough!
Timothy, you have a way about you when explaining concepts and process that cuts through any issues and clearly communicates... thank you for sharing your expertise!
Thank you for this. I'm not new to Webflow, but I haven't used it in awhile, and the nuances of the updates definitely flew over my head. Thanks to this, it doesn't feel overwhelming, and I feel like I can get back into it. You're a lifesaver.
Please make more tutorials like this! Very very helpful. Even if it were a series that was paid for I would 100% subscribe to that. I feel like in order to understand how lumos works and is set up, this basic knowledge is of course essential. You are a webflow genius.
I love how you take your time to explain every important bit. Also your designs are so incredibly clean, absolutely love it! One question tho, what is the reason you put the 'hero container' before the 'u-container'? 10:17 Thanks in advance!
Thanks so much!! If we ever need to add more utilities later, it’s helpful to have the custom component class first with any of the utilities stacked on top of that. For example "hero_contain u-container u-height-full". Having the custom component class first also allows to rename any of the utilities stacked on top to update every instance of that component. It’s best to see that part in action here. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8RBs278onMA.htmlsi=X78EfXG6lptzPDpa
I'm just starting with Webflow - based on other comments, sooo glad I found this specific video first to ensure my basic foundation setup is correct. Didn't realize how important naming convention is. Thanks!
Oh, awesome! I’m glad you’re starting with Webflow. Webflow has some specific ways it handles classes. This class naming video covers some important details that I wasn’t able to go into in the crash course. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_H7VoBSpsgs.htmlsi=zc1efuGsjRkywRyE
@@timothyricks since your reply, I've been deep diving into Lumos etc. Great stuff you've put together! :) Do you have a video that walks through how to actually use/integrae Lumos framework (ie preset variables panel, custom components, etc)? As in, once I start a new site on Webflow, am I launching an app (didnt see one for Lumos) or enabling Lumos chrome extension etc? Thanks!
@@timothyricks Hey Tim, since youre reply I've been deep diving into Lumos :) Great stuff you've built ! Question tho - do you have a video that walks through how to actually integrate the Lumos framework in (preset variables, custom components etc)? Meaning how to implement it when starting a new site build on webflow (simply going to variables and updating font family, spacing values, etc). Should I be launching an app in webflow app panel (didnt see one for Lumos) or do I just enable the chrome extension? As a noob, it wasn't as obvious beyond those. Hope that makes sense - thanks in advance!
This is so helpful Thank you I've been following your content for awhile now but a lot of time's it's over my head or seems to completed for someone like me but i try and learn and tuts like this help the folks like me who need a little more basic teaching so Thank you so much.
I've been using Webflow for a few years now, but I learned some helpful new tips. I didn't realize that using 100vh Min H versus 100vh Height would screw with text sizing. Can you also explain the rationale behind using em versus rem on Max W when it comes to text within the div? Thanks again for all of your helpful and insightful videos!
Oh, awesome! I’m so glad this helps. If we used a rem max width on the text, we’d have to adjust the max width each time we change the font size to get it lined up in the correct place again. But if we use an em max width instead, we only have to set that max width once, and it will automatically scale each time we adjust the font size.
This is great! I would love to see a mobile menu build! I feel like you have a lot of advanced tutorials on this on both RU-vid and Patreon but a simple one would be great to see!
Hi Timothy, nice tutorial! I would love to see a course about size and responsive layout and typography combined in one large video instead of picking up one by one.
this is the best beginner webflow class i've taken by far - simple with a focus on core principles - the utility classes (u-container and u-header classes) made so much sense at the end when we could change all the utilities across all the breakpoints - thanks so much T.Ricks!!! - one quick question... do u ever use the components feature much in webflow? why or why not? thanks again!
Thanks so much!! I’m really glad this helps. The focus on core principles was definitely the goal so it’s great to hear that came through. Components are super useful for maintainability and faster workflows. I’ve built a whole Webflow framework called Lumos with the utility classes and components I recommend for every project. lumos.timothyricks.com
@@timothyricks wow thanks so much for the reply and sharing the lumos frame work!!! definitely my next webflow class, exactly what i've been looking for!! 🙌😁
There’s a lot of advantages to this for everyone but especially for advanced users. One of the biggest is renaming the combo class to switch the style like shown here. ru-vid.comAXxZ_4DCJtI?si=PFph9Q6nIgcHO5L2
@@timothyricks That is smart if you want to use it again and make changes to utility class, would love to see more tutorials like these and design systems. What do you think about the client first system?
good tutorial mister, but i have a questions... what if our websites displayed in larger breakpoint/larger screens ? is the REM's unit typography still responsive ? i still remember the curch tutorial that you make several years ago, i still used that technique ( vw & ems ). But latlely you always use rems...
Thank you! Using VW for font sizes without a calc causes some accessibility issues because the user can’t adjust the font size. But we could remove the max width from our container if we want a full width site. And it’s possible to add fluid type in an accessible way.
Absolutely fabulous lesson. I wish I were as knowledgeable as you are with this software. I have a question for you Timothy: do you think it would be possible to create a web site using only the viewport height? And by that I mean NO scrolling whatsoever...? Also, are you sure you didn't invent Webflow?
Thank you for the kind words! It’s possible to set font sizes, spacing, and everything else using VH so that everything scales with the browser height, but it wouldn’t be accessible or allow the user to adjust the font size. It’s better to set a min-height: 100vh and let the text push the section to taller if needed. We can still create great experiences that fill the browser height and don’t scroll for most users but are allowed to scroll if the section needs to be taller for some users.
@@timothyricks Hmmm...hadn't thought about that. That's why I reached out to you. I'll try to work out everything in the next version of my landing page as you suggested, and make it responsive, which I imagine won't be a party. But I really love the concept of having minimal-to-no-scrolling, so I'll persevere. Thanks Timothy, you are a rock star, and I don't care what Paul Stanley says.
This is amazing! Thank you so much! I'm learning Webflow as I build, but I'm always afraid if it is going to leave some gaps in my knowledge. To have a structured video like that is GREAT! I have only one question tho. Since I'm used to Figma, I tend to create a lot of Flexboxes and not use Grid or width on text blocks, for exemple. But the thing is that this workflow creates a lot of "useless" div's just for flex. I know this is not good because the code gets longer, right? When I need to separate components, like 2 texts for exemple, is it better to just give a margin for that componet's class or to wrap them in a div and use the gap in flex?
Thank you! Learning by doing is the best way so keep it up! I recommend using flex gap instead of margin whenever possible. Collapsing margins can be inconsistent if their parent switches between block and flex. Flex gap also works better with conditional elements when using the cms or components. It does create more css though to apply flex and a gap instead of just applying margin. But we can use utility classes to speed up this process and create layouts without adding extra css. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rdNSE7utdl8.html
Yes, an EM gap would be based on the hero_contain font size so it would change when the body font size changes. But it’s hard to maintain a consistent spacing system when the spacing is based on heading and paragraph sizes. I prefer to use REM spacing variables for gaps instead, and the variables can be automatically responsive or even fluid.
Thank you very much Tomothy for this guide, excuse my English, I'm using Google translate. I just don't understand the division part, for example to get 90 rem, why 1440/16? why 16 and not another number? thanks
Hi Sebastian, great question! The default font size on the html element in most browsers is 16px. The user can always change that default font size from their browser settings to make everything larger or smaller. So in most browsers 1rem is 16px. 90rem (90 x 16) is 1440px.
Hi Timothy, I have a comprehension question. You have created a utility class (u-container) and assigned values. In the next step, you name the individual sections and also add u-container as a combo class. here you then change values (e.g. the padding). I always assumed that if I adjust/change the values in u-container, this would affect all elements. In the example, the values of u-container remain unchanged . .u-container { max-width: 90rem; padding: 6rem 2.5rem; position: relative; } .nav_container.u-container { padding-top: 2rem; padding-bottom: 2rem; } Have I misunderstood something? Is it a peculiarity of Webflow or do I simply still have large gaps in the CSS?
Hi, good question! This isn’t a peculiarity of Webflow. It’s how CSS works. When styling the u-container combo class on the nav_container, we’re not styling the global u-container class. Instead we’re only styling the combination of those two classes together. Any styles we apply to the combination of those two classes overrides the related style coming from the global u-container class. But we can still style the u-container class when it’s not used as a combo class to affect every container.
@@timothyricks Now I have understood it. I tried a bit with Webflow and Codepen and then I had an epiphany :-) My previous history with Wordpress, Bricks Builder and Automaticss got in the way a bit. Because here you stack existing classes, but don't generate combo classes. I was always under the assumption that they are combi classes. If I then adjusted something in a class, it affected all elements. With Webflow I was also under this assumption. Now I have tried it out and seen that when combining the classes "hero_container" and the u-container" another one is created, the combo class ".hero_container.u-container" and thus the existing values are taken over and the additional values from the combo class are added. Since I only saw the two classes in the panel in Webflow ("hero_container" and the u-container"), I always assumed that the classes were stacked as in Wordpress/Bricks, but by adjusting a value in u-container, the combo class is only created for the respective elements. With Wordpress/Bricksbuilder, I can't just create it in the builder like with Webflow, but create the class manually. Thank you Timothy, that really helped me a lot.
hi tim, im a patreon member for this month only. i will resume my membership later as i skill up. is setting navbar position absolute with a high z index best practices? thanks.
Oh, cool! Thank you for joining! For the navbar z-index, there's no right or wrong number. Apple uses 9999. MailChimp uses 500. I find 1,000 to be an easy to remember number. It allows me to put modals that should be under the nav at a z-index of 999 and modals that should be above the nav at 1,001 while still leaving plenty of space for in-between elements.
@@timothyricks Thanks for the reply. sry, my question wasn't stated accurately. shouldn't the navbar be treated as a section? so let nav stack on top of hero, and then contents, and then footer. is there a specific reasoning the navbar is in absolute position and not in the normal document flow? looking forward to tonight's meeting! thank you.
@@sltho Oh, I see! The navbar should be its own section but with a tag "header" or "nav". Under that should be a div with the tag of "main" that holds all of the sections like the hero and other sections on the site. And under the main element should be the footer. This is structure is for screen reader users to be able to quickly skip past the nav to the main content of the site. If the nav should overlap the hero for design purposes, we use position absolute or position fixed since a nav shouldn't be placed inside the hero.
Very good video. Not often I look at videos for 30 minutes straight, even after having slept only 4 hours. Very good video. I'm going back and forth between Framer and Webflow but I think I need to give Webflow another go, thanks to this video.
Hi Timothy, I'm looking for your help. Do you have any classes or explanations that show how to name each section in Webflow? That is, each section that is created should be named, basically also how to manage the classes. Thanks
@@timothyricks Thanks Timothy. I'm starting a project and I want to learn how to use the Lumos framework, but I have no idea where to start. Do you have any videos where you start from scratch or from the beginning? Is Lumos for people with more experience?
@@sebastiancarballo9318 Glad to help! I created a video series that covers everything about Lumos. It's geared towards intermediate Webflow users, but I've seen some people who are new to Webflow have success with it also. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_H7VoBSpsgs.html
Hi, I deleted the heading element, but the changes I applied to the class were still saved since that class was used on all headings throughout the site.
So glad this helps! My class naming is loosely based around BEM, a popular class naming convention. I've adapted it for Webflow though into my own framework called Lumos.
This is sooooo helpful! Can you make a similar crash course for animation basics and maybe use this same website and pick up where you leave here?? I am starting webflow and this is literally the easiest tutorial I have come across. I would really appreciate if you could make a part 2 with animation basics🙏💓🙌
I’m so glad this helps! This one uses a different design, but here’s my animation basics crash course. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EAULGemUobc.htmlsi=1u2RVXZuSYMA3acw
I now understand a utility class is something used sitewide and classes with underscores are specific. I know this is dumbed down because I’m learning the whole Lumos system, but it’s perfect for the first step into it. I’m going to rewatch and follow with my own version again and again until it’s embedded in my head. Thank you so much.
We can’t natively style the nav tag or style by ID in Webflow. So class names are usually the only option apart from a few tag types. It keeps the process clear and consistent and makes elements easy to target with custom code.
