Close to the Edge / Front in Rio 2013

1.

close to the edge

2.

jean carlo emer @jcemer artesão da internet codeminer42

3.

ferramentas metodologias técnicas ∞

4.

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

5.

templates

6.

HTML5 Boilerplate HTML5 Reset Sophisto Boilerplate

7.

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

8.

html5 boilerplate deﬁne viewport com largura igual a device-width

9.

html5 boilerplate <head> <meta name="viewport" content="width=1024"> viewport para site não
responsivo

10.

html5 boilerplate inclui Modernizr com todas as detecções ou o
Modernizr customizado incluíndo html5shiv <script src="html5shiv.min.js"> </script> </head>

11.

página de erro 404 utf-8 para css e js entrega
de arquivos compactados http://gzipwtf.com deﬁne expiração dos arquivos html5 boilerplate ~ apache

12.

X reset normalize

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

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

15.

frameworks

16.

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

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

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>

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

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>

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

22.

css on steroids

23.

Pré-processadores Otimizadores de CSS

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

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

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

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

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

29.

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

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

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"

32.

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

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

34.

None

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

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

37.

ops?! agora temos muitas propriedades de css repetidas

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

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

40.

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

41.

considerações

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

43.

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

44.

css on steroids deixe de bobagem e turbine seu workﬂow
preﬁra 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

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

46.

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

47.

além do penhasco

48.

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

49.

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

50.

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

51.

None

52.

http://ianstormtaylor.com/media-queries-are-a-hack

53.

None

54.

Meu produto módulos

55.

Meu produto layout responsivo

56.


57.


58.

None

59.

make it so, internetz element level media queries imagens responsivas
pra ontem! event emitter nativo no javascript vertical align sem frescura

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

Close to the Edge / Front in Rio 2013

Close to the Edge / Front in Rio 2013

Want more?

Transcript