Bootstrapping web applications without Bootstrap

Slide 1

Slide 1 text

Bootstrapping Applications Without Bootstrap

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Jogo

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Disclaimer

Slide 16

Slide 16 text

Não sou fanboy Não acho que um vai matar o outro Não acho que o que irei apresentar serve para tudo

Slide 17

Slide 17 text

Interfaces Responsivas

Slide 18

Slide 18 text

Twitter Bootstrap

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

"A simple and lightweight mixin library for Sass." — http://bourbon.io/

Slide 25

Slide 25 text

Família de Fontes From font-family: $lucida-grande; To font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;

Slide 26

Slide 26 text

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);

Slide 27

Slide 27 text

Outras Funções Gradientes @include linear-gradient(#1e5799, #2989d8); Telas Retina @include hidpi(1.5) { width: 20em; }

Slide 28

Slide 28 text

Instalação $ gem install bourbon $ bourbon install Arquivo CSS @import "bourbon/bourbon";

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

"A lightweight semantic grid framework for Sass and Bourbon." — http://neat.bourbon.io/

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Bootstrap

Conteúdo Lateral

Conteúdo Principal

Rodapé

Slide 34

Slide 34 text

Bourbon/Neat

Conteúdo Lateral

Conteúdo Principal

Rodapé

Slide 35

Slide 35 text

Bourbon/Neat .container { @include outer-container; .sidebar { @include span-columns(4); } .content { @include span-columns(8); @include omega(); } .footer { @include span-columns(12); } }

Slide 36

Slide 36 text

Visual Grid $visual-grid: true; $visual-grid-color: yellow; $visual-grid-index: front; $visual-grid-opacity: 0.5;

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Mobile Breakpoints $mobile: new-breakpoint(max-width 640px 6); $tablet: new-breakpoint(max-width 965px 4); $Nome | Tamanho (px, em) | Colunas(2,6,12)

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Instalação $ gem install neat $ neat install Arquivo CSS @import "bourbon/bourbon"; @import "neat/neat";

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

"Scaffold styles, variables and structure for Bourbon projects." — http://bitters.bourbon.io/

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

_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);

Slide 45

Slide 45 text

Instalação $ gem install bitters $ bitters install Arquivo CSS @import "bourbon/bourbon"; @import "neat/neat"; @import "base/base";

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

"Components and patterns built with Bourbon and Neat." — http://refills.bourbon.io/

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Copy your code Força usuário a fazer escolhas conscientes

Slide 51

Slide 51 text

Pra sintetizar • É muito pequeno. Começa com pouquíssimos KB. • Apenas use o que você precisa. • 100% semântico, separando as responsabilidades. • Sem preﬁxos de browser. • Grid visual. • Breakpoints fáceis.