Code Integration with CSS Classes

Sparkle is great visual design tool. Sometimes, I need to extend things (like add a few css properties that are not exposed in Sparkle) or add a little bit of JS to add interactivity or other integrations.
The code integration with ids (assigning an ID to an element) can help with the “code” part, but most of the time I need to target multiple elements and adding ids to all of them can be cumbersome.

@luciandesign, Sparkle is a design platform that converts what you have created to html/CSS/javascript with a splash of php so you are not able to target elements with code like how you’d like unless you want to publish and then develop, but then if you’d like to re-make changes in Sparkle you’ll have to redo your code all over again once you publish.

If you open your Settings and hit Developer you have a few options there so check that out and see if it could work for you…

@greenskin Thanks for the suggestion.
I’m aware of the “Developer Tools Addon” and the additional functionality that it provides, however the “Embed” element is enough for me.
The only problem is “connecting” the elements from Sparkle to my “code”.

Here is a file with a simple example (a button and a card that can become hard to handle if you have many of them) https://gallant-montalcini-10221f.netlify.app/

Sparkle file: https://www.dropbox.com/s/48i27kuxnep5o9y/Card_Button_Effects.sparkle?dl=1

@luciandesign, I know what you are asking but Sparkle doesn’t work like that.

The best (well the way I do it) is say i have 7 buttons on a page that I’d like to jazz up a bit beyond what i have in Sparkle. I give all 7 buttons the same ID and then place an Embed element and lay down some CSS targeting the buttons ID between <style>...</style>

So with your button you can do likewise and the same with your card.
Here is an example - https://www.shopfronttrevallyn.com/ The buttons are like yours being controlled with a little bit of CSS on mass, and the circular elements are like your card being controlled with a little bit of CSS on mass.

… Oh, and welcome onboard! :slight_smile:

Thanks for the suggestion and the warm welcome :slight_smile: .
I know that Sparkle doesn’t work this way… and I’m also doing the same thing you are doing (when I need to “enhance” something) this is why, I thought that adding a new field like “class” in the UI would be a great help.

1 Like

I know what you are saying but it is a really hard call for the Sparkle Team knowing the paradigm of Sparkle is built around no-code in creating and publishing a website.

But Sparkle is still young so anything can happen! :slight_smile:

1 Like

Thanks @luciandesign, while I see what you mean, Sparkle doesn’t focus on the needs of developers. There are many tools that do that. I can’t say we are actively against things like this, we just still have many many things to work on to realize the vision of a fully visual website builder.

1 Like