Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bh · Bootstrap Helpers for Ruby

Claudio B.
September 11, 2014

Bh · Bootstrap Helpers for Ruby

Presented at the L.A. Ruby meetup, September 2014

More info about Bh at http://fullscreen.github.io/bh

Claudio B.

September 11, 2014
Tweet

More Decks by Claudio B.

Other Decks in Programming

Transcript

  1. ïáíÜ=_ççíëíê~é=`pp=EäçåÖ=eqji=ÑáäÉ>F <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>
  2. ïáíÜ=_ççíëíê~é=`pp=EäçåÖ=bR_=ÑáäÉ>F <%= 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 %>
  3. ïáíÜ=_Ü=EëÜçêí=bR_=ÑáäÉF <%= 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 %>
  4. Áí~âÉë=~=ëÉÅçåÇ=ïáíÜ=_Ü> <%= 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 %>
  5. _~ëáÅ=ãçÇ~ä=ïáíÜçìí=_ÜW=OM=äáåÉë=çÑ=ÅçÇÉ <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>