{"id":20672382,"url":"https://github.com/codn/binco","last_synced_at":"2025-04-19T19:10:27.830Z","repository":{"id":28967047,"uuid":"32493345","full_name":"codn/binco","owner":"codn","description":"Bootstrap sass  gem wrapper, specially created for Ruby on Rails apps","archived":false,"fork":false,"pushed_at":"2022-12-14T02:08:42.000Z","size":295,"stargazers_count":3,"open_issues_count":8,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-25T07:02:14.682Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","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/codn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-19T01:09:29.000Z","updated_at":"2021-06-08T00:53:33.000Z","dependencies_parsed_at":"2023-01-14T13:51:34.475Z","dependency_job_id":null,"html_url":"https://github.com/codn/binco","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codn%2Fbinco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codn%2Fbinco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codn%2Fbinco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codn%2Fbinco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codn","download_url":"https://codeload.github.com/codn/binco/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249773139,"owners_count":21323400,"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":[],"created_at":"2024-11-16T20:34:00.088Z","updated_at":"2025-04-19T19:10:27.814Z","avatar_url":"https://github.com/codn.png","language":"CSS","readme":"# Binco\n\nThis 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:\n\n* [Bootstrap](https://github.com/twbs/bootstrap)\n* [Bootstrap Datepicker](https://github.com/uxsolutions/bootstrap-datepicker)\n* [Select2](https://github.com/select2/select2)\n* [Will paginate](https://github.com/mislav/will_paginate) (Optional)\n* Links with `data: { confirm: 'Sure?' }` opens in Bootstrap Modal by default.\n* Bootstrap Helpers\n\n## Installation\n\nTo install simply include into Gemfile:\n```\ngem 'binco'\n```\n\nand run:\n\n```\nbundle install\n```\n\nthen add our css/js dependencies using yarn\n\n```\n yarn add bootstrap select2 bootstrap-datepicker\n```\n\n### Automatic\nRun `rails g binco:install`\n\nThis creates the `application.scss` with binco (and bootstrap) included, your `_bootstrap-overrides.scss`.\n\n### Manual Installation\nIn your application.scss add:\n```\n// Install bootstrap using yarn\n// $ yarn add bootstrap\n@import \"bootstrap_variables\";\n@import \"bootstrap/scss/bootstrap\";\n\n// Install select2 with yarn\n// $ yarn add select2\n// @import \"select2/dist/css/select2\";\n\n@import \"binco\";\n```\n\nAnd uncomment the select2 part if you wish to use it.\n\nIn your application.js add:\n```\nrequire(\"bootstrap\")\n\n// Uncomment this lines if you are going to use select2 and/or bootstrap datepicker\n// import $ from 'jquery'\n// require('select2')\n// require(\"bootstrap-datepicker\")\n```\n\n#### Optional\nFor customization of datepicker make sure to include your locale js and send it as data attribute when creating a datepicker.\n```\n# app/javascripts/packs/application.js\n\n$.fn.datepicker.dates['es'] = {\n\tdays: [\"Domingo\", \"Lunes\", \"Martes\", \"Miércoles\", \"Jueves\", \"Viernes\", \"Sábado\"],\n\tdaysShort: [\"Dom\", \"Lun\", \"Mar\", \"Mié\", \"Jue\", \"Vie\", \"Sáb\"],\n\tdaysMin: [\"Do\", \"Lu\", \"Ma\", \"Mi\", \"Ju\", \"Vi\", \"Sa\"],\n\tmonths: [\"Enero\", \"Febrero\", \"Marzo\", \"Abril\", \"Mayo\", \"Junio\", \"Julio\", \"Agosto\", \"Septiembre\", \"Octubre\", \"Noviembre\", \"Diciembre\"],\n\tmonthsShort: [\"Ene\", \"Feb\", \"Mar\", \"Abr\", \"May\", \"Jun\", \"Jul\", \"Ago\", \"Sep\", \"Oct\", \"Nov\", \"Dic\"],\n\ttoday: \"Hoy\",\n\tmonthsTitle: \"Meses\",\n\tclear: \"Borrar\",\n\tweekStart: 1,\n\tformat: \"yyyy-mm-dd\"\n};\n\n$.fn.datepicker.defaults.language = \"es\"\n```\n\n## Usage\n\n```erb\n\u003c%= bootstrap_form_for(@object) do |f| %\u003e\n  \u003c%= f.form_group do %\u003e\n    \u003c%= f.label :product_id %\u003e\n    \u003c%= f.collection_select :product_id, @products, :id, :name, class: 'special-select-class-if-needed' %\u003e\n  \u003c% end %\u003e\n\n  \u003c%= f.form_group do %\u003e\n    \u003c%= f.label :name %\u003e\n    \u003c%= f.number_field :name %\u003e\n  \u003c% end %\u003e\n\n  \u003c!-- select2 support --\u003e\n  \u003c%= f.form_group do %\u003e\n    \u003c%= f.label :product %\u003e\n    \u003c%= f.collection_select2 :product_id, @products, :name, :id %\u003e\n  \u003c% end %\u003e\n\n  \u003c!-- select2 support for checkboxes --\u003e\n  \u003c%= f.form_group do %\u003e\n    \u003c%= f.label :products %\u003e\n    \u003c%= f.collection_check_boxes2 :product_id, @products, :name, :id %\u003e\n  \u003c% end %\u003e\n\n  \u003c%= f.submit 'Great!' %\u003e\n\u003c% end %\u003e\n```\n\n### Modals\n```erb\n\u003c%= modal 'filter-modal' do %\u003e\n  \u003c%= modal_header 'One fine title'%\u003e\n  \u003c%= modal_body do %\u003e\n    One fine body\n  \u003c% end %\u003e\n  \u003c%= modal_footer do %\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\"\u003eCancel\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" data-dismiss=\"modal\"\u003eSubmit\u003c/button\u003e\n  \u003c% end %\u003e \u003c!--  end modal_footer --\u003e\n\u003c% end %\u003e \u003c!-- end modal --\u003e\n```\n\n### Breadcrumbs\nIn your layout render the partial wherever your like\n```erb\n\u003c%= render 'binco/breadcrumb' %\u003e\n```\nIn your views, add an element to breadcrumb with:\n```erb\n\u003c% breadcrumb_add(title: 'new', url: pages_new_path) %\u003e\n```\nNotice that first in first out. So be careful with the order.\n\nYour can configure your placeholder and default url for the breadcrumb in an initializer:\n\n```rb\nBinco.configure do |binco|\n  binco.breadcrumb_before = { title: 'You are here' }\n  binco.breadcrumb_default = [\n    { title: 'Index', url: '/' }\n  ]\nend\n```\n\n### Pagination\n\n#### Will Paginate\n\nAdd Will Paginate to your Gemfile\n\n```\ngem \"will_paginate\", '~\u003e 3.0'\n```\n\n```ruby\n# controller\n@posts = Post.all.page(params[:page])\n```\n\n```erb\n\u003c!-- View --\u003e\n\u003c%= render 'binco/pagination', collection: @posts %\u003e\n```\n\nThis project rocks and uses MIT-LICENSE.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodn%2Fbinco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodn%2Fbinco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodn%2Fbinco/lists"}