Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas

1.

Desvendando os limites do universo front-end: um panorama de ferramentas
e técnicas

2.

Buenas?!

3.

Jean Carlo Emer artesão da internet github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer

4.

None

5.

None

6.

Atenção! O importante é que seu produto funcione e seja
fácil de manter

7.

Mas... Se você acha que pode ir além no seu
ﬂuxo de desenvolvimento, esta palestra é para você!

8.

Conte-me mais! Quero saber como começo meu projeto!

9.

Boilerplates

10.

Base sólida e reusável para seu projeto entalhada com boas
práticas

11.

Boa organização de arquivos Estrutura inicial de HTML, CSS e
JS Robots.txt e humans.txt Favicon e apple icons HTML5 Boilerplate http:/ /html5boilerplate.com

12.

HTML Deﬁne viewport para projetos responsivos

13.

<head> <meta name="viewport" content="width=1024"> Viewport para site não responsivo HTML

14.

Inclui Modernizr com todas as detecções apenas html5shiv (IE8,7) ou
o Modernizr customizado incluíndo html5shiv <script src="html5shiv.min.js"> </script> </head> HTML

15.

Página de erro 404 UTF-8 para CSS e JS Entrega
de arquivos compactados http://gzipwtf.com Deﬁne expiração dos arquivos Apache

16.

Na versão 2.0.0 mudou de Reset.css para Normalize.css CSS

17.

/*! normalize.css v2.1.2 | MIT License | git.io /** *
Correct `block` display not defined in IE 8/ */ article, aside, details, figcaption, figure, fo header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined i */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `aud * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ Normalize Institui uma aparência padrão para cada elemento Corrige alguns bugs comuns normalize.css http:/ /necolas.github.io/normalize.css

18.

/** * Eric Meyer's Reset CSS v2.0 */ html, body,
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; Reset Remove toda a aparência Elementos de título, parágrafo e lista com mesma aparência CSS Tools: Reset CSS http:/ /meyerweb.com/eric/tools/ css/reset

19.

X reset normalize

20.

Sophisto Boilerplate Browsers modernos (IE9+) Stylus: pré processador de CSS
Rye.js: biblioteca JS leve substituta da jQuery Build tool e script de deploy Sophisto Boilerplate https:/ /github.com/grifo/sophisto-boilerplate

21.

None

22.

Aparência inicial Diversas APIs Suporte oﬄine Firefox OS Boilerplate App
Firefox OS Boilerplate App http:/ /github.com/robnyman/Firefox-OS-Boilerplate-App

23.

Hmmm... Mas ainda não abordamos aparência e como construir componentes!

24.

Frameworks de CSS

25.

Guia de estilo com componentes reusáveis e conﬁguráveis para seu
projeto

26.

Cuidado! Não existe uma maneira de testar folhas de estilo

27.

body, div, dl, dt, dd, ul, ol, li, h1, h2,
h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 14px; direction: ltr; } Foundation 3.0 Divs ou tds não herdam o tamanho da fonte de seus elementos pais

28.

Pure CSS Seu formulário deve sempre terminar com um radio

29.

Cuidado! Usar frameworks engessa a marcação a sua maneira

30.

<div class="border4px m10 clearfix"> <p> <i class="red">Este é um exemplo</span>
<span class="left">bem interessante</span> <span class="green">daquilo que não devemos fazer.</span> </p> <p class="right darktext">Isto é consenso?</p> </div>

31.

<div class="row"> <div class="span9"> Ótimo, muito bom! <div class="row"> <div
class="span6">E o quanto isto é diferente</div> <div class="span3 text-left">daquilo?</div> </div> </div> </div> Twitter Bootstrap 2.3 Marcação usando classes nomeadas pelo framework

32.

CSS to the heaven Tags e classes devem se referir
ao seu conteúdo e não a sua aparência Seletores devem ser o mais globais possíveis ou função, caso esteja projetando componentes

33.

Legal E agora como eu reuso e organizo meu código
CSS?

34.

CSS on Steroids

35.

Pré-processadores // Variables $site-width: 960px; $color-primary: red; $color-secondary: #EEE; //
Code .container { background: lighten($color-secondary, 10); max-width: $site-width; margin: 0 auto; @include border-radius(5px); } // Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { p { margin-bottom: 1em; } a { font-weight: bold; &:hover { background: $color-secondary; } } }

36.

Pré-processadores // CSS Code .container { background: white; max-width: 960px;
margin: 0 auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .box p { margin-bottom: 1em; } .box a { font-weight: bold; } .box a:hover { background: #eeeeee; } // Code .container { background: lighten($color-secondary, 10); max-width: $site-width; margin: 0 auto; @include border-radius(5px); } .box { p { margin-bottom: 1em; } a { font-weight: bold; &:hover { background: $color-secondary; } } }

37.

Pré-processadores Linguagem para adicionar açucar sintático não nativos ao CSS
Resultam em CSS nos padrões das especiﬁcações Nova camada que precisa ser trans- compilada

38.

@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { box-shadow: @style @c;
-webkit-box-shadow: @style @c; -moz-box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumbe .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } } @the-border: 1px; @base-color: #111; @red: #842210; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); } Padrão do Twitter Bootstrap Repetições bastante estranhas e engessadas Mantido por desenvolvedores desconhecidos

39.

border-radius() -webkit-border-radius: arguments -moz-border-radius: arguments border-radius: arguments body font: 12px
Helvetica, Arial, sans-serif background: linear-gradient(top, white, blac a.button border-radius: 5px @keyframes foo { from { color: black } to { color: white } } button { color: rgba(red, .5) border-radius: bottom 10px; } .nav { fixed: bottom 10px right 5px; } Mixins transparentes Mixins e componentes com Nib Sintaxe bastante livre Muita liberdade causa confusão

40.

$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%)
.border padding: $margin / 2 margin: $margin / 2 border-color: $blue @mixin table-base th text-align: center font-weight: bold td, th padding: 2px @mixin left($dist) float: left margin-left: $dist #data @include left(10px) @include table-base Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar Sintaxe SASS

41.

$blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue,
9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } @mixin table-base() { th { text-align: center; font-weight: bold; } td, th { padding: 2px; } } @mixin left($dist) { float: left; margin-left: $dist; } #data { @include left(10px); @include table-base; } Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar Sintaxe SCSS

42.

<3 <3 <3

43.

Atenção! Não reescreva a árvore de elementos do HTML no
CSS

44.

CSS Explain http:/ /josh.github.io/css-explain html { body { background: black;
section { padding: 20px; p { margin-bottom: 10px; a { color: blue; &:hover { text-decoration: none; } } } } } } html body section p a:hover

45.

Organizando o CSS // Libraries @import "nib" @import "settings" @import
"helper" // Core @import "core/normalize" @import "core/structure" // Shared @import "shared/header" @import "shared/footer" // Modules @import "modules/grade" @import "modules/map" // Pages @import "pages/home" @import "pages/about"

46.

None

47.

Mixins e helpers são muito úteis para deﬁnir grids Grid
semântico

48.

Grid semântico <article class="tool"> <h1 class="tool-title"> Bourbon Neat </h1> <div
class="tool-content"> <p> Neat é um framework de grid semântico. </p> <p> Sass e Bourbon são seus requisitos. </p> </div> </article> .tool { @include outer-container; } http:/ /neat.bourbon.io .tool-title { @include span-columns(3); } .tool-content { @include span-columns(9); }

49.

.header { @include outer-container; } .brand { @include span-columns(3); }
.menu { @include span-columns(9); } Grid semântico .tool { @include outer-container; } .tool-title { @include span-columns(3); } .tool-content { @include span-columns(9); }

50.

.tool { @include outer-container; } .tool-title { @include span-columns(3); }
.tool-content { @include span-columns(9); } .header { @include outer-container; } .brand { @include span-columns(3); } .menu { @include span-columns(9); } Grid semântico .brand { display: block; float: left; margin-right: 2.35765%; width: 23.23176%; } .brand:last-child { margin-right: 0; } .tool-title { display: block; float: left; margin-right: 2.35765%; width: 23.23176%; } .tool-title:last-child { margin-right: 0; } .tool-title { @include span-columns(3); } .brand { @include span-columns(3); }

51.

Ops?! Agora temos muitas regras de CSS repetidas

52.

CSSO body { padding: 0; color: red; } .element {
color: blue; color: red; } .element { padding: 0; } input { border: none; } button { border: none; } .container, .container { color: red; } body,.element{padding:0;color:red} input,button{border:none}.container{ color:red} CSSO http:/ /bem.info/tools/csso

53.

CSSO body { padding: 0; color: red; } .element {
color: blue; color: red; } .element { padding: 0; } input { border: none; } button { border: none; } .container, .container { color: red; } body, .element { padding:0; color:red } input, button { border:none } .container { color:red } CSSO http:/ /bem.info/tools/csso

54.

Frameworks de CSS conclusão Use apenas os mixins e funções
para pré-processadores de CSS Aproveite a vontade código JavaScript não atrelado a classes HTML <article class="tool"> <h1 class="tool-title">[...]</h1> <div class="tool-content">[...]</div> </article> // Mixins em LESS do Twitter Bootstrap .tool { .makeRow(); } .tool-title { .makeColumn(3); } .tool-content { .makeColumn(9); }

55.

CSS on steroids conclusão Deixe de bobagem e turbine seu
workﬂow Preﬁra o pré-processador que sua equipe se sente mais a vontade Não custa muito ativar o CSSO, mas teste bem antes de levar para produção

56.

Entendi... E o que faço com a disposição dos elementos
do meu layout?

57.

CSS Layout

58.

Box model Deﬁne tamanhos, margens, paddings... Posiciona elementos em relação
a outros ou ﬁxa eles na viewport

59.

Box model Ordena os elementos em direção vertical (block) ou
horizontal (inline)

60.

horizontal (inline)

61.

horizontal (inline)

62.

Flexbox model Não usa ﬂoats Agnóstico de direção Meios de
alinhar facilmente elementos

63.

Flexbox: flex grown e shrink grown 0 0 1

64.

Flexbox: flex grown e shrink grown 0 0 1

65.

Flexbox: flex grown e shrink grown shrink 1 1 0
grown 0 0 1

66.

Flexbox: flex grown e shrink shrink 1 1 0 0
0 1 grown

67.

Flexbox: align itens ﬂex-start ﬂex-end center stretch

68.

Flexbox: justify content ﬂex-start ﬂex-end center space-between

69.

Flexbox: flow e order Holy Grail Layout example https:/ /developer.mozilla.org/en-US/docs/Web/Guide/CSS/
Flexible_boxes

70.

Flexbox: flow e order Holy Grail Layout example https:/ /developer.mozilla.org/en-US/docs/Web/Guide/CSS/
Flexible_boxes

71.

Flexbox Flexbox é ideal para componentes W3C Candidate Recommendation Compatível
com Chrome 29+ e IE 11 @mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } .wrapper { @include flexbox(); } .item { @include flex(1 200px); @include order(2); } A Complete Guide to Flexbox http:/ /css-tricks.com/snippets/ css/a-guide-to-flexbox/

72.

Grid Ideal para layouts completos Promissor para deﬁnir disposição dos
componentes Especiﬁcação da Microsoft compatível apenas com IE 10+

73.

CSS Layout conclusão Box model ainda é o caminho, aprenda
ao máximo! Use ﬂexbox e grid em ambientes controlados, ainda tem baixa compatibidade e especiﬁcação não estável Learn CSS Layout http:/ /learnlayout.com

74.

Legal! E as media queries, podemos falar um pouco disto?

75.

Media Queries

76.

História Primeira especiﬁcação é de 2002 iPhone foi lançado em
2007 W3C recommended standard em 2012

77.

Layout responsivos Termo usado por Ethan Marcotte em artigo Responsive
Web Design em A List Apart

78.

Acessibilidade Media queries também ajudam na acessibilidade http:/ /sergiolopes.org/media-queries-zoom

79.

Modularização A buzzword da vez no universo front-end é modularização
Media queries são globais, com base na viewport

80.

Cuidado! Vamos falar do universo dos sonhos desde aqui para
frente

81.

http://ianstormtaylor.com/media-queries-are-a-hack

82.

None

83.

Meu produto Módulos

84.

Meu produto Layout responsivo

85.


86.


87.

None

88.

Make it so, internetz Element level media queries Acelerar a
implementação de ﬂexbox e grid Imagens responsivas pra ontem! Pensar em soluções, testar e prototipar

89.

Obrigado! @jcemer

Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas

Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas

Want more?

Transcript