search

jgthms / bulma-website

[DEPRECATED] Website for the Bulma CSS framework
http://bulma.io
MIT License
40 stars 35 forks source link

Possibly unclear sass customization instructions. #58

Open tristansokol opened 7 years ago

tristansokol commented 7 years ago

I'm a novice sasser and I think the documentation might have a gap for people like me. I'm happy to make the PR for improvement, but I want to make sure I am doing the right thing.

The Customize page makes it seem like it is easy to customize things like the primary color. But not knowing anything about how sass works makes step two 

Set your variables

Add your own colors, set new fonts, override Bulma styles...

seem like draw the rest of the owl. Which file should you add that code to? How do you get it into the css?

I was able to get it to work with by editing bulma/bulma.sass, but is that where I should have been making my edits? Should it be in a new file? Based on the ../ of @import "../sass/utilities/initial-variables" it seems like it would be in a folder that is not sass under the main bulma folder. bulma/css/mycusom.sass?

I'd also like to add a line describing where to install sass.

superjoefly commented 6 years ago

I agree...the docs are unclear.

invisibletype commented 6 years ago

Similar sentiments. I've reviewed all the closed/open issues regarding custom variables/overrides and there doesn't seem to be a good solution identified.

tristansokol commented 6 years ago

Like I said, happy to make the PR if there is a recommended way to make an override.

superjoefly commented 6 years ago

So I found that the solution that worked best for me was to create a new folder in my project with a custom.sass and custom.css file. I linked up the custom.sass file similar to how it is done in the docs, but with a few minor changes to the paths due to my folder structure. Then I just linked to the bulma.css and custom.css file in my index.html file, and ran 'sass --watch' to link the custom.sass (input) file to the bulma.css(output) file. Then I was finally able to define my own variables, write my own sass and also write plain css overrides in the custom.css file.

It's rather confusing with all the different files and connections, so I made a repo for demonstration, but I'm not sure I can link to it here. Anyway, I hope this helps anyone having a hard time :-)