Bootstrapping web applications without Bootstrap

Bootstrapping web applications without Bootstrap

E se eu lhe disesse que você pode fazer o bootstrapping de uma aplicação web sem utilizar o Twitter Bootstrap? E mais, e se essa alternativa fosse mais organizada, mais fácil, mais flexível, e proporcionasse a você escrever um HTML muito mais semântico? Parece utópico? Nesse lightning talk, vamos fazer um overview nos frameworks de front-end da Thoughtbot(Bourbon, Neat, Bitters & Refills) e como em conjunto eles podem ser uma alternativa ao Twitter Bootstrap em diversas ocasiões.

712482e916eee28179ab7cd76710bbb4?s=128

mateusrevoredo

August 27, 2015
Tweet

Transcript

  1. Bootstrapping Applications Without Bootstrap

  2. Mateus Revoredo Engenheiro de Sistemas C.E.S.A.R

  3. Jogo

  4. Guess the browser A fun game for all the family!!!

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. Disclaimer

  16. Não sou fanboy Não acho que um vai matar o

    outro Não acho que o que irei apresentar serve para tudo
  17. Interfaces Responsivas

  18. Twitter Bootstrap

  19. None
  20. None
  21. None
  22. None
  23. None
  24. "A simple and lightweight mixin library for Sass." — http://bourbon.io/

  25. Família de Fontes From font-family: $lucida-grande; To font-family: "Lucida Grande",

    Tahoma, Verdana, Arial, sans-serif;
  26. Browser Prefixes From @include transform( rotate(45deg) skew(20deg, 30deg)) To -webkit-transform:

    rotate(45deg) skew(20deg, 30deg); -moz-transform: rotate(45deg) skew(20deg, 30deg); -ms-transform: rotate(45deg) skew(20deg, 30deg); -o-transform: rotate(45deg) skew(20deg, 30deg); transform: rotate(45deg) skew(20deg, 30deg);
  27. Outras Funções Gradientes @include linear-gradient(#1e5799, #2989d8); Telas Retina @include hidpi(1.5)

    { width: 20em; }
  28. Instalação $ gem install bourbon $ bourbon install Arquivo CSS

    @import "bourbon/bourbon";
  29. None
  30. "A lightweight semantic grid framework for Sass and Bourbon." —

    http://neat.bourbon.io/
  31. None
  32. None
  33. Bootstrap <div class="container-fluid"> <div class="row"> <div class="sidebar col-xs-4"> Conteúdo Lateral

    </div> <div class="content col-xs-8"> Conteúdo Principal </div> </div> <div class="row"> <div class="footer col-xs-12"> Rodapé </div> </div> </div>
  34. Bourbon/Neat <div class="container"> <div class="sidebar"> Conteúdo Lateral </div> <div class="content">

    Conteúdo Principal </div> <div class="footer"> Rodapé </div> </div>
  35. Bourbon/Neat .container { @include outer-container; .sidebar { @include span-columns(4); }

    .content { @include span-columns(8); @include omega(); } .footer { @include span-columns(12); } }
  36. Visual Grid $visual-grid: true; $visual-grid-color: yellow; $visual-grid-index: front; $visual-grid-opacity: 0.5;

  37. None
  38. Mobile Breakpoints $mobile: new-breakpoint(max-width 640px 6); $tablet: new-breakpoint(max-width 965px 4);

    $Nome | Tamanho (px, em) | Colunas(2,6,12)
  39. None
  40. Instalação $ gem install neat $ neat install Arquivo CSS

    @import "bourbon/bourbon"; @import "neat/neat";
  41. None
  42. "Scaffold styles, variables and structure for Bourbon projects." — http://bitters.bourbon.io/

  43. Scaffold _base.scss _buttons.scss _forms.scss _grid-settings.scss _lists.scss _tables.scss _typography.scss _variables.scss

  44. _grid-settings.scss @import "neat-helpers"; // or "../neat/neat-helpers" when not in Rails

    // Neat Overrides // $column: 90px; // $gutter: 30px; // $grid-columns: 12; // $max-width: em(1088); // Neat Breakpoints $medium-screen: em(640); $large-screen: em(860); $medium-screen-up: new-breakpoint(min-width $medium-screen 4); $large-screen-up: new-breakpoint(min-width $large-screen 8);
  45. Instalação $ gem install bitters $ bitters install Arquivo CSS

    @import "bourbon/bourbon"; @import "neat/neat"; @import "base/base";
  46. None
  47. None
  48. "Components and patterns built with Bourbon and Neat." — http://refills.bourbon.io/

  49. None
  50. Copy your code Força usuário a fazer escolhas conscientes

  51. Pra sintetizar • É muito pequeno. Começa com pouquíssimos KB.

    • Apenas use o que você precisa. • 100% semântico, separando as responsabilidades. • Sem prefixos de browser. • Grid visual. • Breakpoints fáceis.
  52. None
  53. None
  54. None