With Phoenix 1.6 just around the corner, I figured I’d make a tutorial on how to add Bulma to a new Phoenix 1.6 project. By leveraging dart_sass and a new Bulma Hex package I created, I was able to do it without having to involve Node or NPM at all!
I know TailwindCSS is where it is at nowadays, but sometimes it is nice to use a CSS library with more ready-made component classes, especially for quick MVPs.
I hope to make another tutorial for Bootstrap in the next coming days, and make a similar
:bootstrap package to make it easy to install without needing Node or NPM.
Very nice tutorial @kevinlang.
A couple of questions.
- Is maintaining the bulma hex package manual? May be if there is a version sync with official bulma package - it might be useful.
- It is manual for now, but adding a simple script would be really easy. All it needs to do is get the
tgz from NPM and copy over the
bulma.scss file and
scss/ folder. Plus, for better or for worse, Bulma updates pretty infrequently - there has only been 3 releases this past year.
- I haven’t thought about the JS part, that is a very good point. I think the solution would be to have a
package.json in the root of the package for the JS part that can be traversed today by ESbuild when you import it in your
app.js (this is how
phoenix_html works for example) in addition to a root
With Bootstrap it is definitely tricky with LiveView, and probably beyond the scope of the package I was envisaging - which is to simply be an alternative way to getting assets without using
npm. I’ll have to look over the SurfaceBootstrap library. From what I read here, it seems that even with the removal of the JS dependency from Bootstrap, it is still a bit of a hassle to make work with LiveView.
Hi @kevinlang . Thanks for the tutorial and packages. I have a problem where
@import "bulma"; works fine but if I try to customise my bulma payload to only load specific assets, such as
@import "bulma/sass/utilities/_all.sass"; I see this error in the logs:
Error: Can't find stylesheet to import.
5 │ @import "bulma/sass/utilities/_all.sass";
css/app.scss 5:9 root stylesheet
Any idea what’s going on here? I checked my code against your repo and everything seems fine.
When you import bulma using this package, you are importing this file: bulma-elixir/bulma.sass at master · kevinlang/bulma-elixir · GitHub
So if you want to use this specific sass file, you should do:
And not import bulma
I’ll try that out tomorrow, obrigado Henrique.
What happens if another package in the path also has the same folder structure?
I think that if we put
import "./sass" with the “./”, it will search in the relative path, otherwise we get an error.
@kevinlang It looks like your tutorial is offline.
Any chance you could either:
- Reactivate that website; or
- Copy the text from it into the README.md on the Github Repo; or
- Paste it here for others to use?
At the very least, what’s the format for importing it into CSS/SCSS/SASS?
@import "bulma" doesn’t seem to work. Any hints?
Also, if you want someone to do some of the grunt work of adding the docs, updating the version to latest and re-releasing, I’m happy to take up the slack.
Thanks in advance.