Best Webflow Naming and Building System

if you're building with webflow for the first time or you're taking over a project from someone else in webflow you might come across a project with bad naming conventions now the problem with this is that it's messy it's difficult to work with and if you want to make a change across the site you have to go through each page and update each element individually and this usually comes out of someone who is building the site as they go and not working off of a system or reusing classes so instead of doing that i'm going to show you a really simple naming convention system that you can use across your webflow website to keep it structured and easier to maintain going forward so first thing i would recommend is having a style guide or a design system page uh something along the lines of this though it doesn't have to look this fancy it can just be a static page with the nav at the top and the foot at the bottom but this is where you're going to keep all of the different styles and the different elements that you use throughout your website so i've got in here typography the different colors that i'm using the different button styles both large and small the columns that i use for the column layouts and then the grids that are used for the grid layouts spaces to space out different elements and sections the icons used throughout the form styles and also the tab styling but you can really put in here whatever you want and whatever you're using throughout the site so the reason that you want to have a design system page is to keep everything in the same place especially if you want to make a change that is effected across the website and also when you're building new pages i can help to sometimes come back in and remember the styles or elements that you've set up that you can reuse to keep everything consistent so let's look at a page that i've set up using this system i'll look at the home page so other than the navigation uh the nav banner and the footer i keep all of the actual page content into different sections so they're all all stacked on top of each other and you know that doesn't matter if it's all the same color or not either way it makes it easier to organize the content and keep everything in line so in terms of the styling for each section i put some padding some internal padding on the top and bottom of each section just to keep it spaced out just so the contents not right up against the edges and then other than that i just add different colors which makes it easy to color that whole section and you know that no matter what the screen size is that color is going to go to the edges of the screen i've also added classes for different amounts of padding so half padding for for banners if you want a little bit less and then on larger sections you can always double the padding or have zero padding if you don't need padding for a specific section and then inside egg section will be a container and obviously this is the stuff that holds the elements and so we give it a max width to make sure that if the screen size is too large uh the content isn't going to go from edge to edge there's going to be a limit to how big it is and it also means that if the screen size is smaller than the limit we're going to give it some left and right padding just so it's not touching the edges of the sides of the screen so i've given it 50 padding on desktop and a little bit less further down just so it fits different devices a little bit better and again you'll see that everything is kept the same and again this is to make it so that if i want to make a change across the website it's going to affect everything at once and so rather than saying logo container and feature container it all has the same class so there's no point in and making different names for different sections even with the section itself it's it's much better to use a universal system-wide class name now within the container that's where we have the actual layouts so there's two different layouts that i'll use most often one is the the column layout the 12 columns and so i've built a 12 columns element and then within that i can add in whatever size columns to fit up to 12 columns so this is a 5 a 1 and a 6 which makes up to 12 and then on the different screen screen sizes it's adapted to better fit so here we can see that on tablet at six and then this one has turned into a zero and the six has stayed the same and we can change that all the way down to mobile just by adding on extra classes and then changing the width of that class to better fit the content now for the columns you'll notice that i have some padding on the inside of the columns and also on the 12 columns i have a negative margin and so the reason that we do that is to keep everything aligned with the sides while still having some space in between the columns for the content and that's when you have two columns right next to each other um there's going to be a 32 gap in between the content just so that it's not so close together now the other kind of layout that i use is the grid layout and this is for kind of this is just another way of organizing the content and i'll do it the same way as i do the columns where i use a universal grid element and then i'll just i'll say how how many columns i want in the grid for different screen sizes so it's three on desktop and three on tablet and then on mobile it's down to two and again that makes it super flexible so you can decide how many columns or what you want the layout to be on different screen sizes and you know we're not confined to a specific number we could also do um maybe even like a desk one and a two and then we can just edit that and say we want a one on one side and then we want a two on the other side so for different feature sections you can completely switch it up in terms of how you want the layout so let me just undo that back to normal and the only other elements that i use mainly throughout when i'm building pages is spacer elements and so that's when you don't really want to add more padding to a title or an element you don't want to have to add on a class that says you know 50 bottom padding you can just space it out with a spacer and you can make that size uh as big or as small as you want it so again you'll notice i have a universal spacer element and then the different sizes are depending on how much space the section needs and those are basically all of the the basic elements that i use to to build a page the only other thing is typography and i would recommend building on the default default kind of classes where you can change the the size of all h2 headings but i also would recommend having a heading and the different classes um as individual classes as well and that's so if you want different sizes down the page so we want this to be an h2 or an h3 because it's not the main content of the page like the title is but we we still want it to be big and so we're not going to make it in h1 we're going to override it with an h1 class but it's still an actual h2 element so using all of these elements let's go into a new page and let's build out some of those sections that we were just looking at so again we have the the navigation and the footer uh across the website so we can reuse those and we also have a wrapper that defines that the minimum height of the the landing viewport is going to be the full width of the screen so no matter how much content we have on the initial page load they're not going to see the footer on load which keeps it a little bit tidier and so now we're going to add in our content so we can either drag in the section or command e and add a section [Music] and then we're going to add the section class to the elements so we'll add in section or we'll click on a class and hit command enter and then do the same thing so we'll change the color of this one and then we'll add a couple of these sections down the page maybe we'll make this one white and this one green next we're going to add in containers to each section so again we can either drag it in we can hit command e to add in a container and then add the container class either by filling it in or hitting command enter and filling it in that way and we're going to copy those containers to the other sections that we've just added and now we can add the different layouts in so rather than using the built-in columns which i find a little bit limiting at times we're going to use a just a div element and give it our 12 columns name and this is where we're going to add our columns into it so we'll add in another div block and then give it the column class and since this is a hero section we'll give it a column five a column one and then a column six for the text gap and illustration so we'll make this uh five on desktop and then we'll copy that out a couple times the second one is a one and the last one is a6 and now we can add in some elements so let's add an a header to the first column or hit command e and we'll add a paragraph and now we don't need anything in the gap and we can add in something uh to the last column let's add in one of this illustration and now we want to adjust it a bit for different screen sizes so let's go down to tablet and so i've made some of them auto adjust but we can fix that so i'll make that tab six this column one will make it a zero and then this last one seems to already be a 6 and then it's going to auto adjust for mobile but i can also add another class if i wanted to switch the different elements so if i want this one to be on top then i can do that as well and so now we've adjusted that for all of all of the different screen sizes down to mobile and next we'll add in some features so this time we'll use a grid add in a grid into the container give it the name of grid and then we'll make it a 3 on desktop and we'll give this section a title inside of the container sometimes you might have to drag it in this way give that an h2 and then we'll add a spacer so command e regula div command enter spacer we'll give that 48 then we'll add in another div this is where we're going to put the content of each of the grids elements into and then we'll add in a h3 and paragraph and let's also add an a icon up top i've also set up an icon class to keep all of the icons are the same size and so now we'll copy this out a couple times and there we go now we've set up another section and we might just want to adjust it maybe for mobile so we'll go back into our grid tablet we want it to stay the same and in mobile we want to make it two columns and that's basically the whole system and that can be repeated throughout when you're building new pages and again it means that you're only using a set amount of different classes and you're not you know building a new class or adding on a new class every time you add in a new section so you know features left with right image i mean obviously that's a terrible class name but either way you wouldn't want to be able uh you wouldn't want to have to create a new class every single time you add in a new element and that's about it that's the best simplest system that i've found to build new pages really quickly in webflow

Channel: Nikolai Bain

Views: 700

Keywords:

Id: AIuadkt26Ow

Length: 12min 46sec (766 seconds)

Published: Thu Feb 18 2021