Skip to main content

Father of two, software developer, wannabe solarpunk+minimalist.

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";


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";

Plug love

1 min read

So I just finished Ch. 5 "Authenticating Users" in the Programming Phoenix book and after coding along the examples of ten pages, on the last page of this chapter I was like "Wait a sec, where do they persist the session data?!" and then I discovered this gem: