Close to the Edge / Front in Rio 2013

Close to the Edge / Front in Rio 2013

Os front-ends estão rodeados por uma série de ferramentas e técnicas. Além da necessidade de conhecê-las a fundo, é preciso fazer as escolhas certas para cada projeto.

Esta palestra aborda ferramentas, grids, pré-processadores e sobretudo o estado da arte do HTML de uma maneira bem crítica, como você nunca viu!

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

June 15, 2013
Tweet

Transcript

  1. 10.

    html5 boilerplate inclui Modernizr com todas as detecções ou o

    Modernizr customizado incluíndo html5shiv <script src="html5shiv.min.js"> </script> </head>
  2. 11.

    página de erro 404 utf-8 para css e js entrega

    de arquivos compactados http://gzipwtf.com define expiração dos arquivos html5 boilerplate ~ apache
  3. 13.

    /** * 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 tornam-se iguais
  4. 14.

    /*! 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 preserva a aparência padrão ao invés de removê-la corrige alguns bugs comuns
  5. 17.

    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 é só aparecer uma div ou td que toda a herança do tamanho da fonte é perdida
  6. 18.

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

    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
  8. 20.

    <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>
  9. 21.

    <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
  10. 24.

    pré-processadores linguagem para adicionar açucar sintáticos não nativos ao css

    retorna algo que os browsers possam entender nova camada que precisa ser trans- compilada para css
  11. 25.

    pré-processadores // Variables $site-width: 960px; $color-primary: red; $color-secondary: #EEE; //

    Code body { background: lighten($color-secondary, 10); max-width: $site-width; margin: 0 auto; } // Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(5px); p { margin-bottom: 1em; } a { font-weight: bold; &:hover { background: $color-secondary; } } }
  12. 26.

    pré-processadores // Code body { background: lighten($color-secondary, 10); max-width: $site-width;

    margin: 0 auto; } .box { @include border-radius(5px); p { margin-bottom: 1em; } a { font-weight: bold; &:hover { background: $color-secondary; } } } // CSS Code body { background: white; max-width: 960px; margin: 0 auto; } .box { -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; }
  13. 27.

    @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%); } less padrão do Twitter Bootstrap repetições bastante estranhas e engessadas
  14. 28.

    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; } stylus mixins transparentes mixins e componentes com Nib muita liberdade causa confusão projeto parece abandonado
  15. 30.

    $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 sass projeto maduro bibliotecas poderosas como Compass e Bourbon duas sintaxes que não podem se misturar
  16. 31.

    organizando... @import "nib" @import "variables" @import "mixins" // Core @import

    "core/normalize" @import "core/typography" @import "core/structure" // Shared @import "shared/header" @import "shared/board" @import "shared/toolbar" @import "shared/footer" // Content @import "component/carousel" @import "component/grade" @import "component/map"
  17. 33.

    html { body { background: black; section { padding: 20px;

    p { margin-bottom: 10px; a { color: blue; &:hover { text-decoration: none; } } } } } } http://josh.github.io/css-explain html body section p a:hover
  18. 34.
  19. 35.

    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; } .tool-title { @include span-columns(3); } .tool-content { @include span-columns(9); } Exemplo usando o framework Bourbon Neat
  20. 36.

    .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 { @include outer-container; } .tool-title { @include span-columns(3); } .tool-content { @include span-columns(9); }
  21. 38.

    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} http://bem.info/tools/csso
  22. 39.

    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 } http://bem.info/tools/csso
  23. 40.

    npm install csso -g csso test.css csso Flour já possui

    suporte Grunt através de https://github.com/t32k/grunt-csso
  24. 42.

    frameworks use apenas os mixins e funções para pré-processadores de

    css aproveite a vontade código javascript não atrelado a classes <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); }
  25. 43.

    frameworks de grids Gumby 2, isto é dar suporte? Agora

    sim! Valeu, Bourbon Neat para layouts usando porcentagens, tenho real suporte a nested grids?
  26. 44.

    css on steroids deixe de bobagem e turbine seu workflow

    prefira o pré-processador que sua equipe se sente mais a vontade não custa nada ativar o csso, mas teste bem antes de aplicar em projetos em andamento
  27. 45.

    mobile first layout mobile é mais simples no fim, códigos

    particulares de maiores resoluções contidos em media queries específicas isto não significa necessariamente fazer a versão mobile antes
  28. 50.

    a buzzword da vez no universo front-end é modularizar media

    queries são globais, com base na viewport media queries?!
  29. 51.
  30. 53.
  31. 58.
  32. 59.

    make it so, internetz element level media queries imagens responsivas

    pra ontem! event emitter nativo no javascript vertical align sem frescura
  33. 60.

    you’re the operator with your pocket calculator obrigado! @jcemer vídeos:

    http://dakotalapse.com fonte dos títulos: Falta Alguma Coisa - AACD Unique Types