How Webflow Built Their Own Website?

Speaking of cool work, another one is how was the web flow.com like the the new web flow website, how was it built? So Corey, who is on the web flow team, he's a designer slash developer, he led this project. What is interesting about it is that 15 different Web Flow projects mixing them in one. So they brought in a lot of like different separated projects in one uh project and like I believe like mixing 45 different um CMS collections and like just bringing things down and making more lean in one project using the new component system uh and also using the real time collaboration which we still don't have access to yet but they've used it to uh have six developers on this project at the same time building this giant this is like an insanely huge website all with components and they used mast mast is the framework yeah yeah yeah uh so they used mast and he shows how the component system is used and interestingly enough it's not a lot of different components because with component variations and with component um properties you can create multip multiple layouts all with one component. And to add to that, we have slots which allows you to put components inside each other. You have cards and you you just reuse them in different places in different like versions. And these render only the piece that is needed. So they don't like you don't get the entire junk in the front end when you load it. So it's super performant. It's not just showing and hiding things. because it's literally rendering only what's necessary. Exactly. It's not hiding it. It's just not publishing what you don't use. So, this video is a cool shout out um to watch to see how a huge project like this is because it's seven minutes. I wish it was longer. Yeah. You sort of want it to be like a series. Do you know what I mean? I want like a twohour version of this. Like honestly, I want two hours of this goodies. Yeah. because it's quite it's you know maybe not so much for the design but for me it's very interesting thinking the strategic side of you know when I first started doing web web development we would literally print out the website right and we would circle things and we'd create like a mind map not even a mind map like a physical map on like well um what's the word semantically this yeah component is the same as this component they just look different so how do we do we combine them do we create variations like you create a whole map of how everything is. And I'm sure they had to do that to get the most out of as little as possible, you know. Yeah. And look how lean and uh Yeah. Look at that. The the variable panel is just so lean. It's so little. It's not like crazy efficient. Yeah. It's not uh crazy. That's why I love mast by the I don't plan first. I always always wanted to do a video on mast. I always wanted to like look into it and whatever, but I just never got around to doing it. Yeah. And because like the the entire community started like using uh client first. We have to use it. But I personally like mast and mast is more developer friendly and leaner and clan first is more I don't know. Have you tried Lumos? I've watched videos on it but I haven't tried it. To me, Lumos is very exciting, but it feels a bit and I don't want to use the word experimental, but it a lot of it looks very complicated, honestly. And I am afraid of like trying to use it and not I I'm sure I will understand it. I don't think it's that complicated, but I have a I don't feel like great sharing something that complex with everyone else and like handing that over to the client. Maybe I should rethink this. Maybe I should give it a try. And I wonder what his and all of these people what what Cohen's um my is it Mory Cohen or Cory Men? Cory Cory. I wonder what their their oneliner is for these like this is the this is the design or these are the this is the style framework for you know whatever we can look at this uh so mast is a lightweight framework of essential classes components and strategies to help you build efficiently for any brand and scale in web flow they are efficient and they are web flow uh they are developer uh friendly and they are based on The idea of mast is based on bootstrap. Interesting. Are you familiar with bootstrap? Yeah. Which is very interesting because bootstrap is is kind of dead and it was bloated and horrible. Yeah. Yeah. But you know laid the foundations of of a lot of what we do today. The componentiz you know components really started with bootstrap. Yeah. So try to do less um try to do more with less CSS. Anyway, I again I like it because it's more developer friendly um and more leaner. Uh if it's leaner at the start, it gives me more freedom to to add whatever like system or class that I want on top. This sounds like a good idea for a video for you as well though is this idea of like taking mast taking Lumos, taking client first and saying this is what it is and this is why it's good. Um who who is that must sell guy? He small, medium, large or something. He had one that's um that looks like he's working quite heavily on that. Have you heard that one? No, I'm not sure. Like I know there are like other frameworks as well. Yeah. But just like again establishing those oneliners based on your experience like this is great for the just it's a lot of research to be fair but yeah would be very helpful because people probably are looking at all these frameworks and be like which one is good and why would I use this one and how do I know it's going to be right for me. Yeah I think to me to me masters it seems like to be the middle ground that is lightweight and simple enough that I can hand to another developer and understand it. uh client first had this idea to share it with your clients, but I never I understood why why why would I want sorry fence team but why would I want to share like the designer the classes with my client they that's that's amateur designers which we all were at one point thinking this is a good idea thinking oh yeah they won't but then you get more advanced in your career and you learn that No, like we do not want they they they shouldn't want to. They should focus on what they're good at, not and they're hiring me to be anyway, whatever. And and web is nowadays amazing at being good for um like low and non-technical user. So, as a developer, I can build this beautiful like component system. These green things that you see on the screen, these are components. Yeah. And you can now put these inside of each other and any non-technical people can do this because you have a component that is a button and you put it wherever you want. Well, not exactly wherever we want. You want wherever I as a developer allow you to. So there is less chance of you breaking the design. And if even if you do, you can it's like Lego blocks that you can pull out and like put back together any how you want. So yeah, client first. H I'm not a big fan honestly, but we use it. We use it because the the the entire like ecosystem. Anyway, this is part of a larger conversation on my show Command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter.