Skip to main content

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']
    },
  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";

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: https://hexdocs.pm/plug/Plug.Session.COOKIE.html