close to the edge

jean carlo emer @jcemer artesão da internet codeminer42

ferramentas metodologias técnicas ∞

atenção bastante conteúdo e todo ele recheado com minha opinião =)

templates

HTML5 Boilerplate HTML5 Reset Sophisto Boilerplate

html5 boilerplate html com scripts no rodapé favicon e apple icons

html5 boilerplate define viewport com largura igual a device-width

html5 boilerplate viewport para site não responsivo

html5 boilerplate inclui Modernizr com todas as detecções ou o Modernizr customizado incluíndo html5shiv

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

X reset normalize

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

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

frameworks

Foundation Twitter Bootstrap Gumby 2 960 Grid System Skeleton Pure Bourbon Neat

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

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

twitter bootstrap 2.3

css on steroids

Pré-processadores Otimizadores de CSS

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

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

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

@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

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

styl Work-in-progress CSS preprocessor. Spiritual successor of Stylus. Built on top of Rework.

$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

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"

atenção não reescreva a árvore de elementos do html no css

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

No content

grid semântico

Bourbon Neat

.tool { @include outer-container; } .tool-title { @include span-columns(3); } .tool-content { @include span-columns(9); } Exemplo usando o framework Bourbon Neat

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

ops?! agora temos muitas propriedades 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} 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 } http://bem.info/tools/csso

npm install csso -g csso test.css csso Flour já possui suporte Grunt através de https://github.com/t32k/grunt-csso

considerações

frameworks use apenas os mixins e funções para pré-processadores de css aproveite a vontade código javascript não atrelado a classes

[...]

// Mixins em LESS do Twitter Bootstrap .tool { .makeRow(); } .tool-title { .makeColumn(3); } .tool-content { .makeColumn(9); }

frameworks de grids Gumby 2, isto é dar suporte? Agora sim! Valeu, Bourbon Neat para layouts usando porcentagens, tenho real suporte a nested grids?

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

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

tabelas responsivas display: none; display: table-cell; display: block; .schedule-slot:before { content: attr(data-grade); display: block; }

além do penhasco

cuidado vamos falar do universo dos sonhos daqui para frente =P

não mais ies brincadeira, salve a diversidade! a internet é de todos ie9+

a buzzword da vez no universo front-end é modularizar media queries são globais, com base na viewport media queries?!

No content

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 imagens responsivas pra ontem! event emitter nativo no javascript vertical align sem frescura

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