FlexboxRb
FlexBoxRb is a wrapper for the awesome gryd system from @kristoferjoseph, original project can be found here: https://github.com/kristoferjoseph/flexboxgrid.
This gem allows you to easily include FlexboxGrid into your projects, it also provides your views with some helper methods to create grid dynamic gryd systems.
Plus, with our custom methods you don't have to write <div class="box"></div>
for each one of your elements in the grid, because the helper methods already do so ;)
Installation
Add this line to your application's Gemfile:
gem 'flexbox_rb'
And then execute:
$ bundle
Or install it yourself as:
$ gem install flexbox_rb
Usage
Add the css file to your application.css file
*= require flexboxgrid
It also allows you to use custom methods for the grid in your views. For example:
grid_md_12 do
<h1> Hola mundo </h1>
end
Outputs:
<div class="col-md-12"><div class="box">
<h1> Hola mundo </h1>
</div></div>
You can also specify the columns number for each device size (xs,sm,md,lg) in the options hash when using the grid
method
grid md:6,xs:12 do
<h1> Hola mundo </h1>
end
Outputs:
<div class="col-md-6 col-xs-12"><div class="box">
<h1> Hola mundo </h1>
</div></div>
Every method accepts a hash of options that it's translated in to html attributes, so
grid_md_6 id:"div_id", class:"card", style:"padding:10px" do
<h1> Hola mundo </h1>
end
Outputs
<div class="col-md-6 card" id="div_id" style="padding:10px"><div class="box">
<h1> Hola mundo </h1>
</div></div>
##Available methods grid_lg_n
grid_md_n
grid_sm_n
grid_xs_n
Where n is a number >=1 and <=12
Development
After checking out the repo, run bin/setup
to install dependencies. Then, run bin/console
for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run bundle exec rake install
. To release a new version, update the version number in version.rb
, and then run bundle exec rake release
to create a git tag for the version, push git commits and tags, and push the .gem
file to rubygems.org.
Contributing
- Fork it ( https://github.com/urielhdz/flexbox_rb/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request