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.

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!!!
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
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";
30. "A lightweight semantic grid framework for Sass and Bourbon." — http://neat.bourbon.io/
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;
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)
40. Instalação $ gem install neat $ neat install Arquivo CSS @import "bourbon/bourbon"; @import "neat/neat";
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";
48. "Components and patterns built with Bourbon and Neat." — http://refills.bourbon.io/
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.