Bootstrap: The Right Way

A compilation of good practices to use Bootstrap.

We do not deliver a cake recipe for you. We will show positive and negative points to be analyzed and used according to the needs of your project.

Transcript

1. The Right Way Bootstrap B
2. Luiz Tiago Software  Developer  @  Wobo  Inc.   CTO  @  MGR  Tech   Co-­‐founder  Pernambuco.JS  /  jQuery  Brasil   Organizador  Pernambuco.JS  /  Front  in  Recife   Reviewer  da  O’Reilly  &  Novatec
4. Bootstrap makes front-end web development faster and easier. B
5. E o harder? Ruby + Python = RuPy Ruby | Python | Javascript CSS
6. Timeline Past Frames   Tables   Tableless   Divless
7. Timeline Present Modular  CSS   Clean  code   Mobile  First   Bootstrap  |  Foundation  |  …
8. Bootstrap: The Right Way Project  leader   2  days  ago   1  contributor www.bootstraptherightway.com 3  contributors
9. GETTING STARTED How to install
10. Download || CDN Requisições em paralelo Reduz tráfego no servidor Importa todo o código Não permite customização de variáveis Impossibilita uso de mixins
11. Bower $ bower install bootstrap
12. Ruby Gem gem 'bootstrap-sass', '~> 3.3.1'
13. CUSTOMIZATION
14. Nunca  faça  qualquer   mudança  nos   arquivos  do   Bootstrap.
15. Variables Grids
 $grid-­‐columns:  12   $grid-­‐gutter-­‐width:  30px Inputs
 $input-­‐border:  #ccc   $input-­‐border-­‐focus:  #66afe9 Components
 $border-­‐radius-­‐small:  5px Colors
 $body-­‐bg:  #fff   $text-­‐color:  $gray-­‐dark Fonts
 $font-­‐family-­‐sans-­‐serif:  "Helvetica“   $font-­‐size-­‐base:  14px Media  queries  breakpoints   $screen-­‐xs:  480px   $screen-­‐lg:  1200px http://getbootstrap.com/customize/#less-­‐variables
16. Modules Pequenos  componentes Independentes Flexíveis Facilmente  portáveis Sempre  usando  classes Widgets       Carousels       Dialogs       Headers       Datepickers
17. Modules
18. Overrides Reescrita  :) Customizações Legibilidade  do  código Organização  dos  módulos Alerts       Panels         Pagination       Theme Navbar       Sempre  usando  classes
19. Overrides
20. Files structure /stylesheets !"" application.css.sass !"" _variables.css.sass !"" /modules # !"" _carousel.css.sass # !"" _dialog.css.sass # $"" ... $"" /overrides !"" _alert.css.sass !"" _form.css.sass !"" _dropdown.css.sass $"" ... Modules Variables Overrides CORE
21. Classless
22. The wrong way
23. The right way
24. 24 GRID
25. GRID • Um  dos  módulos  mais  utilizados  do  Bootstrap   • Default:  12  columns   • Default:  4  breakpoints   • 12  *  4  =  48  classes  apenas  de  colunas   • 636  linhas  O_O
26. GRID
27. GRID
28. E  disso,     quanto  você  usa?
29. www.rupy.com.br
30. The right way
31. 31 FORM
32. Form default
33. Form default
34. Form inline
35. Form inline
36. Você  pode  passar  os  formulários  da   minha  app  para  layout  horizontal?
37. Form horizontal
38. Form horizontal
40. The right way
41. Bootstrap 4.0 • Updated  grid  system  \o/   • A  brand  new  component  to  replace  panels,  thumbnails   • A  completely  new,  simpler  navbar  \o/   • Switch  all  pixel  values  over  to  rems  and  ems   • Dropped  support  for  IE8   • Brand  new  documentation  (written  in  Markdown,  too!)   • A  new  approach  to  configuring  global  theming  options
42. Bootstrap: The Right Way www.bootstraptherightway.com luiztiago @luiztiago luiztiago luiztiago@gmail.com