Bh · Bootstrap Helpers for Ruby

Bh · Bootstrap Helpers for Ruby.md

Code snippets for the presentation about Bh · Bootstrap Helpers, comparing code to display:

1. A horizontal form (HTML, without Bh)
2. A horizontal form (ERB, without Bh)
3. A horizontal form (ERB, with Bh)
4. An inline form (ERB, with Bh)
5. A simple modal (ERB, with Bh)
6. A simple modal (ERB, without Bh)

01-horizontal_form.html

<form accept-charset="UTF-8" action="/users/password" class="form-horizontal" id="new_user" method="post" role="form">
  <div class="form-group">
    <div class="col-sm-12">
      <legend class="text-center">Forgot your password?</legend>
    </div>
  </div>
  <div class="form-group has-error has-feedback">
    <div class="field_with_errors">
      <label class="col-sm-3 control-label" for="user_email">Email</label>
    </div>
    <div class="col-sm-9">
      <div class="field_with_errors">
        <input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" placeholder="Email" size="30" type="email">
      </div>
      <span class="form-control-feedback glyphicon glyphicon-remove"></span>
      <span class="help-block text-left">can't be blank</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <input class="btn btn-primary" name="commit" type="submit" value="Send reset password instructions">
    </div>
  </div>
</form>

02-horizontal_form.html.erb

<%= form_for User.new url: '/users/password', html: {method: :post, role: 'form', class: 'form-horizontal'} do |f| %>
  <div class="form-group">
    <div class="col-sm-12">
      <legend class="text-center">Forgot your password?</legend>
    </div>
  </div>

  <div class="form-group<%= ' has-error has-feedback' if resource.errors[:email].any? %>">
    <%= f.label :email, class: 'col-sm-3 control-label' %>
    <div class="col-sm-9">
      <%= f.email_field :email, autofocus: true, class: 'form-control', placeholder: 'Email' %>
      <% if resource.errors[:email].any? %>
       <span class="form-control-feedback glyphicon glyphicon-remove"></span>
       <span class="help-block text-left"><%= resource.errors[:email].to_sentence %></span>
      <% end %>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <%= f.submit 'Send reset password instructions', class: 'btn btn-primary' %>
    </div>
  </div>
<% end %>

03-horizontal_form_bh.html.erb

<%= form_for User.new, url: '/users/password', html: {method: :post}, layout: :horizontal do |f| %>
  <%= f.legend 'Forgot your password?', class: 'text-center' %>
  <%= f.email_field :email, autofocus: true %>
  <%= f.submit 'Send reset password instructions' %>
<% end %>

04-inline_form_bh.html.erb

<%= form_for User.new, url: '/users/password', html: {method: :post}, layout: :inline do |f| %>
  <%= f.legend 'Forgot your password?', class: 'text-center' %>
  <%= f.email_field :email, autofocus: true %>
  <%= f.submit 'Send reset password instructions’, context: :success %>
<% end %>

05-modal_bh.html.erb

<%= modal title: 'What is Gorilla?', body: 'A tool provided by Fullscreen to YouTube creators to monetize their videos.' %>

06-modal.html.erb

<button class="btn btn-default" data-toggle="modal" data-target="#modal-375">
  What is Gorilla?
</button>

<div class="modal fade" id="modal-375" tabindex="-1" role="dialog" aria-labelledby=“label-modal-3758641332">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id=“label-modal-3758641332">
          What is Gorilla?
        </h4>
      </div>

      <div class=“modal-body">
        A tool provided by Fullscreen to YouTube creators to monetize their videos.
      </div>
   </div>
  </div>
</div>