search

c0bra / svelma

Bulma components for Svelte
https://c0bra.github.io/svelma
MIT License
538 stars 43 forks source link

How to style components? #75

Open Ungolim opened 4 years ago

Ungolim commented 4 years ago

@c0bra In the docs, there is currently no mention of how to go about applying custom styling and theming to svelma components

samal-rasmussen commented 4 years ago

Importing and customizing Bulma is independent of Svelma.

I was able to use the official Bulma customization documentation to style Bulma in a Svelte project. I based it on this guide specifically: https://bulma.io/documentation/customize/with-node-sass/

I made an example repo: https://github.com/samal-rasmussen/svelte-bulma

It uses the default Svelte template from npx degit sveltejs/template my-svelte-project, which I added in the first commit, and all the changes I made in a second commit: https://github.com/samal-rasmussen/svelte-bulma/commit/8afb28f6f157de89d6ace8310a31ab6d2b5e1776

I also found some other suggestions on using scss in Svelte from a bunch of other places. Like the using onwarn to supress all the css-unused-selector warnings. And the prependData trick to get variables into all style templates so you don't have to import the variables file yourself everywhere. I also set scss as the default language for styles.

saravanabalagi commented 3 years ago

You can import bulma.css and the color for e.g. primary, success, danger, etc. will adhere to what's defined in bulma.css. I use bulma scss variables and I was able to customize it by simply changing $primary to whatever color I wanted.

image

saravanabalagi commented 3 years ago

Heads up, if you were experimenting with Tooltip and scss variables, it probably wouldn't work. I did find that Tooltip component did not inherit colors like other components #87.

saravanabalagi commented 3 years ago

I've a why this added happens with some components in #87. As of now, style overrides don't work for Switch, Tooltip, and Dialog components.

zoulja commented 3 years ago

Hello. I've tried to make a test page according to the description on https://c0bra.github.io/svelma/install but components are not styled. What I can check to make it work? Probably some step is missed in the guide? (I'm sure bulma is installed)