Bh · Bootstrap Helpers for Ruby

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

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

Transcript

1. github.com/fullscreen/bh ! _ççíëíê~é=eÉäéÉêë= Ñçê=RìÄó _Ü
2. qi;aR _ççíëíê~é=‛=äÉëë=`pp _Ü=‛=äÉëë=eqji
3. ïáíÜçìí=`pp
4. ïáíÜ=_ççíëíê~é=`pp
5. ïáíÜ=_ççíëíê~é=`pp=Eáåî~äáÇ=ÑáÉäÇF
6. ïáíÜ=_ççíëíê~é=`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>
7. ïáíÜ=_ççíëíê~é=`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 %>
8. ïáíÜ=_Ü=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 %>
9. cêçã=Üçêáòçåí~ä=ÑçêãÁ
10. Áíç=áåäáåÉ=ÑçêãÁ
11. Áí~âÉë=~=ëÉÅçåÇ=ïáíÜ=_Ü> <%= 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 %>
12. ^åçíÜÉê=Éñ~ãéäÉW=Ä~ëáÅ=ãçÇ~ä
13. ^åçíÜÉê=Éñ~ãéäÉW=Ä~ëáÅ=ãçÇ~ä
14. _~ëáÅ=ãçÇ~ä=ïáíÜ=_ÜW=çåÉ=äáåÉ=çÑ=ÅçÇÉ <%= modal title: 'What is Gorilla?', body: 'A tool provided by Fullscreen to YouTube creators to monetize their videos.' %>
15. _~ëáÅ=ãçÇ~ä=ïáíÜçìí=_Ü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>
16. ^äÉêíë m~åÉäë jçÇ~äë k~îë k~îÄ~êë cçêãë däóéÜáÅçåë `ak ^î~áä~ÄäÉ=ÜÉäéÉêë=EãçêÉ=íç=ÅçãÉF _ìííçåë
17. ! eçãÉ=‛= `çÇÉ=‛= aÉÅâ=‛= dáëíë=‛ qÜ~åâë> fullscreen.github.io/bh github.com/fullscreen/bh speakerdeck.com/claudiob git.io/sY1Itw