Q: Which style system is TheSprkl based on?
Is it compatible with the Relume Client First or Client First Style System by Finsweet?
egocreativeinnovations
May 21, 2024A: Hi noxic,
thanks for sharing your point. Absolutely agree with you, AI yet is not a single solution. An assistance - for sure, but not the replacement.
As for Webstudio, we took a glance at it. Quite a promising tool, tough, transferring TheSprkl to it is not so easy.
It will be like creating it from scratch, no way to reuse anything.
Right now we have a schedule agreed upon for Premium components development, as you are also right Relume has a lot of components. So we concentrated on that, especially since we go in different directions - not just creating a bunch of Hero, CTA, Footer, etc. sections. But rather having complex Marketing Components with custom code and animations so you can engage users and increase conversion.
Cheers,
Eugene
Hi noxic,
Thank you for your question.
No, TheSprkl is not compatible with Relume or Finsweet Client-First naming conventions.
Please let me give some explanation, as we have similar questions a lot.
Relume does an awesome job with their UI Kit, absolutely stunning - no questions. However, in my opinion, they're getting to be more like website builder inside Webflow (especially with their gorgeous AI assistant). And this, in our opinion, makes us different.
Relume based on Feensweet's Client-First, which is actually terrific (like Feensweet, I guess won't mistake, do the most as Webflow community contributor, we use their solutions a lot, and love them with all our hearts, no joke). You can find it on docs: Disclaimer: This is not following every best practice of traditional HTML and CSS build conventions. This is not traditional, this is Webflow. Webflow has redefined how HTML and CSS can be managed visually in our projects. Client-First is built specifically for Webflow Designer workflow and organization. (I don't say it is bad, this is great, though I believe, it is great for newcomers, designers, and non-techy ones).
We, being developers for ages, celebrated fresh HTML 4 the other day, if you see what I mean. We are old-fashioned and we love (like now Webflow) old Twitter Bootstrap and the approaches behind it.
So, TheSprkl is definitely not more or either way advanced than Relume. It is intended to be a developer-first (in the fashion of Bootstrap) kit. And, yet, have developers and designers work in synergy.
I hope I was able to explain our thoughts behind TheSprkl somehow clearly :)
Please feel, free to share your questions and thoughts.
noxicPLUSHey!
I can only speak from my perspective; others may have completely different views. But I see it roughly like this:
The Client-First Design System is based on how HTML and CSS are applied. This means that each section and each component follows a specific structure and naming convention (tags). This way, the same designs can be applied across all components because they all have consistent naming. It all starts with a Client-First starter system where basics like the color scheme and typography are managed in conjunction with variables and CSS tags.
I use this same system for practically all of my projects – and that is the Client-First system. This allows me to use my components anywhere and also integrate those from Relume or Finsweet seamlessly into my design and design system. If I were to use your components as well, I would end up with two different design systems (or even worse, none at all).
(Link of a clonable starter project with style guide: https://webflow.com/made-in-webflow/website/client-first-cloneable)
I would NEVER, never, never, ever start a website without a design system that ensures consistency from the basic structure to the components.
What design system or style guide are your components based on? Are they all consistently structured, dynamic, and global? When I copy a component from you into my project, will my styles be applied automatically, or will your own classes be inserted first, requiring me to rewrite everything?
noxicPLUSand yes, the AI functions of Relume are quite nice, but what really helps is the integral work across all components. This means I can simply copy a component from Relume into my existing website (which is based on the Relume design system) and my CSS tags will be used automatically.
HI noxic,
Thank you for the clarification.
Your approach to using Client-First is clear.
TheSprkl IS the Design System - that means we are not based ON someone else's style guide or component base.
The usage of TheSprkl (in your explanation) looks similar, and components of TheSprkl are transferrable between projects (that utilize TheSprkl).
You can check the basement of TheSprkl which is Figma - https://www.figma.com/community/file/1330042661436344862/thesprkl-for-webflow-figma-kit-and-design-system-free-version
And the Webflow documentation - https://thesprkl-ui-kit-webflow-v-1-0-prod.webflow.io/
You can also check the YouTube Episodes where we show how Extension and TheSprkl for Webflow works - https://www.youtube.com/watch?v=wT9SUU4WBVo&list=PLcSOjGltgvOQh0kjJd5mLgcnwpJWWTqjK&index=8
However, just to be completely clear - TheSprkl IS NOT compatible with Relume or Client-First.
Like frameworks from Webflow's Tech Lead Corey Moen - https://webflow.com/made-in-webflow/website/mast-framework or Lumos from Timothy Ricks https://webflow.com/made-in-webflow/website/lumos-v2-beta?utm_medium=affiliate&ps_partner_key=NDg0MDA5Ng&ps_xid=2S47Ri6EqNzkyP&gsxid=2S47Ri6EqNzkyP&gspk=NDg0MDA5Ng or many other kit's that are never intended to be based on Client-First.
Every tool has its own pros and cons and target users. If you heavily use Client-First and are happy with it, I personally would not change the working approach.
Please reach out directly, I am eager to know why you looking for additional tools if you use Relume.
It would be extremely helpful for us to move forward.
Cheers
Eugene
noxicPLUSThank you for the clarification and your feedback. I use Relume primarily because it has certain components that I find useful, less so for the AI functionality. For a truly good website, AI alone is not enough (yet); experience and understanding of the target audience are crucial. That’s why I’m always open to new systems—it doesn’t always have to be Webflow. There are other exciting tools available now. I believe Webstudio was mentioned at some point. Also, check out Divhunt; it’s another alternative to Webflow. I have already implemented several websites with Divhunt, but it lacks a function like the one Relume offers. However, Divhunt is currently working on building a library.