https://github.com/codn/binco

Bootstrap sass gem wrapper, specially created for Ruby on Rails apps
https://github.com/codn/binco

Last synced: 2 months ago
JSON representation

Bootstrap sass gem wrapper, specially created for Ruby on Rails apps

• Host: GitHub
• URL: https://github.com/codn/binco
• Owner: codn
• License: mit
• Created: 2015-03-19T01:09:29.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2022-12-14T02:08:42.000Z (about 2 years ago)
• Last Synced: 2024-04-25T07:02:14.682Z (9 months ago)
• Language: CSS
• Homepage:
• Size: 288 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/twbs/bootstrap)

* [Bootstrap Datepicker](https://github.com/uxsolutions/bootstrap-datepicker)

* [Select2](https://github.com/select2/select2)

* [Will paginate](https://github.com/mislav/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

```erb

<%= 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 %>

  

  <%= f.form_group do %>

    <%= f.label :product %>

    <%= f.collection_select2 :product_id, @products, :name, :id %>

  <% end %>

  

  <%= f.form_group do %>

    <%= f.label :products %>

    <%= f.collection_check_boxes2 :product_id, @products, :name, :id %>

  <% end %>

  <%= f.submit 'Great!' %>

<% end %>

```

### Modals

```erb

<%= modal 'filter-modal' do %>

  <%= modal_header 'One fine title'%>

  <%= modal_body do %>

    One fine body

  <% end %>

  <%= modal_footer do %>

    Cancel

    Submit

  <% end %> 

<% end %> 

```

### Breadcrumbs

In your layout render the partial wherever your like

```erb

<%= render 'binco/breadcrumb' %>

```

In your views, add an element to breadcrumb with:

```erb

<% 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:

```rb

Binco.configure do |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'

```

```ruby

# controller

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

```

```erb

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

```

This project rocks and uses MIT-LICENSE.