Curso Web Design Responsivo - Parte 3 de 4

Parte 3 de 4: Criando seu próprio grid.

Como criar seu proprio grid, seguindo a filosofia de Chris Coyier (http://css-tricks.com/dont-overthink-it-grids) de procurar manter markup & CSS simples. Também um pouco sobre imagens responsivas e as novas especificações.

Curso ministrado em Março/2014.

#rwd #responsive #webdesign #course #NIC.

Transcript

1. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do Responsive Web Design ! 1. Design flexível, baseado em grids;! 2. Imagens e mídias flexíveis;! 3. Media-queries. #RWD
2. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Eu Mesmo @rhawbert “Não há regras… cada vez você adapta ou cria seu próprio grid.”
3. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 *, *:after, *:before { box-sizing: border-box; } Elementos do RWD: o Grid Largura definida não sofre influência do padding e border
4. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid
5. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 <div class="container">! ! <div class="row">! <div class="col-2-3">! Conteúdo principal! </div>! <div class="col-1-3">! Barra lateral! </div>! </div>! </div> Elementos do RWD: o Grid Chris Coyier http://css-tricks.com/dont-overthink-it-grids/ Não complique o Grid!
6. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Chris Coyier http://css-tricks.com/dont-overthink-it-grids/ Container = contexto controlável .container { width: 90%; background: pink; margin: 0 auto; }
7. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 .col-2-3 { width: 66.66%; background: red; } .col-1-3 { width: 33.33%; background: green; } Elementos do RWD: o Grid Duas colunas
8. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 [class*='col-'] { float: left; padding-right: 20px; } ! [class*='col-']:last-of-type { padding-right: 0; } Elementos do RWD: o Grid Alinhe colunas à esquerda e defina os gutters
9. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Gutters! Espaço entre as unidades. padding-right = gutters
10. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 .row { margin: 0 0 20px 0; } ! .row:after { content: ""; display: table; clear: both; } Elementos do RWD: o Grid Regras genéricas
11. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Criar mais uma linha com 3 colunas <div class="container">! ! <div class="row">! <div class="col-2-3">! Conteúdo principal! </div>! <div class="col-1-3">! Barra lateral! </div>! </div>! ! <div class="row">! ! <div class="col-1-5">! Coluna 1 - um quinto! ! </div>! ! <div class="col-2-5">! Coluna 2 - dois quintos! ! </div>! ! <div class="col-2-5">! Coluna 3 - dois quintos! </div>! </div>! </div>
12. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Cadê o background do container? .container { width: 90%; background: pink; margin: 0 auto; } ? .container:after { content: ""; display: table; clear: both; }
13. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 .col-1-5 { width: 20%; } ! .col-2-5 { width: 40%; } Elementos do RWD: o Grid 3 colunas, 5 possibilidades .col-3-5 { width: 60%; } ! .col-4-5 { width: 80%; } .col-5-5 { width: 100%; }
14. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Visualizar os Gutters e as Colunas [class*='col-'] { float: left; padding-right: 20px; outline: 1px solid yellow; background-clip: content-box; background-color: silver; }
15. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Brinque com seu novo Grid 1/5 2/5 2/5 1/5 3/5 1/5 1/5 1/5 3/5 Layouts de 3 colunas
16. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 3 colunas de 4 unidades Elementos do RWD: o Grid Colunas! Grupos de unidades
17. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Brinque com seu novo Grid 2/3 1/3 1/3 2/3 Layouts de 2 colunas
18. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid ! <div class="row">! ! <div class=“col-2-5 push-right-3-5">! Uma coluna - à direita! ! </div>! </div>! Empurrar ou puxar Apenas uma coluna à direita
19. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid .push-right-3-5 { margin-left: 60%; } .push-right-1-5 { margin-left: 20%; } .push-right-2-5 { margin-left: 40%; } .push-right-4-5 { margin-left: 80%; } Empurrar ou puxar Apenas uma coluna à direita
20. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Empurrar ou puxar Apenas uma coluna à direita
21. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Empurrar ou puxar Brinque de empurrar colunas no seu Grid Layouts de 3 colunas largura 2/5 push-right 3/5 largura 2/5 push-right 1/5 largura 1/5 push-right 1/5 largura 2/5 push-right 1/5
22. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: o Grid Flexbox Grids do futuro (ou do presente)
23. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do Responsive Web Design ! 1. Design flexível, baseado em grids;! 2. Imagens e mídias flexíveis;! 3. Media-queries. #RWD
24. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 ! <div class="row">! ! <div class="col-1-5">! <img src="http://placehold.it/500x300" alt="Um gato" />! ! ! ! Coluna 1 - um quinto! ! </div>! ! <div class="col-2-5">! Coluna 2 - dois quintos! ! </div>! ! <div class="col-2-5">! Coluna 3 - dois quintos! </div>! </div> Elementos do RWD: Imagens Flexíveis Adicione uma imagem! Na 1ª coluna da 2ª linha
25. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Imagens Flexíveis img { display: block; max-width: 100%; /* relativo ao pai */ height: auto; /* evita distorção */ }
26. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Imagens Flexíveis Sem relação com “imagens responsivas"! ! Todos dispositivos recebem a mesma imagem
27. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos do RWD: Imagens Flexíveis responsiveimages.org ! Nova especificação, 27 de Fev. <img src="fallback.jpg" alt="" srcset="photo.jpg 1x, photo-hd.jpg 2x"> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=“cat.jpg"> </picture>
28. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014