Skip to content

Conversation

printfinn
Copy link
Contributor

Hi! I added Bulma CSS support to cssbundling-rails gem. I'm not sure if this is the correct way to do it, but it works on my machine, I just followed the way how bootstrap was added to it.

And here is a clean "rails 7.0.0.alpha2 new" repo I used to test my implementation.

I don't know why node_modules dir is not in the .gitignore file by default in rails 7, so I also committed it with an additional commit to this repo (6MB dir size) in case someone needs to see it.

@dhh
Copy link
Member

dhh commented Sep 17, 2021

The thing about bulma is that it's just a single JS file! I don't think it needs a bundling setup. Everywhere I've used it, it's just been requiring the 27kb file off a CDN.

But maybe we should document that this is so? Could def see someone thinking This Is The Way To Do All CSS Frameworks In Rails and then missing bulma. But really, this is the way to setup CSS frameworks that require node to compile them.

@dhh dhh closed this Sep 17, 2021
@printfinn
Copy link
Contributor Author

Thank you for replying! I'm kind of new to all this and English is not my first language. If I understand correctly, you mean bulma is a small CSS file that is better off imported through a CDN, we shouldn't use bundling to add bulma to Rails, and only CSS frameworks that are kind of complex, such as requiring Node to compile, should we use this bundling method to add them to a Rails app, am I correct?

I'm not sure if this is the correct way to put it, I actually don't have much knowledge with frontend, but should this count as "require node to compile"? People sometimes customize their theme to a different color to just make the site doesn't look like "another bulma site" by overriding some primary colors. Without Webpacker and cssbundling gem, maybe there is some other way to customize I guess?

@dhh
Copy link
Member

dhh commented Sep 17, 2021

Actually, yes, you're right. If we preconfigured everything under https://bulma.io/documentation/customize/with-node-sass/#6-add-your-own-bulma-styles to show why this warrants being a preprocessor, then I think it's fair game!

@dhh dhh reopened this Sep 17, 2021
@printfinn
Copy link
Contributor Author

Thank you for replying Mr David! I saw you reopened the PR, this is my first PR for a public project other than fixing some typo, I'm not quite sure what I'm supposed to do next. Are we waiting to see how other engineers are thinking about this PR, or am I supposed to make some edits to this PR according to https://bulma.io/documentation/customize/with-node-sass/#6-add-your-own-bulma-styles?

If it's the latter case, am I supposed to copy the example code from section 6. Add your own Bulma styles to our application.bulma.scss file? If so, when people add Bulma to their Rails app with this gem, the default appearance would differ from that of the Bulma documentation, such as the primary color would go purple from green. Wouldn't this confuse people? Making them think there is something wrong with their installation or configuration because they didn't get the appearance of Bulma's documentation, even though they didn't write anything in their CSS file?

Or am I supposed to simply copy the example code, but comment them out in application.bulma.scss, such that people know they can customize their Bulma like what the doc says with this gem?

@dhh
Copy link
Member

dhh commented Sep 18, 2021

Thanks for working on this! I think a good path would be to show the customization options commented out 👍

@printfinn
Copy link
Contributor Author

printfinn commented Sep 18, 2021

Thank you for the explanation! I've added the example code from bulma documentation to our application.bulma.scss as the customization options. And I've manually tested all the commented code, when I remove the comment, the code does what they are supposed to do, except the @charset "utf-8"; line, since I don't know how to test it, but I guess it should also work as expected because other code works fine.

Does this look good to you and is this what we have wanted? Is there anything else that is supposed to add to this PR?

@dhh
Copy link
Member

dhh commented Sep 18, 2021

Perfect! Great work 👌

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

Successfully merging this pull request may close these issues.

2 participants