BRICKS Framework
Build High-End Websites from Figma to Webflow
5 followers
Build High-End Websites from Figma to Webflow
5 followers
BRICKS is a scalable Figma-to-Webflow framework built for teams. Designers design with clarity, developers build with structure, and marketers edit with ease — all in a clean, variable-based system.
Congrats on the launch @tinemaher .
What, if any, is the difference between BRICKs and Lumos, CF, and/or MAST2.0?
Hi @matt_evans3 👋 really nice to hear from you and love your question 🙌 but forgive me, the answer will be quite a journey haha I myself worked in Client-First, as Finsweet was clearly the go-to, with their documentation, code snippets, github repositories (love project starter) and all in all quite established community and ecosystem.
While looking at Client-First, their system and especially at the end the style guide in Webflow, in my experience.
Looking from a dev perspective:
It has way too many classes, most of them I never needed, it is heavy
It is mostly based on changes made manually to Style Guide itself, while only leveraging Webflow variables for colors?
When doing it by the rules, there's way too much over-nesting of div's, creating a div carbonara 🍝
The workflow isn't as streamlined as it seems. at first
Looking from a brand and marketing perspective:
It isn't enough editing/build-friendly, although it's called Client-First, it should be called Dev-First, as it really aimed for simplifying things for developers and not the marketing and in-house teams from companies who'll be actually using their websites. The actual people using the product need easy to edit components, that make either editing or building new simple landing pages easy and fun. Teams should rather think about their brand messaging, core-value propositions, SEO, target audience, quarterly goals, ROI and things that drive investments and growth, rather than how to create a landing page that looks, feels and performance-wise is the same as for example a simple lading page build (main section with cta, marquee, features, testimonials, faqs, cta and footer) from a third-party agency-freelancer or studio.
I could go on with little things, but at the end it was build by engineers to do a job efficiently, develop scalable websites fast and with ease. After getting to know client-first, got myself in Lumos, really appreciate Timothy Ricks , so if he sees this comment caps down, to the guy who made me fall in love with Webflow!
Lumos for me was a game-changer to how I looked at the Webflow Designer, use of custom code, custom properties, custom attributes and Webflow Variables. The workflow was way more efficient and fun to build with, than finsweets client-first. I also love how Lumos handles components, and it makes it easier to edit for marketers and in-house teams, but I was still missing something.
Theming and buttons are handled great, but I still need more colors, a brand designers approach. Nuances are in little details.
Although organization of the brand feel, website style and structure was mostly moved to variables, having 9 collections is way too much.
The way the variable collections are organized, I found myself sometimes lost within them, at the end leading to longer builds and less efficiency.
So it was time to meet the new kid on the block, MAST. I really was intrigued, as it was ultra light-weight and had a better variable setup than Client-First, and it looked like perfect in the middle of Lumos and Client-First, but:
I really don't like the current grid setup, is a depricated altered version of Timothy's Lumos grid system, where you had to add all those classes, just to decide on the columns and what happens at breakpoints. The best way to build websites is with grids. Designers love them for centuries for a reason.
The structure setup isn't enough, MAST's lightweight styleguide comes at a cost, while being lighweight it lacks in how it utilizes custom code and having enough variety within the framework to allow more intriguing builds.
Although BRICKS is a little heavier than MAST, those kb won't kill anybody 😅, having optimized compressed images, performance optimized 3d models and lighweight js should be of bigger concern. BRICKS solves quite a lot:
It is a variable-first design and development system, allowing you to make quick changes to the websites and brand feel in a streamlined approach, prompting you to launch and iterate faster with ease.
As it utilizes custom code, webflow properties and custom attributes to its fullest potential it allows users to change component paddings, text, visuals, etc.. with ease, even if you're not a developer.
It clearly organizes variables in 5 core pillars (Theme Modes, Color Palette, Structure Management, Typography Setup and Component Values), which are easy to understand, maintain and change, if your co-founder, developer, brand strategist, designer, marketer or the little kid playing around building their first website.
It's color, typography and theme setup is extensive, and allows users to create intriguing builds, moments, experiences and brands within moments.
It's grid setup is easy to use, add a custom class of .grid-main to any div and turn it into a grid block, only choose column number or flex per breakpoint and you're done. Don't forget to make it a component, and changes become even more easy and fast.
All in all BRICKS was made for real users, from co-founders, to marketers, product teams and devs. And the biggest difference is in our mission, and roadmap. Coming this year are components, cloneables, code-snippets, github repositories, a Webflow APP, Figma Plugin, Blender Plugin and a ton more. As The Wall is an End-2-End Agency, we aim to create products that will fill the gap between production and streamlined execution.
Matt, once again, thanks for the question! Really got into it, hope you and everyone reading this now gets a better sense of what BRICKS is, how it's different from Client-First, MAST, and Lumos, and why companies, agencies, and freelancers should consider it for their next build, not just to build, but to create a scalable brand that grows efficiently and smoothly.
Otherwise cheers from Ljubljana, Slovenia 👋 if you got any other questions, just ask. Wishing you all the best!
@tinemaher thanks for the in-depth explanation .
BRICKs does not ship with many components. How will it help those marketers who may want to make the most of Webflow's BUILD MODE? Or maybe the idea is that the developer spends the time building the components based on the needs of the project itself?
@matt_evans3 does not yet ship with many components, component library coming out now in June 👍, and will be available on Webflow Marketplace to integrate within Webflow Workspaces and Projects.
We’re planing on releasing the component library and new Webflow cloneables to showcase builds in action. In the next two weeks: We’ll publish the first intro and live build videos on YouTube. In July: Expect code snippets and GitHub repositories.
Q4: We’re aiming to launch our full BRICKS Webflow App. New code extensions for webflow, and little more I can't yet tell.
@tinemaher all sounds great.
You might struggle to make an impression on the Webflow community given there are so many good frameworks out there that are free to use.
Best of luck regardless - I know a lot of work goes into these things.