BootstrapLeather

Updated for Rails 5

BootstrapLeather is a collection of view helpers that makes it easier to create apps using Twitter Bootstrap.

Installation

Add this line to your application's Gemfile:

gem 'bootstrap_leather'

And then execute:

$ bundle

Or install it yourself as:

$ gem install bootstrap_leather

You will need to install bootstrap as a separate gem or include the css yourself.

To install a default initializer:

$ rails g bootstrap_leather:install

Usage

Give your views access to the helpers with:

class ApplicationController < ActionController::Base
  helper BootstrapLeather::ApplicationHelper
end

SEO tools for head and body: Title, Keywords, Description

In your view, assuming your model implements the given methods on the Item model (otherwise, omit):

- add_title @item.title
- add_keywords @item.keywords
- add_description @item.description
- add_head_css do
  = @item.css
- add_footer_javascript do
  = @item.javascript

In your layout:

%html
  %head
    = render_title          # For the title tag, including SEO content
    = render_keywords       # Defaults to what you put in the config file
    = render_description    # Can be hooked up within a mountable rails engine, too.
    = responsive_meta_tag   # If you're using the responsive features, you need this in your head

    <...>

    = render_head_css
  %body
    <...>

    .container
      = render_page_header         # For the h1 tag containing the title and subtitle
      = yield

      <...>

    %footer
    = render_footer_javascript

Hero Units

To tell a view to add a hero unit, do:

- add_hero_unit do
  %h1 This is a Hero Unit.
  %p This is its description paragraph, which isn't very clever but at least it's not lorem ipsum.

Then put one of these somewhere in your layout:

= render_hero_unit

Alerts

To get all alerts, do:

= alert_flash_messages

To create one alert, do:

= alert 'info', 'The message you want to alert with goes here.'

Widgets

To add a widget in any of your views:

- add_widget do
  %h3 A widget is...
  %p  Not a bootstrap concept, but useful all the same.

To render the ones you have saved up:

= render_widgets 'md', 3

Modals

= modal 'css-id', 'Title of the modal here.' do
  %p Lorem ipsum, baby.

Badges and Labels

= badge '25'
= label 'unread'

Icons

= icon 'check'
= icon_link_to 'check', 'Link Text', link_path
= icon_button_to 'success', 'check', 'Link Text', link_path

Navbars

:container_mode is optional and defaults to :none. Can be one of: [:none, :inside, :outside]

For a wide navbar, try this:

= navbar :container_mode => :outside, :class => 'navbar-inverse' do
  = nav_list do
    = dropdown_nav_item 'Lorem', '#' do
      = nav_item 'Ipsum', '#'
      = nav_item 'Dolor', '#'
      = nav_item 'Sit', '#'
    = nav_item 'Ipsum', '#'
    = nav_item 'Dolor', '#'
    = nav_item 'Sit', '#'
  = nav_list :class => 'navbar-right' do
    = nav_item 'Amet', '#', :data => {:toggle => 'modal', :target => '#modal'}

Nav List

= nav_list :class => 'nav-pills' do
  = nav_item 'Ipsum', '#'
  = nav_item 'Dolor', '#'
  = nav_item 'Sit', '#'

Tabs

First, add them all:

- add_tab 'First Tab', 'first-tab' do
  %p Tab contents go inside.
- add_tab 'Second Tab', 'second-tab' do
  %p Tab contents go inside here too.
- add_tab 'Third Tab', 'third-tab' do
  %p Yep, tab contents go inside.

Then render them.

= render_tabs 'left'

Carousel

Pass in an id string, items and a block for each slide:

= carousel 'css-id-for-carousel', @items do |item|
  .carousel-caption
    %h3= item.title
    %p= item.description
  = image_tag item.image.url(:large)

Carousel with Thumbnails