{"id":20744478,"url":"https://github.com/brianbroderick/phoenix_bulma","last_synced_at":"2025-05-11T04:30:38.013Z","repository":{"id":44176995,"uuid":"121130331","full_name":"brianbroderick/phoenix_bulma","owner":"brianbroderick","description":"Phoenix 1.4 with Bulma 0.6.2 and Vue 2.5.13 Example","archived":true,"fork":false,"pushed_at":"2022-12-09T04:52:30.000Z","size":3473,"stargazers_count":4,"open_issues_count":12,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-24T23:25:32.431Z","etag":null,"topics":["bulma-css","bulma-css-framework","elixir-lang","elixir-phoenix","font-awesome","phoenix","phoenix-framework"],"latest_commit_sha":null,"homepage":"","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brianbroderick.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-11T14:15:23.000Z","updated_at":"2025-01-31T22:56:22.000Z","dependencies_parsed_at":"2023-01-25T11:02:07.580Z","dependency_job_id":null,"html_url":"https://github.com/brianbroderick/phoenix_bulma","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianbroderick%2Fphoenix_bulma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianbroderick%2Fphoenix_bulma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianbroderick%2Fphoenix_bulma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianbroderick%2Fphoenix_bulma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brianbroderick","download_url":"https://codeload.github.com/brianbroderick/phoenix_bulma/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253518941,"owners_count":21921074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bulma-css","bulma-css-framework","elixir-lang","elixir-phoenix","font-awesome","phoenix","phoenix-framework"],"created_at":"2024-11-17T07:15:45.188Z","updated_at":"2025-05-11T04:30:37.234Z","avatar_url":"https://github.com/brianbroderick.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Phoenix 1.3 with Bulma 0.6.2, Font Awesome 4.7, and Vue 2.5.13\n\nThis 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.\n\nTo start your Phoenix server:\n\n  * Install dependencies with `mix deps.get`\n  * Create and migrate your database with `mix ecto.create \u0026\u0026 mix ecto.migrate`\n  * Install Node.js dependencies with `cd assets \u0026\u0026 npm install`\n  * Start Phoenix endpoint with `mix phx.server`\n\nNow you can visit [`localhost:4000`](http://localhost:4000) from your browser.\n\n## To Install Bulma and Font Awesome:\n\n1. Remove Bootstrap \n```\n$ rm assets/css/phoenix.css\n```\n2. Install Bulma and Font Awesome\n```\n$ cd assets\n$ npm install --save bulma font-awesome\n```\n3. Install Sass-Brunch \u0026 Copycat-Brunch\n```\n$ npm install --save-dev sass-brunch copycat-brunch\n```\n4. Add sass-brunch, font-awesome, and copycat config to assets/brunch-config.js\n```\n// Configure your plugins\nplugins: {\n  babel: {\n    // Do not use ES6 compiler in vendor code\n    ignore: [/vendor/]\n  },\n  copycat: {\n    \"fonts\": [\"node_modules/font-awesome/fonts\"]\n  },\n  sass: {\n    options: {\n      includePaths: [\"node_modules/bulma\", \"node_modules/font-awesome/scss\"]\n    }\n  }\n},\n```\nAnd the scss folder to the watch path.\n```\npaths: {\n    // Dependencies and current project directories to watch\n    watched: [\"static\", \"css\", \"scss\", \"js\", \"vendor\"],\n    ...\n  },\n...\n```\n5. Rename app.css to app.scss\n```\n$ cd assets/css; mv app.css app.scss\n```\n6. Import Bulma in app.scss\n```\n@import \"bulma\"\n```\n7. Start over on your template. It's currently set up with Bootstrap classes.\n\n## To install Vue\n1. Install Vue\n```\ncd assets\nnpm install vue\n```\n2. In /assets/brunch-config.js, add a Vue alias so it knows which JS file to use.\n```\nnpm: {\n    enabled: true,\n    aliases: {\n      vue: \"vue/dist/vue.common.js\"\n    }\n  }\n```\n3. Import Vue in /assets/js/app.js\n```\nimport Vue from 'vue'\n```\nNote: 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:\n```\nimport \"./main\"\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianbroderick%2Fphoenix_bulma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianbroderick%2Fphoenix_bulma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianbroderick%2Fphoenix_bulma/lists"}