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

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

Um panorama de ferramentas e técnicas front-end. Abordando templates, boilerplates, frameworks, processadores e muito mais. A função aqui é elevar seu projeto a altos níveis de abstração para garantir melhor qualidade e agilidade no desenvolvimento.

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

October 26, 2013
Tweet

Transcript

  1. 3.
  2. 13.

    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
  3. 16.

    Inclui Modernizr com todas as detecções apenas html5shiv (IE8,7) ou

    o Modernizr customizado que inclui o html5shiv <script src="html5shiv.min.js"> </script> </head> HTML
  4. 17.

    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
  5. 19.

    /*! 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
  6. 20.

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

    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
  8. 23.
  9. 24.

    Aparência inicial Diversas APIs Suporte offline Firefox OS Boilerplate App

    Firefox OS Boilerplate App http:/ /github.com/robnyman/Firefox-OS-Boilerplate-App
  10. 29.

    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
  11. 32.

    <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
  12. 33.

    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
  13. 34.

    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
  14. 37.

    body { width: 960px; } .wrapper { width: 940px; }

    .speaker-list { width: 480px; } Largura do site Largura do site menos respiro Meia largura ?!
  15. 38.

    $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
  16. 39.

    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? ?!
  17. 40.

    $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
  18. 41.

    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 ?!
  19. 42.

    $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
  20. 43.

    .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 ?!
  21. 44.

    $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
  22. 45.

    @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
  23. 46.

    .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! ?!
  24. 47.

    .slider { } .slider p { margin-bottom: 1em; } .slider

    a { font-weight: bold; } .slider a:hover { background: $color-secondary; } Seletor vazio :( ?!
  25. 48.

    .slider { p { margin-bottom: 1em; } a { font-weight:

    bold; &:hover { background: $color-secondary; } } } Nested rules Mais fácil de ler e modularizar
  26. 50.

    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
  27. 51.
  28. 52.

    .address { width: 200em; height: 300em; background: #666; color: white;

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

    .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
  30. 54.

    %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
  31. 55.

    .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 ?!
  32. 56.

    %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
  33. 57.

    @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
  34. 58.
  35. 59.
  36. 60.
  37. 61.

    $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); }
  38. 62.
  39. 63.

    Pré-processadores Linguagem para adicionar açucar sintático não nativos ao CSS

    Resultam em CSS Nova camada que precisa ser trans-compilada
  40. 64.

    @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
  41. 65.

    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
  42. 66.

    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
  43. 67.

    $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
  44. 68.
  45. 69.
  46. 71.

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

    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 <body>, <p>, <a> elementos comuns
  48. 73.

    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 <body>
  49. 89.

    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/
  50. 91.
  51. 93.

    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">[...]</h <div class="tool-content">[...] </article> // Mixins em LESS do Twitter Boot .tool { .makeRow(); } .tool-title { .makeColumn(3); } .tool-content { .makeColumn(9); }
  52. 94.

    Pré processadores conclusão Deixe de bobagem e turbine seu workflow

    Prefira o pré-processador que sua equipe se sente mais a vontade
  53. 95.

    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