Bootstrap - The Right Way (Front in Fortaleza)

Bootstrap: The Right Way by Luiz Tiago Oliveira
Published November 29, 2014 in Technology

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 Team  Leader  @  Wobo  Inc.  /  CA   CTO  @  MGR  Tech   Co-­‐founder  Pernambuco.JS  /  jQuery  Brasil  /  Node.JS  Brasil   Organizador  Pernambuco.JS  /  Front  in  Recife   Reviewer  da  O’Reilly  &  Novatec
5. Bootstrap makes front-end web development faster and easier. B
6. Timeline Past Frames   Tables   Tableless   Divless
7. Timeline Present Modular  CSS   Clean  code   Mobile  First   Bootstrap  |  Foundation  |  …
9. Bootstrap: The Right Way Project  leader   www.bootstraptherightway.com
10. GETTING STARTED How to install
11. 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
12. Bower $ bower install bootstrap
13. Ruby Gem gem 'bootstrap-sass', '~> 3.3.1'
14. CUSTOMIZATION
15. Nunca  faça  qualquer   mudança  nos   arquivos  do   Bootstrap.
16. 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
17. Modules Pequenos  componentes Independentes Flexíveis Facilmente  portáveis Sempre  usando  classes Widgets       Carousels       Dialogs       Headers       Datepickers
18. Modules
19. Overrides Reescrita  :) Customizações Legibilidade  do  código Organização  dos  módulos Alerts       Panels         Pagination       Theme Navbar       Sempre  usando  classes
20. Overrides
21. 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
22. Classless
23. The wrong way
24. The right way
25. 25 GRID
26. 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
27. GRID
28. GRID
29. E  disso,     quanto  você  usa?
31. The right way
32. 32 FORM
33. Form default
34. Form default
35. Form inline
36. Form inline
37. Você  pode  passar  os  formulários  da   minha  app  para  layout  horizontal?
38. Form horizontal
39. Form horizontal
41. The right way
42. 42 NAVBAR
44. 44 Navbar
45. 45 Navbar
46. 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
47. Bootstrap: The Right Way www.bootstraptherightway.com luiztiago @luiztiago luiztiago luiztiago@gmail.com