{"id":14988769,"url":"https://github.com/dhmgroup/bulmajs-rails","last_synced_at":"2025-04-12T00:32:51.671Z","repository":{"id":56843133,"uuid":"132744873","full_name":"dhmgroup/bulmajs-rails","owner":"dhmgroup","description":"Ruby on rails wrapper for the unofficial javascript extension to the awesome Bulma CSS framework.","archived":false,"fork":false,"pushed_at":"2019-09-28T23:10:19.000Z","size":35,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-25T20:14:16.382Z","etag":null,"topics":["bulma","bulmajs","rails","ruby"],"latest_commit_sha":null,"homepage":"https://github.com/VizuaaLOG/BulmaJS","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dhmgroup.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-09T11:09:45.000Z","updated_at":"2022-08-03T02:46:53.000Z","dependencies_parsed_at":"2022-09-15T12:22:18.437Z","dependency_job_id":null,"html_url":"https://github.com/dhmgroup/bulmajs-rails","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhmgroup%2Fbulmajs-rails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhmgroup%2Fbulmajs-rails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhmgroup%2Fbulmajs-rails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhmgroup%2Fbulmajs-rails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dhmgroup","download_url":"https://codeload.github.com/dhmgroup/bulmajs-rails/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994119,"owners_count":21030050,"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","bulmajs","rails","ruby"],"created_at":"2024-09-24T14:17:10.674Z","updated_at":"2025-04-12T00:32:51.644Z","avatar_url":"https://github.com/dhmgroup.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bulmajs::Rails\n\nBulmajs-rails is the implementation of [BulmaJS](https://github.com/VizuaaLOG/BulmaJS)\n\nBulmaJS is an unofficial javascript extension to the awesome [Bulma CSS framework](https://bulma.io)\n\nSource: [https://github.com/VizuaaLOG/BulmaJS](https://github.com/VizuaaLOG/BulmaJS)\n\nRuby Gem: [https://rubygems.org/gems/bulmajs-rails](https://rubygems.org/gems/bulmajs-rails)\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'bulmajs-rails'\n```\n\nAnd then execute:\n\n    $ bundle\n\nOr install it yourself as:\n\n    $ gem install bulmajs-rails\n\nNow you need to edit your `app/assets/javascripts/application.js` file and add the following line:\n\n```javascript\n//= require bulma\n```\n\n## Turbolinks is now required for this wrapper.\n\n## Usage Examples\n\n### Basic Tabs\n\n```html\n    \u003cdiv id=\"tabs-example\" data-bulma=\"tabs\"\u003e\n    \u003cdiv class=\"tabs\" data-links\u003e\n        \u003cul\u003e\n            \u003cli class=\"is-active\"\u003e\n                \u003ca\u003ePictures\u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ca\u003eMusic\u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ca\u003eVideos\u003c/a\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ca\u003eDocuments\u003c/a\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"tabs-content\" data-content\u003e\n        \u003cul\u003e\n            \u003cli class=\"is-active\"\u003e\n                \u003ch1\u003ePictures\u003c/h1\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ch1\u003eMusic\u003c/h1\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ch1\u003eVideos\u003c/h1\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ch1\u003eDocuments\u003c/h1\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Navbar Mobile Toggle\n\nAll you need to do is add `data-bulma=\"navbar\"` to the main navbar div, and then add `data-trigger` and `data-target=\"navID\"` to the navbar burger\n\n```html\n\u003cnav class=\"navbar\" data-bulma=\"navbar\"\u003e\n    \u003cdiv class=\"navbar-brand\"\u003e\n        \u003c!-- Your other HTML here --\u003e\n        \u003cdiv class=\"navbar-burger burger\" data-trigger data-target=\"navMenuExample\"\u003e\n            \u003cspan\u003e\u003c/span\u003e\n            \u003cspan\u003e\u003c/span\u003e\n            \u003cspan\u003e\u003c/span\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv id=\"navMenuExample\" class=\"navbar-menu\"\u003e\n        \u003c!-- Your navbar HTML here --\u003e\n    \u003c/div\u003e\n\u003c/nav\u003e\n```\n\n### Filename Updating\n\n```html\n\u003cdiv class=\"file has-name is-boxed\" data-bulma=\"file\"\u003e\n    \u003clabel class=\"file-label\"\u003e\n        \u003cinput class=\"file-input\" type=\"file\" name=\"resume\" multiple\u003e\n        \u003cspan class=\"file-cta\"\u003e\n            \u003cspan class=\"file-icon\"\u003e\n                \u003ci class=\"fa fa-upload\"\u003e\u003c/i\u003e\n            \u003c/span\u003e\n            \u003cspan class=\"file-label\"\u003e\n                Choose a file…\n            \u003c/span\u003e\n        \u003c/span\u003e\n        \u003cspan class=\"file-name\"\u003e\u003c/span\u003e\n    \u003c/label\u003e\n\u003c/div\u003e\n```\n\nMore examples and explanation are on available [https://vizuaalog.github.io/BulmaJS](https://vizuaalog.github.io/BulmaJS)\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/theeomm/bulmajs-rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.\n\n## Special Thanks\n\n[Thomas](https://github.com/VizuaaLOG) - Creator of BulmaJS\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhmgroup%2Fbulmajs-rails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhmgroup%2Fbulmajs-rails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhmgroup%2Fbulmajs-rails/lists"}