Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to style components? #75

Open
Ungolim opened this issue Oct 22, 2020 · 5 comments
Open

How to style components? #75

Ungolim opened this issue Oct 22, 2020 · 5 comments

Comments

@Ungolim
Copy link

Ungolim commented Oct 22, 2020

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

@samal-rasmussen
Copy link

samal-rasmussen commented Nov 6, 2020

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:
samal-rasmussen/svelte-bulma@8afb28f

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

zoulja commented May 8, 2021

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants