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

No content

No content

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 fluxo 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 Define viewport para projetos responsivos

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 HTML

Página de erro 404 UTF-8 para CSS e JS Entrega de arquivos compactados http://gzipwtf.com Define 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

No content

Aparência inicial Diversas APIs Suporte offline 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 configurá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

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 especificaçõ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"

No content

Mixins e helpers são muito úteis para definir grids Grid semântico

Grid semântico

Bourbon Neat

.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

[...]

// 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 workflow Prefira 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 Define tamanhos, margens, paddings... Posiciona elementos em relação a outros ou fixa eles na viewport

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

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

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

Flexbox model Não usa floats 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 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 flex-start flex-end center stretch

Flexbox: justify content flex-start flex-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: 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 definir disposição dos componentes Especificação da Microsoft compatível apenas com IE 10+

CSS Layout conclusão Box model ainda é o caminho, aprenda ao máximo! Use flexbox e grid em ambientes controlados, ainda tem baixa compatibidade e especificaçã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 especificaçã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

No content

Meu produto Módulos

Meu produto Layout responsivo

Meu produto Layout responsivo

Meu produto Layout responsivo

No content

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

Obrigado! @jcemer