Binco

This is a wrapper for adding bootstrap to your Rails 6 projects. By includinig this gem you'll add a series of helpers that work with the bootstrap CSS framework:

• Bootstrap
• Bootstrap Datepicker
• Select2
• Will paginate (Optional)
• Links with data: { confirm: 'Sure?' } opens in Bootstrap Modal by default.
• Bootstrap Helpers

Installation

To install simply include into Gemfile:

gem 'binco'

and run:

bundle install

then add our css/js dependencies using yarn

 yarn add bootstrap select2 bootstrap-datepicker

Automatic

Run rails g binco:install

This creates the application.scss with binco (and bootstrap) included, your _bootstrap-overrides.scss.

Manual Installation

In your application.scss add:

// Install bootstrap using yarn
// $ yarn add bootstrap
@import "bootstrap_variables";
@import "bootstrap/scss/bootstrap";
// Install select2 with yarn
// $ yarn add select2
// @import "select2/dist/css/select2";
@import "binco";

And uncomment the select2 part if you wish to use it.

In your application.js add:

require("bootstrap")
// Uncomment this lines if you are going to use select2 and/or bootstrap datepicker
// import $ from 'jquery'
// require('select2')
// require("bootstrap-datepicker")

Optional

For customization of datepicker make sure to include your locale js and send it as data attribute when creating a datepicker.

# app/javascripts/packs/application.js
$.fn.datepicker.dates['es'] = {
days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
daysShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
today: "Hoy",
monthsTitle: "Meses",
clear: "Borrar",
weekStart: 1,
format: "yyyy-mm-dd"
};
$.fn.datepicker.defaults.language = "es"

Usage

<%= bootstrap_form_for(@object) do |f| %><%= f.form_group do %><%= f.label :product_id %><%= f.collection_select :product_id, @products, :id, :name, class: 'special-select-class-if-needed' %><% end %><%= f.form_group do %><%= f.label :name %><%= f.number_field :name %><% end %><!-- select2 support --><%=f.form_groupdo%><%=f.label:product%><%=f.collection_select2:product_id,@products,:name,:id%><%end%><!-- select2 support for checkboxes --><%=f.form_groupdo%><%=f.label:products%><%=f.collection_check_boxes2:product_id,@products,:name,:id%><%end%><%=f.submit'Great!'%><%end%>

Modals

<%= modal 'filter-modal' do %><%= modal_header 'One fine title'%><%= modal_body do %>
One fine body
<% end %><%= modal_footer do %><buttontype="button" class="btn btn-default" data-dismiss="modal">Cancel</button><buttontype="button" class="btn btn-primary" data-dismiss="modal">Submit</button><%end%><!-- end modal_footer --><%end%><!-- end modal -->

Breadcrumbs

In your layout render the partial wherever your like

<%= render 'binco/breadcrumb' %>

In your views, add an element to breadcrumb with:

<% breadcrumb_add(title: 'new', url: pages_new_path) %>

Notice that first in first out. So be careful with the order.

Your can configure your placeholder and default url for the breadcrumb in an initializer:

Binco.configuredo |binco|
binco.breadcrumb_before={title: 'You are here'}binco.breadcrumb_default=[{title: 'Index',url: '/'}]end

Pagination

Will Paginate

Add Will Paginate to your Gemfile

gem "will_paginate", '~> 3.0'

# controller@posts=Post.all.page(params[:page])

<!-- View --><%=render'binco/pagination',collection: @posts%>

This project rocks and uses MIT-LICENSE.