Phoenix 1.3 with Bulma
1 min read
1. Remove Bootstrap
$ echo "" > assets/css/phoenix.css
2. Install Bulma
$ cd assets $ npm install --save bulma
3. Install sass-brunch
$ npm install --save-dev sass-brunch
4. Add sass-brunch config to brunch
plugins: { sass: { options: { includePaths: ['node_modules/bulma'] },
And the scss folder to the watch pass.
paths: { // Dependencies and current project directories to watch watched: ["static", "css", "scss", "js", "vendor"], ... }, ...
5. Rename app.css to app.scss
$ cd assets/css; mv app.css app.scss
6. Import Bulma in app.scss
@import "bulma";
(Optional:)
7. Create your own theme
$ mkdir assets/scss $ touch assets/scss/custom.scss
8. Import initial variables in custom.scss
@import "../node_modules/bulma/sass/utilities/initial-variables"; $primary: $red
9. Import custom.scss in app.scss
@import "../scss/custom";