https://github.com/brianbroderick/phoenix_bulma
Phoenix 1.4 with Bulma 0.6.2 and Vue 2.5.13 Example
https://github.com/brianbroderick/phoenix_bulma
bulma-css bulma-css-framework elixir-lang elixir-phoenix font-awesome phoenix phoenix-framework
Last synced: about 1 year ago
JSON representation
Phoenix 1.4 with Bulma 0.6.2 and Vue 2.5.13 Example
- Host: GitHub
- URL: https://github.com/brianbroderick/phoenix_bulma
- Owner: brianbroderick
- Archived: true
- Created: 2018-02-11T14:15:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T04:52:30.000Z (over 3 years ago)
- Last Synced: 2025-02-24T23:25:32.431Z (over 1 year ago)
- Topics: bulma-css, bulma-css-framework, elixir-lang, elixir-phoenix, font-awesome, phoenix, phoenix-framework
- Language: Elixir
- Homepage:
- Size: 3.31 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Phoenix 1.3 with Bulma 0.6.2, Font Awesome 4.7, and Vue 2.5.13
This is an example of using Elixir Phoenix with Bulma and Vue. There is also a branch called bulma_without_vue if you don't want Vue. There's a basic Bulma starter template being used for the default Page template.
To start your Phoenix server:
* Install dependencies with `mix deps.get`
* Create and migrate your database with `mix ecto.create && mix ecto.migrate`
* Install Node.js dependencies with `cd assets && npm install`
* Start Phoenix endpoint with `mix phx.server`
Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
## To Install Bulma and Font Awesome:
1. Remove Bootstrap
```
$ rm assets/css/phoenix.css
```
2. Install Bulma and Font Awesome
```
$ cd assets
$ npm install --save bulma font-awesome
```
3. Install Sass-Brunch & Copycat-Brunch
```
$ npm install --save-dev sass-brunch copycat-brunch
```
4. Add sass-brunch, font-awesome, and copycat config to assets/brunch-config.js
```
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
copycat: {
"fonts": ["node_modules/font-awesome/fonts"]
},
sass: {
options: {
includePaths: ["node_modules/bulma", "node_modules/font-awesome/scss"]
}
}
},
```
And the scss folder to the watch path.
```
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. Start over on your template. It's currently set up with Bootstrap classes.
## To install Vue
1. Install Vue
```
cd assets
npm install vue
```
2. In /assets/brunch-config.js, add a Vue alias so it knows which JS file to use.
```
npm: {
enabled: true,
aliases: {
vue: "vue/dist/vue.common.js"
}
}
```
3. Import Vue in /assets/js/app.js
```
import Vue from 'vue'
```
Note: If you want Vue code in a file other than app.js (for example, a file called main.js), you'll import main in app.js like this:
```
import "./main"
```