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

jcemer.com github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer

No content

O importante é que seu produto funcione e entregue valor

...mas se você quer que ele seja prático de desenvolver

...tenha uma manutenção descomplicada

...e sobretudo, ir além no seu fluxo de trabalho

esta palestra é especialmente destinada a você!

A Serious Man http:/ /www.imdb.com/title/tt1019452

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 que inclui o html5shiv HTML

Página de erro 404 UTF-8 para CSS e JS Entrega de arquivos compactados Define expiração dos arquivos para estratégia de cache Apache

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

/*! normalize.css v2.1.2 | MIT License | gi /** * Correct `block` display not defined in I */ article, aside, details, figcaption, figure header, hgroup, main, nav, section, summary display: block; } /** * Correct `inline-block` display not defin */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ Normalize.css 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.css 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 task e script de deploy via Git 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

Quero saber de aparência e como definir 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 CSS

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

Usar frameworks engessa o HTML 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

CSS to the heaven: classes .button .small-button .secondary-button .remove-button .margin10px .row .span4 .post .dark-slider .left .active .video-title .btn, .ctnr, .act estado tá valendo :) diagramação é aparência sem abreviaturas, pf

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

CSS on Steroids

body { width: 960px; } .wrapper { width: 940px; } .speaker-list { width: 480px; } Largura do site Largura do site menos respiro Meia largura ?!

$site-width: 960px; $site-gap: 20px; body { width: $site-width; } .wrapper { width: $site-width - $site-gap; } .speaker-list { width: $site-width / 2; } Variáveis Qualquer mudança reflete em todo projeto

body { color: #3F4955; } .about { background: #3F4955; } .contact a:hover { color: #3F4956; } .speaker-list { border: 1px solid #3F4955; } PSD estava com uma pequena variação :P Que diabo de cor é essa? ?!

$grey-color: #3F4955; $main-color: $grey-color; body { color: $main-color; } .about { background: $main-color; } .contact a:hover { color: $main-color; } .speaker-list { border: 1px solid $main-color; } Variáveis Muito mais organizado e fácil de entender

body { color: #3F4955; } .slider { color: #293038; } .carousel { background: rgba(63, 73, 85, 0.8); } Você não faz ideia, mas sou o cinza escuro E eu sou cinza com transparência ?!

$grey-color: #3F4955; $grey-dark-color: darken($grey-color, 10); $transparent-grey-color: rgba($grey-color, .8); body { color: $grey-color; } .slider { color: $grey-dark-color; } .carousel { background: $transparent-grey-color; } Funções transforma em rgb e adiciona o alpha

.slider { background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left, #1e5799 0%, #7db9e8 100%); /* background: -webkit-gradient(linear, left top, right top, color-stop background: -webkit-linear-gradient(left, #1e5799 0%,#7db9e8 100%); background: -o-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* Op background: -ms-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* I background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%); /* W filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='# } Ultimate CSS Gradient Generator http:/ /www.colorzilla.com/gradient-editor Manutenção bem fácil #sqn ?!

$blue-color: #1E5799; $light-blue-color: #7DB9E8; .slider { $gradient: linear-gradient($blue-color, $light-blue-color); @include background-image($gradient); } Mixins: vendor prefixes Bourbon.io http:/ /bourbon.io/docs/#linear-gradient-function

@mixin user-select($arg: none) { -webkit-user-select: $arg; -moz-user-select: $arg; -ms-user-select: $arg; user-select: $arg; } .editor { @include user-select(none); } Mixins: vendor prefixes CSS user-select: none http:/ /caniuse.com/#search=user-select

.slider p { margin-bottom: 1em; } .very-easy-to-add-rules-between { color: white; } .slider a { font-weight: bold; } .slider a:hover { background: $color-secondary; } Ops, um intruso aqui! ?!

.slider { } .slider p { margin-bottom: 1em; } .slider a { font-weight: bold; } .slider a:hover { background: $color-secondary; } Seletor vazio :( ?!

.slider { p { margin-bottom: 1em; } a { font-weight: bold; &:hover { background: $color-secondary; } } } Nested rules Mais fácil de ler e modularizar

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; } } } } } } Repara no resultado: html body section p a:hover

No content

.address { width: 200em; height: 300em; background: #666; color: white; } // ... .profile { width: 200em; height: 300em; background: #666; color: white; font-size: 20em; } Código repetido ?!

.address { width: $box-width; height: $box-height; background: $box-color; color: white; } // ... .profile { @extend .address; font-size: 20em; } Extend .address, .profile { width: 200em; height: 300em; background: #666; color: white; } // ... .profile { font-size: 20em; } É estranho que o profile estenda o addresss

%box { width: $box-width; height: $box-height; background: $box-color; color: white; } .address { @extend %box; } // ... .profile { @extend %box; font-size: 20em; } Placeholders Este primeiro bloco é apenas uma abstração

.profile { position: relative; width: 100px; background: red; } .profile:before { content: ""; position: absolute; width: 0; height: 0; border: 7px solid transparent; left: 50%; margin-left: -7px; top: -13px; border-bottom: 7px red solid; } Eu não tenho ideia doque isto representa ?!

%arrow-top { position: relative; &:before { content: ""; position: absolute; width: 0; height: 0; border: 7px solid transparent; left: 50%; margin-left: -7px; top: -13px; border-bottom: 7px red solid; } } .profile { width: 100px; background: red; @extend %arrow-top; } Helpers A cor da nossa seta está estática

@mixin arrow-top-color($color) { &:before { border-bottom-color: $color; } } .profile { width: 100px; background: blue; @extend %arrow-top; @include arrow-top-color(blue); } Helpers Tudo o que recebe argumentos é um mixin The Extend Concept http:/ /css-tricks.com/the-extend-concept

No content

No content

No content

$distance: (100% - $size) / 2; &:#{$type} { content : ''; position: absolute; z-index: 1; @if $mode == horizontal { left: $distance; right: $distance; height: $thickness; } @else { top: $distance; bottom: $distance; width: $thickness; } } } @mixin line-gradient($pos, $opacity) { @include radial-gradient($pos, rgba(black, $opacity) } @mixin left-line($size, $opacity: .15, $thickness: 10p @include line(vertical, before, $size, $thickness); &:before { left: 0; @include line-gradient(left center, $opacity); } } @mixin bottom-line($size, $opacity: .15, $thickness: 1 @include line(horizontal, after, $size, $thickness); &:after { bottom: 0; @include line-gradient(center bottom, $opacity); } } @mixin top-line($size, $opacity: .15, $thickness: 10px @include line(horizontal, before, $size, $thickness) &:before { top: 0; @include line-gradient(center top, $opacity); } } @mixin inverse-bottom-line($size, $opacity: .15, $thic @include line(horizontal, after, $size, $thickness); &:after { bottom: -$thickness; @include line-gradient(center top, $opacity); } } @mixin hide-bottom-line { &:after { display: none; Helpers Line helpers https:/ /gist.github.com/jcemer/7130218 .section-title { font-size: rem(28px); color: $blue; @include inverse-bottom-line(80%); } .collaborate-item:last-child { @include left-line(90%); padding-left: 10%; } .address-map { @include top-line(100%, .25); @include bottom-line(100%, .25); }

No content

Pré-processadores Linguagem para adicionar açucar sintático não nativos ao CSS Resultam em CSS Nova camada que precisa ser trans-compilada

@base: #f938ab; .box-shadow(@style, @c) when (iscolor( box-shadow: @style @c; -webkit-box-shadow: @style @c; -moz-box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @a } .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 Não possui placeholders Repetições bastante estranhas e engessadas

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

Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar $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; } Sintaxe SCSS

$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 Sintaxe SASS Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar

<3 <3 <3

Libsass: biblioteca escrita em C/C++ Módulo node-sass já utiliza esta biblioteca e compila nativamente seu arquivo

Mixins e placeholders 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); }

Organizando o CSS // Libraries @import "compass"; @import "settings"; @import "helper"; // Core @import "core/normalize"; @import "core/layout"; // Shared @import "shared/header"; @import "shared/footer"; variáveis mixins e placeholders estilizar ,

, elementos comuns

Organizando o CSS // ... continuação // Modules @import "modules/grade"; @import "modules/map"; // Pages @import "pages/home"; @import "pages/about"; modularização! regras muito específicas que são guiadas por uma classe no

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 E que tal um novo modelo?

Flexbox: flex grown e shrink grown 0 0 1

Flexbox: flex grown e shrink grown 0 0 1

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

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 model Flexbox é ideal para componentes W3C Candidate Recommendation Compatível com Chrome 29+ e IE 11 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 model Ideal para definir disposição dos componentes Especificação compatível apenas com IE 10+

No content

Boilerplates conclusão Boas práticas são sempre bem vindas Nunca esqueça do reset.css ou normalize.css

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 Boot .tool { .makeRow(); } .tool-title { .makeColumn(3); } .tool-content { .makeColumn(9); }

Pré processadores conclusão Deixe de bobagem e turbine seu workflow Prefira o pré-processador que sua equipe se sente mais a vontade

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 concluída Learn CSS Layout http:/ /learnlayout.com

Obrigado! @jcemer