Bulmajs-rails is the implementation of BulmaJS
BulmaJS is an unofficial javascript extension to the awesome Bulma CSS framework
Source: https://github.com/VizuaaLOG/BulmaJS
Ruby Gem: https://rubygems.org/gems/bulmajs-rails
Add this line to your application's Gemfile:
gem 'bulmajs-rails'And then execute:
$ bundle
Or install it yourself as:
$ gem install bulmajs-rails
Now you need to edit your app/assets/javascripts/application.js file and add the following line:
//= require bulma <div id="tabs-example" data-bulma="tabs">
<div class="tabs" data-links>
<ul>
<li class="is-active">
<a>Pictures</a>
</li>
<li>
<a>Music</a>
</li>
<li>
<a>Videos</a>
</li>
<li>
<a>Documents</a>
</li>
</ul>
</div>
<div class="tabs-content" data-content>
<ul>
<li class="is-active">
<h1>Pictures</h1>
</li>
<li>
<h1>Music</h1>
</li>
<li>
<h1>Videos</h1>
</li>
<li>
<h1>Documents</h1>
</li>
</ul>
</div>
</div>All 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
<nav class="navbar" data-bulma="navbar">
<div class="navbar-brand">
<!-- Your other HTML here -->
<div class="navbar-burger burger" data-trigger data-target="navMenuExample">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuExample" class="navbar-menu">
<!-- Your navbar HTML here -->
</div>
</nav><div class="file has-name is-boxed" data-bulma="file">
<label class="file-label">
<input class="file-input" type="file" name="resume" multiple>
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name"></span>
</label>
</div>More examples and explanation are on available https://vizuaalog.github.io/BulmaJS
Bug 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 code of conduct.
Thomas - Creator of BulmaJS
The gem is available as open source under the terms of the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent