sparna-git / Sparnatural

Sparnatural : visual SPARQL query builder for knowledge graphs in the browser, configurable with SHACL
http://sparnatural.eu
GNU Lesser General Public License v3.0
219 stars 41 forks source link

How can someone that integrates Sparnatural in its own webpage customize the CSS ? #435

Closed tfrancart closed 1 year ago

tfrancart commented 1 year ago

As the CSS is compiled and minified at compile-time, I don't think someone using this can adapt. We have requests to be able to customize the CSS, maybe only the values that are in the "themes.scss" file. Maybe that file could be left external to the compiled CSS, so that users can adapt it (without having to recompile the whole thing) ?

See also #410 to provide 2 or 3 default color themes, which could be a temporary workaround

@SteinerPascal do you have an idea on this ?

In relation to this, I would find it nice if the "backgroundColor" config property be also part of the CSS theme, and not part of the settings passed to the Javascript. This would be more consistent.

SteinerPascal commented 1 year ago

Hi yes okay well i would not adivse on the customizing CSS solution. Because this would mean that people have to adapt the css within /node_modules folder. Now this folder should always remain idempotent regarding installs. Because as soon as Sparnatural would update, npm would pull the new version and overwrite the sparnatural folder within the node_modules ( and therefore the css as well). Additionally, the node_modules/ folder gets often deleted when having build or dependency issues. So if somebody deletes the node_modules/ folder and then does a reinstall with npm install would cause the css to be changed back again.

Edit: Also if somebody uses sparnatural in its project and adapts the css within the node_modules will only work if this person also pushes its node_modules folder on his GitHub project (which obviously nobody does). otherwise somebody will download the project using sparnatual and do a npm install and npm will pull the sparnatural on the registry which has default css styling.

I would handle it incode i think... Maybe something like a single configuration property being a styling object. This could look like this in a website integration:

let style = {
  backgroundBaseColor: 'blabla',
  arrowColor: 'hexvalue',
  ...
}

Please note: I'm not an expert on these things so maybe you get a second opinion on this...

tfrancart commented 1 year ago

I see it more as a CSS custom properties thing : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

SteinerPascal commented 1 year ago

Cool! yes I like it. If I understood it correctly, then there are two goals here. The first is to provide 2-3 different themes and the second objective is to provide the possibility to let the site authors adapt the component and it's vars. But there are definitely some things to consider. For the first goal I can see something similar like here: https://sap.github.io/ui5-webcomponents/playground/customizing/theme/ Where we provide some single css theme sheets and people can just import their favourite?

For the second objective: https://vaadin.com/blog/styling-web-components-with-css-variables But I hink some things have to be considered here:

As you already thought, for the first solution this requires some webpack managing. But it seems pretty easy. If you or @antoine37120 provide two theme styles in seperate css sheets than i will handle the webpack part. Just open a new branch or for that

SteinerPascal commented 1 year ago

Be aware though that I think the theme should import the sparnatural.scss and not sparnatural.scss imports multiple themes. Like so: https://webdesign.tutsplus.com/tutorials/how-to-use-sass-to-build-one-project-with-multiple-themes--cms-22104

SteinerPascal commented 1 year ago

@tfrancart I'm going to close this since I think it's done? Otherwise just reopen it

tfrancart commented 1 year ago

Hi @SteinerPascal !

Trying here because I am not sure you check your Siemens email : I will be in Bern this Wednesday 1st and Thursday 2nd. Any chance we can meet ? I also stop in Basel.

Cheers

Le lun. 27 févr. 2023 à 10:41, SteinerPascal @.***> a écrit :

@tfrancart https://github.com/tfrancart I'm going to close this since I think it's done? Otherwise just reopen it

— Reply to this email directly, view it on GitHub https://github.com/sparna-git/Sparnatural/issues/435#issuecomment-1446010222, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAU2H4L5NBUCTSNVCUNIZHLWZRZFNANCNFSM6AAAAAATPTNNXU . You are receiving this because you were mentioned.Message ID: @.***>

--

Thomas Francart - SPARNA Web de données | Architecture de l'information | Accès aux connaissances blog : blog.sparna.fr, site : sparna.fr, linkedin : fr.linkedin.com/in/thomasfrancart tel : +33 (0)6.71.11.25.97, skype : francartthomas

SteinerPascal commented 1 year ago

Hi @tfrancart, I have ansered via mail!