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ìÄó
   _Ü
   

   View Slide

2. qi;aR
   _ççíëíê~é=‛=äÉëë=`pp
   _Ü=‛=äÉëë=eqji
   

   View Slide

3. ïáíÜçìí=`pp
   

   View Slide

4. ïáíÜ=_ççíëíê~é=`pp
   

   View Slide

5. ïáíÜ=_ççíëíê~é=`pp=Eáåî~äáÇ=ÑáÉäÇF
   

   View Slide

6. ïáíÜ=_ççíëíê~é=`pp=EäçåÖ=eqji=ÑáäÉ>F
   id="new_user" method="post" role="form">
   
   
   Forgot your password?
   
   
   
   
   Email
   
   
   
   name="user[email]" placeholder="Email" size="30" type="email">
   
   
   can't be blank
   
   
   
   
   
   
   
   
   

   View Slide

7. ïáíÜ=_ççíëíê~é=`pp=EäçåÖ=bR_=ÑáäÉ>F
   <%= form_for User.new url: '/users/password', html:
   {method: :post, role: 'form', class: 'form-horizontal'} do |f| %>
   !
   
   Forgot your password?
   
   !
   
   <%= f.label :email, class: 'col-sm-3 control-label' %>
   
   <%= f.email_field :email, autofocus: true, class: 'form-control',
   placeholder: 'Email' %>
   <% if resource.errors[:email].any? %>
   
   <%=
   resource.errors[:email].to_sentence %>
   <% end %>
   
   
   !
   
   <%= f.submit 'Send reset password instructions',
   class: 'btn btn-primary' %>
   
   !
   <% end %>
   

   View Slide

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 %>
   

   View Slide

9. cêçã=Üçêáòçåí~ä=ÑçêãÁ
   

   View Slide

10. Áíç=áåäáåÉ=ÑçêãÁ
    

    View Slide

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 %>
    

    View Slide

12. ^åçíÜÉê=Éñ~ãéäÉW=Ä~ëáÅ=ãçÇ~ä
    

    View Slide

13. ^åçíÜÉê=Éñ~ãéäÉW=Ä~ëáÅ=ãçÇ~ä
    

    View Slide

14. _~ëáÅ=ãçÇ~ä=ïáíÜ=_ÜW=çåÉ=äáåÉ=çÑ=ÅçÇÉ
    <%= modal title: 'What is Gorilla?', body: 'A tool provided by
    Fullscreen to YouTube creators to monetize their videos.' %>
    

    View Slide

15. _~ëáÅ=ãçÇ~ä=ïáíÜçìí=_ÜW=OM=äáåÉë=çÑ=ÅçÇÉ
    
    What is Gorilla?
    
    !
    aria-labelledby=“label-modal-3758641332">
    !
    
    
    !
    
    
    ×Close
    
    
    What is Gorilla?
    
    
    !
    
    A tool provided by Fullscreen to YouTube creators to monetize their videos.
    
    !
    
    
    !
    
    

    View Slide

16. ^äÉêíë
    m~åÉäë
    jçÇ~äë k~îë
    k~îÄ~êë
    cçêãë
    däóéÜáÅçåë
    `ak
    ^î~áä~ÄäÉ=ÜÉäéÉêë=EãçêÉ=íç=ÅçãÉF
    _ìííçåë
    

    View Slide

17. !
    eçãÉ=‛=
    `çÇÉ=‛=
    aÉÅâ=‛=
    dáëíë=‛
    qÜ~åâë>
    fullscreen.github.io/bh
    github.com/fullscreen/bh
    speakerdeck.com/claudiob
    git.io/sY1Itw
    

    View Slide