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

Buenas?!

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

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

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

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

Boilerplates

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

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

HTML Deﬁne viewport para projetos responsivos

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

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

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

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

/*! 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

/** * 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

X reset normalize

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

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

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

Frameworks de CSS

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

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

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

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

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

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

<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

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

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

CSS on Steroids

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

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

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

@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

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

$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

$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

<3 <3 <3

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

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

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"

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

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

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

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

Ops?! Agora temos muitas regras de CSS repetidas

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

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

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

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

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

CSS Layout

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

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

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

Flexbox: flex grown e shrink grown 0 0 1

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

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

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

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

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

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/

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

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

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

Media Queries

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

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

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

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

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

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

Meu produto Módulos

Meu produto Layout responsivo

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

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

More Decks by Jean Carlo Emer

Featured

Transcript