No-code web development is constantly evolving, with new frameworks and libraries emerging regularly. One such framework that has gained attention is the Lumos Webflow Framework. In this article, we will compare Lumos with Finsweets client-first framework, specifically exploring the benefits and advantages of Lumos over the client-first approach.
The client-first framework is arguably the most popular Webflow framework on the market as of this writing. It's a component library that provides a bunch of handy utility and spacing classes to help build easily maintainable and scalable code within Webflow.
Webflow's class system can be quite difficult to work with, particularly when you're adding combo-classes - which are multiple classes on the same element. It very easy to get sloppy when naming classes and, without libraries like bootstrap or tailwind, each developer has their own personal preference for class naming which reduces consistency.
Client-first aims to address both issues 1) it provides utility classes to handle common modifications so that you don't need to create new classes from minor updates (2) it also provides a consistent class-naming system that's modelled of the industry standard BEM approach. Client-first effectively solved these problems which helped it rise to the position of the most popular Webflow framework. Then Webflow Components came out... more on that later.
Lumos is a Webflow framework developed by the Webflow Wizard himself, Timothy Ricks. It aims to solve a lot of the same problems as client-first; scalability, consistency, and speed, however it takes a rather unique approach.
The Lumos framework also includes utility classes, but instead of using the combo-class approach, it uses direct modifications to the main class. It achieves this by using the following code:
[class*="fw2"] { font-weight: var(--fw2); }This code basically applies a font-weight, which is set in your CSS variables section, of weight fw2 to any element class that contains fw2 within it. For exmaple, the code below would create a button with the font weight of fw2:
btn_play--fw2This approach reduces the need for combo classes and makes modifying existing classes significantly easier. The original btn_play class can be used to override any styles added by the modification utility adding more layers of flexibility.
With so much choice, it's crucial to choose the right framework for your projects. In this section, we will delve into the comparison between Lumos and the Finsweet client-first development approach, exploring the various aspects where Lumos shines.
When it comes to flexibility, Lumos takes the lead. Unlike client-first, which follows a more rigid structure defined by the frameworks setup, Lumos offers a greater level of customisation and adaptability.
Whether it's tweaking the layout, adjusting the styling, or integrating complex functionalities, Lumos provides developers with the tools and flexibility to bring their creative visions to life. This flexibility not only enhances the overall user experience but also enables developers to iterate and refine their designs more efficiently. We've already touched on the class structure but these elements can become significantly more complex:
button_play--fs6-fw3The above example creates a button with the font size of the fs6 variable and a weight of the fw3 variables. Replicating a similar structure on client first would look something like this:
.button_play .font-size-large .font-weight-semiboldAlthough most of the classes have auto complete you can sometimes end up having 4 or 5 and sometimes even more combo classes - which means that if you need to change the font-size-large class you need to remove all the others first. With Lumos, you can just edit the button_play--fs6-fw3 to button_play--fs3-fw3 and voila.
The impact of a framework on page structure is very important for seasoned developers because we like to get things done with minimal friction and we pride the most DRY (Don't Repeat Youtself) approach. Lumos improves organising and managing web pages with it'sintuitive layout system. Developers can easily structure their pages in a logical and hierarchical manner, making it easier to navigate and maintain complex projects.
Another advantage is the simplified page structure. With client first, each component is heavily nested which creates a lot of useless HTML.
You can see in Figure 2 how much nesting is required to display a simple heading using client-first. In all fairness, they have recently advised client-first users to use grid for spacing elements within components, so hero_component in the above example, which will make things better but you've still got several elements which serve a singular function. This approach also makes 50% of the library obsolete, and when you consider its 900KB size that's a huge performance hit.
By adopting Lumos, developers can ensure consistent and cohesive page structures throughout their websites. This not only enhances the user experience but also simplifies the process of making updates or adding new features.
Size does matter, when it comes to web development frameworks. Lumos stands out as a lightweight framework that prioritises performance without compromising functionality. Compared to the often bloated nature of client-first development, Lumos offers a streamlined approach that improves loading speed and overall performance.
The advantages of a lightweight framework are twofold. Firstly, it ensures a smooth and seamless user experience, as pages load quickly and efficiently. This is particularly important in today's fast-paced digital landscape, where users have little patience for slow-loading websites - anything over 2 seconds loses 87% of potential clients. Secondly, a smaller framework size reduces the overall bandwidth consumption and server load, making Lumos an excellent choice for developers that pride themselves in providing speed and efficiency.
Loading speed comparisons and statistics have consistently shown the superiority of Lumos in terms of performance. Developers who have adopted Lumos have witnessed significant improvements in their website's loading time, resulting in higher user satisfaction and better search engine rankings.
So far this article has been pretty one-sided, because in our opinion it is a very on-sided debate. However, when it comes to the learning curve this is where finsweet excels.
As the name client-first suggests, everything is labeled in a way that anyone can read it and understand what it's intended function is. We call this semantics in development terms. Lumos is significantly less semantic, although fw2 tells you it's a lighter weight than fw5 it doesn't specify whether thats 200 vs 500.
Additionally, since the font sizes become more dynamic, meaning they scale with the browser width, it requires a little more understanding to build layouts that are consistent with your designs.
When comparing Lumos and Finsweet for client-first projects, there are several other factors worth considering. These factors can greatly impact the overall development experience and project success.
Considering all these additional factors, Lumos emerges as the superior choice for Webflow development. Its strong community support, extensive documentation, compatibility with popular design tools, and commitment to performance make it a great framework for web developers.
In conclusion, the Lumos Webflow Framework is a standout alternative to the Finsweet client-first library.
Lumos's intuitive page structure simplifies web creation and maintenance, offering scalable and streamlined workflows. Its lightweight design ensures faster loading speeds, enhancing user experience.
For web developers, Lumos offers enhanced flexibility, structure, and performance. Embrace Lumos for a more efficient, customisable web development experience for your next Webflow project!
