HTML/CSS Patterns

globo .com HTML/CSS Patterns Leonardo Quixadá

O Que Não Vou Apresentar ‣ Fundamentos de seletores ‣ Aplicação de propriedades ‣ Tableless ‣ Performance ‣ CSS3

Guidelines ‣ CSS ‣ Reset.css ou normalize.css ‣ Grids ‣ HTML & CSS ‣ Tableless

Problemas comuns ‣ Layout em CSS não é fácil de aplicar, nem de explicar ‣ Não existe sandbox, há muitos conﬂitos de propriedades ‣ Inconsistência cross-browser ‣ Não é automaticamente testável

Estrutura para HTML & CSS ‣ Agilizar a criação e a manutenção de componentes. ‣ Melhorar a limpeza, a clareza e a ﬂexibilidade tanto do HTML, como do CSS. ‣ Diminuir o tempo desperdiçado fazendo ajustes para um browser em especíﬁco.

Regras de Ouro 1. Separar container de conteúdo 2. Separar estrutura de estética -- Nicole Sulivan (Yahoo!), em OOCSS

Cronograma HTML CSS Patterns Patterns Grids Seletores Estratégias Minidocumentos Propriedades de Mundo Validação Microsemântica Layout Pós-IE6

Modelo Globocore page macroarea área box (widgets & destaques)

HTML Patterns ‣ Grids ‣ Minidocumentos ‣ Microsemântica

Grids “Todo trabalho de design envolve a solução de problemas em níveis visuais e organizativos. Figuras, símbolos, massa de textos, títulos e tabelas devem se reunir para transmitir informação. O grid é uma maneira de juntar esses elementos.” - Luiz Agner, designer, arquiteto e professor Fonte: http://www.slideshare.net/agner/a-construo-do-grid

Grids “O grid introduz uma ordem sistemática num leiaute e permite que o designer diagrame uma grande quantidade de informação. Também permite vários colaboradores num mesmo projeto.” - Luiz Agner, designer, arquiteto e professor Fonte: http://www.slideshare.net/agner/a-construo-do-grid

Grids “Vantagens do grid: - Clareza - Eﬁciência - Economia - Identidade” - Luiz Agner, designer, arquiteto e professor Fonte: http://www.slideshare.net/agner/a-construo-do-grid

Grids ‣ Padrão de-facto para layouts em CSS. ‣ Permite o intercâmbio de componentes entre produtos ‣ Define o espaço horizontal que os componentes podem ocupar (o conteúdo dos componentes definem o espaço vertical) ‣ Dada uma largura fixa, pode-se compor “linhas” com até 12 colunas.

Grids: Colunas ‣ 1 unidade ou coluna de 1: <div class=”glb-grid-1”></div> width (60px) margin-left (10px) margin-right (10px)

Grids: Colunas ‣ 2 unidades: grid 1 grid-1 10px 60px 20px 60px 10px ‣ coluna de 2: 10px 140px 10px grid-2 <div class=”glb-grid-2”></div>

Grids: Colunas ‣ 3 unidades: grid 1 grid-1 grid-1 10px 60px 20px 60px 20px 60px 10px grid 1 grid-2 10px 60px 20px 140px 10px ‣ coluna de 3: 10px 220px 10px grid-3 <div class=”glb-grid-3”></div>

Grids: Colunas ‣ 4 unidades: grid 1 grid-1 grid-1 grid-1 10px 60px 20px 60px 20px 60px 20px 60px 10px grid 1 grid-2 grid-1 10px 60px 20px 140px 20px 60px 10px ‣ coluna de 4: 10px 300px 10px grid-4 <div class=”glb-grid-4”></div>

Grids: Linhas ‣ As linhas podem ser deﬁnidas por blocos ou unidades do grid. glb-bloco glb-grid 2 glb-grid-8 glb-grid-2 <div class=”glb-bloco”> <div class=”glb-grid-2”></div> <div class=”glb-grid-8”></div> <div class=”glb-grid-2”></div> </div>

Grids: Linhas ‣ As linhas podem ser deﬁnidas por blocos ou unidades do grid. glb-grid-4 glb-grid 1 glb-grid-2 glb-grid-1 <div class=”glb-grid-4”> <div class=”glb-grid-1 glb-primeiro”></div> <div class=”glb-grid-2”></div> <div class=”glb-grid-1 glb-ultimo”></div> </div>

Grids: Exemplo <body> <div id=”glb-doc”> <div class=”glb-topo”> ... </div> <div class=”glb-conteudo”> ... </div> <div class=”glb-rodape”> ... </div> </div> </body>

Grids: Exemplo <div class="glb-topo"> <div class="glb-bloco"> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> </div> </div>

Grids: Exemplo <div class="glb-conteudo"> <div class="glb-bloco"> <div class="glb-grid-8"></div> <div class="glb-grid-4"></div> </div> <div class="glb-bloco"> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> <div class="glb-grid-4"></div> </div> </div>

Grids: Exemplo <div class="glb-rodape"> <div class="glb-bloco"> <div class="glb-grid-12"></div> </div> </div>

Exercício: Implementar header 1 2 3 4 5 6 7 8 9 10 footer

Minidocumentos ‣ Pattern que subdivide páginas web em pequenos “documentos” autosuﬁcientes. ‣ É como um pequeno grid para os componentes que vão preencher os compartimentos da estante. ‣ Juntando-se vários componentes formam-se composições sólidas.

Minidocumentos ‣ Podem ser utilizados por widgets, destaques, forms, menus, etc... ‣ Baseado nas novas tags do HTML 5: article, section, header e footer.

Pattern Visual Container Header Content Footer

Pattern Visual Container Títulos, menus, logos... Todo o conteúdo Links “veja mais”, botões, informações extras...

Pattern HTML <div class=”container”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div> </div>

Pattern Página <div class=”glb-doc”> <div class=”glb-top”> ... </div> <div class=”glb-content”> ... </div> <div class=”glb-base”> ... </div> </div>

Pattern Matéria <div class=”materia”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”base”> ... </div> </div>

Pattern Box <div class=”box”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div> </div>

Box Plantão <div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> ... </div> </div>

Se você usasse HTML5... <section class=”box box-plantao”> <header> ... </header> <section> ... </section> <footer> ... </footer> </section>

Box Plantão <div class=”box box-plantao”> <div class=”header”> ... </div>  <div class=”content”> ... </div>  <div class=”footer”> ... </div>  </div>

Favor, não misturar <div>s ou .classes de grid com box.

Microsemântica ‣ Utilização de elementos semânticos para descrever dados através de tags e/ou classes. ‣ É uma variação dos Microdados e, antigamente, de Microformatos. ‣ Não serve paras os search engines, apenas melhora a clareza do código.

Microsemântica ‣ É a partir daqui que se preocupa com: ‣ SEO ‣ Semântica ‣ Acessibilidade ‣ Microdados ‣ ...

Microdados “Microdados é uma especiﬁcação WHATWG HTML5 usada para aninhar semântica dentro de conteúdos existentes em páginas web. Isso é feito usando atributos especíﬁcos: itemscope, itemtype, itemid, itemprop e itemref. Search engines, web crawlers, e navegadores podem extrair e processar microdados a partir de uma página web e usar isso para prover uma experiência de navegação mais rica para os usuários.” - Wikipedia

Microdados: Exemplo <div> <h1>Avatar</h1> <span> Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href="/movies/avatar.html">Trailer</a> </div>

Microdados: Exemplo <div itemscope> <h1>Avatar</h1> <span> Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href="/movies/avatar.html">Trailer</a> </div>

Microdados: Exemplo <div itemscope itemtype="http://schema.org/Movie"> <h1>Avatar</h1> <span> Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href="/movies/avatar.html">Trailer</a> </div>

Microdados: Exemplo <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span> Director: <span itemprop="director">James Cameron</span> (born August 16, 1954) </span> <span itemprop="genre">Science fiction</span> <a href="/movies/avatar.html" itemprop="trailer">Trailer</a> </div>

Microdados: Exemplo <div itemscope itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span itemprop="director" itemscope itemtype="http://schema.org/ Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span> </span> <span itemprop="genre">Science fiction</span> <a href="/movies/avatar.html" itemprop="trailer">Trailer</a> </div>

Microdados ‣ Mais exemplos em: http://schema.org

Microformatos ‣ Cartões <div class="vcard"> <span class="fn">Nome</span> <span class="org">Organização</span> <span class="tel">604-555-1234</span> <a class="url" href="http://site.com/">Website</a> </div> ‣ Calendário ‣ Reviews

Microsemântica ‣ Por que não fazer nossos próprios microdados? ‣ HTML com mais semântica e mais entendível.

Box Plantão <div class=”box box-plantao”> <div class=”header”> ... </div> <div class=”content”> ... </div> <div class=”footer”> .... </div> </div>

Box Plantão <div class=”box box-plantao”> ... <div class=”content”> <ul> <li> ... </li> <li> ... </li> ... </ul> </div> ... </div>

Box Plantão <ul> <li> <a class=”noticia” href=”#”> <img class=”thumb” src=”foto.jpg” /> <span class=”chapeu”></span> <span class=”titulo”></span> </a> </li> ... </ul>

Box Plantão <ul> <li> <a class=”noticia” href=”#”> <img class=”thumb” src=”foto.jpg” /> <span class=”chapeu”></span> <span class=”titulo”></span> </a> </li> ... </ul> não dizem nada

Box Plantão <ul> <li> <a class=”noticia” href=”#”> <img class=”thumb” src=”foto.jpg” /> <span class=”chapeu”></span> <span class=”titulo”></span> </a> </li> ... </ul> semântico!!!

A partir daqui, nada de grid, e evite ao máximo utilizar <div>s.

Box Plantão div.box-plantao a { ... } div.box-plantao a.noticia { ... } div.box-plantao span.chapeu { ... } div.box-plantao span.titulo { ... } div.box-plantao ul { ... }

Vejamos rapidamente outro box...

Box Previsão do Tempo Vc consegue classiﬁcar semanticamente o content do box?

Outro exemplo.... div.brother-main

Outro exemplo.... cite.brother-tweet span.brother-idade span.brother-cidade-natal span.brother-signo cite.brother-tweet-tempo span.brother-time

Dica! <div> para descrever estrutura, <span> para descrever dados

Exercício ‣ Transforme um box em HTML:

Estratégias ‣ Organizando Seletores ‣ Organizando Propriedades ‣ Elaborando Layouts

Organizando Seletores ‣ Namespaces: deﬁne a área de atuação dos seletores e os agrupa visualmente. ‣ tag[.class]. ‣ Separação por blocos. ‣ Ordem: especiﬁcidade, alfabética.

Namespaces div.box-plantao { ... } div.box-plantao a { ... } div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao span.barra { ... } div.box-plantao ul { ... }

Namespaces div.box-plantao { ... } div.box-plantao a { ... } div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao span.barra { ... } div.box-plantao ul { ... } Contexto ou Namespace

tag[.class] div.box-plantao { ... } div.box-plantao a { ... } div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao span.barra { ... } div.box-plantao ul { ... } tag[.class] 1

tag[.class] div.box-plantao { ... } div.box-plantao a { ... } div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao span.barra { ... } div.box-plantao ul { ... } tag[.class] 2

tag[.class] ‣ jQuery $(‘div.box-plantao span.barra’) ou $(‘div.box-plantao’).ﬁnd(‘span.barra’) (para cachear o contexto) ‣ Lxml html = lxml.etree.fromstring(response.content) html.cssselect(‘div.box-plantao span.barra’) ‣ splinter browser = Browser() browser.ﬁnd_by_css(‘div.box-plantao span.barra’)

tag[.class] ‣ Problemas de se utilizar só a classe: ‣ Desenvolvedores são muito ruins em nomear coisas. ‣ O nome da tag é tão objetivo quanto uma ordem alfabética. Melhor utilizar os tokens já predeﬁnidos do que ﬁcar elaborando nomes malucos. ‣ Classes abertas indicam pra outros devs, que é permitido colocar a classe em qualquer tag.

tag[.class] ‣ Exemplos: .ﬁeldset-metadados ﬁeldset.metadados (exemplo do widget SEO) .span_tag span.tag (catálogo de vídeo v1.0) .formulario-criacao-usuario form.criacao-usuario ‣ Só utilizar classes abertas quando é realmente necessário aplicar a mais de uma tag (exemplo th, td).

tag[.class] ‣ Recomendo sempre ter 2 tag[.class]. Claro e conciso! ‣ Mínimo de 1 tag[.class] div.box-plantao { ... } ‣ Máximo (prometa!) de 3 tag[.class] div.box-plantao ul.principal li.ativo { ... }

Separação por blocos div.box { ... } div.box a { ... } div.box span.barra { ... } div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... } div#box-plantao-principal li { ... }

Separação por blocos div.box { ... } bloco div.box a { ... } div.box span.barra { ... } div.box-plantao h6 { ... } bloco div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... } bloco div#box-plantao-principal li { ... }

Ordem menos especíﬁco div.box { ... } div.box a { ... } div.box span.barra { ... } div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... } div#box-plantao-principal li { ... } mais especíﬁco

Ordem div.box { ... } div.box a { ... } div.box span.barra { ... } ordem alfabética div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... } div#box-plantao-principal li { ... }

Teu HTML ficaria assim... <div class=”box box-plantao”> <div class=”header”> <h6>primeira página</h6> </div> <div class=”content”> <ul> <li></li> ... </ul> </div> <div class=”footer”> <a href=”#”>veja mais</a> </div> </div>

E teu CSS ficaria assim... div.box { ... } div.box a { ... } div.box span.barra { ... } div.box-plantao h6 { ... } div.box-plantao li { ... } div.box-plantao ul { ... } div#box-plantao-principal h6 { ... } div#box-plantao-principal li { ... }

Organizando Propriedades ‣ Uma propriedade:valor por linha ‣ Separar propriedades por contexto

Uma propriedade por linha ‣ Facilita diffs!

Uma propriedade por linha ‣ Inserir comentários é mais tranquilo

Uma propriedade por linha ‣ CSS 3 com vendor preﬁx são bem longos e variados .box_shadow { -webkit-box-shadow: 0px 0px 4px #ffffff; -moz-box-shadow: 0px 0px 4px #ffffff; box-shadow: 0px 0px 4px #ffffff; }

Uma propriedade por linha ‣ CSS 3 com vendor preﬁx são bem longos e variados .box_gradient { background-color: #444444; /* Saf4+, Chrome */ background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */ /* Opera 11.10+ */ background-image: -o-linear-gradient(top, #444444, #999999); background-image: linear-gradient(top, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6-IE9 */ }

Organizando Propriedades ‣ 1o grupo: layout position, display, ﬂoat, top, left, bottom, right, margin, padding, width, height ‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform... ‣ 3o grupo: restante border, z-index, overﬂow, ...

importante! EVITE o !important

Prequel ‣ 1o grupo: layout position, display, ﬂoat, top, left, bottom, right, margin, padding, width, height ‣ 2o grupo: texto color, font, letter-spacing, line-height, text-align, text-decoration, text-transform... ‣ 3o grupo: restante border, z-index, overﬂow, ...

Float:Left contra o Mundo ‣ O ﬂoat serve para alinhar à esquerda, à direita ou não alinhar (none). ‣ A propriedade tem a ver mais com conteúdo do que com boxes. ‣ Suas dimensões são reduzidas para acomodar apenas o próprio conteúdo ao contrário de display:block. ‣ É fonte de muitas confusões no mundo CSS.

Float:Left em Quadrinhos A B C

Float:Left em Quadrinhos A B C ‣ A ‣ B { ﬂoat:left; } ‣ C

Float:Left em Quadrinhos A B C ‣ Box B perdeu espaço no ﬂow de boxes, mas ocupou espaço à esquerda do conteúdo C, ou seja, virou conteúdo.

Float:Left em Quadrinhos A B C ‣ A ‣ B { ﬂoat:left; } ‣ C { ﬂoat:left; }

Float:Left em Quadrinhos A A B C ‣ B se alinhou à esquerda antes de C. Como saíram do ﬂow de boxes, a altura de A diminuiu. ‣ É como se estivessem caçando conteúdo abaixo.

Float:Left contra o Mundo ‣ Float:left/right tem um funcionamento difícil de entender e de explicar. ‣ A maioria dos bugs nos IEs encontrados e registrados pelo Position Is Everything tem o ﬂoat envolvido. http://www.positioniseverything.net/explorer.html ‣ Recomendação: evitar ao máximo.

Alternativas ao float:left { inline display block inline-block { static relative position absolute ﬁxed

Antes de existir o CSS... ‣ No HTML, os elementos são divididos em inline-level (também chamado de text-level) e block-level. ‣ Elementos inline-level (também chamados de text- level) são os que convivem lado-a-lado com texto e outro elementos inline-level. ‣ Elementos block-level são containers para elementos inline-level, textos e outros elementos block-level

Antes de existir o CSS... Elementos inline-level Elementos block-level <input> <a> <form> <label> <img> <blockquote> <div> <li> <td> <button> <cite> <em> <ﬁeldset> <th> <strong> <span> <p> <textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>

Antes de existir o CSS... Elementos inline-level <dentro de> Elementos block-level <input> <a> <form> W3C <label> <img> <blockquote> <div> <li> <td> <button> <cite> <em> <ﬁeldset> <th> <strong> <span> <p> <textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>

Antes de existir o CSS... Elementos inline-level <dentro de> Elementos block-level <input> <a> <form> W3C <label> <img> <blockquote> <div> <li> <td> <button> <cite> <em> W3C <ﬁeldset> <th> <strong> <span> <p> <textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6>

Antes de existir o CSS... Elementos inline-level <dentro de> Elementos block-level <input> <a> <form> W3C <label> <img> <blockquote> <div> <li> <td> <button> <cite> <em> W3C <ﬁeldset> <th> <strong> <span> <p> <textarea> <select> <h1>, <h2>, <h3>, <h4>,<h5>,<h6> W3C

Antes de existir o CSS... ‣ Leitura recomendada (é curto, prometo!): http://www.w3.org/TR/html401/struct/global.html#h-7.5.3 ‣ Regras da estrutura HTML: http://www.w3.org/TR/html4/strict.dtd

Nunca, nunca coloque elementos block-level dentro de inline-level.

Displays ‣ Os dois tipos básicos de display são: ‣ display:block permite um elemento ser dimensionado com width, height, padding, margin, etc. ‣ display:inline permite ﬁcar lado-a-lado com outros elementos e textos. Não pode ser dimensionado com width e height. Apenas com valores laterais de margin.

Display:Inline-block ‣ Junta características de elementos inlines e blocks. ‣ Permite ﬁcar lado-a-lado com outros elementos e ser dimensionados. ‣ É mais intuitivo de aplicar e explicar. ‣ É tratado como parte do texto.

Display:Inline-block ‣ Propriedade também consistente no cross-browser. ‣ No IE7, é simulado por *display:inline e *zoom:1. * isto não é uma nota de rodapé, é um hack pro IE.

Display:Inline-block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc massa sapien, rutrum ac dignissim at, iaculis sit amet libero. Aenean vehicula tortor vitae eros pulvinar quis consectetur arcu suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc massa sapien.Nunc massa sapien, rutrum ac dignissim at, iaculis sit amet libero. Aenean vehicula tortor vitae eros pulvinar quis consectetur arcu suscipit. display:inline-block

Exemplo de Uso display:inline-block

Position:Absolute ‣ Propriedade bem consistente cross-browser. Portanto bem mais seguro de se usar do que o ﬂoat. ‣ É sempre utilizado com uma ou mais das seguintes propriedades: top, bottom, left, right.

Position:Absolute <div> com position:relative

Position:Absolute <div> com <div> sem position:relative position

Position:Absolute <div> com <div> sem <div> com position:relative position position:absolute

Position:Absolute top:150px left:300px <div> com <div> sem <div> com position:relative position position:absolute

Recomendação ‣ Tente utilizar na seguinte ordem: 1.não usar nada (css padrão do navegador) 2.display:inline-block 3.position:absolute ... ... 4.ﬂoat:left

Exercício ‣ Fazer o seguinte box: ‣ Utilize o jsﬁddle.net e o dummyimage.com

Estratégias de Validação ‣ Em vs Px ‣ Hacks

Em vs Px ‣ “em” é uma unidade de medida relativa e mais ﬂexível. 1em = 100%, logo 1.02em=102%. ‣ “px” é uma unidade de medida absoluta e mais intuitiva. 1px é 1px e ponto ﬁnal.

Funcionamento do “em” 12px 1.2em 0.714em 14,4px 10px

Em vs Px ‣ As principais vantagens do “em” são: ‣ O tamanho da página aumenta conforme o tamanho da fonte pré-deﬁnida pelo usuário em seu navegador. ‣ A funcionalidade aumentar/diminuir fonte do IE6/7 só funciona com unidades de medidas. ‣ Se adapta melhor em telas pequenas como a de celulares.

Em vs Px ‣ As principais desvantagens do “em” são: ‣ Número quebrado gera inconsistência entre navegadores por causa do cálculo de conversão para px. Ex.: 1.33em pode ser 15px em um navegador, e 16px em outro. ‣ Todo valor em “em” tem que ser previamente calculado de acordo com o elemento pai.

Em vs Px ‣ Vantagens do “px”: ‣ Previsibilidade: 1px = 1px e pronto! ‣ É a unidade padrão dos designers

Recomendação ‣ Use apenas “px.” O desenvolvimento front-end já é instável o suﬁciente. ‣ Caso esteja interessado na ﬂexibilidade do “em,” considere utilizar o “rem.”

Hacks ‣ Evite ao máximo utilizá-los. ‣ É completamente possível fazer o mesmo CSS para Firefox, Chrome, Safari e Opera. (excetuando propriedades novas como border-radius e transition) ‣ Para IE o transtorno é tão grande que compensa utilizar hacks.

Hacks: Quando usar? ‣ O mais recomendado no mercado é fazer conditional comments. ‣ Mas a experiência mostra que da seguinte forma é mais manutenível (na ordem): ‣ IE 9-: margin: 15px9; ‣ IE 7-: *margin: 15px; ‣ IE 6-: _margin: 15px;

Validação de Browsers Ordem de preferência (ou audiência) Ordem de recência 9 8 7

Referências ‣ CSS Compatibility and Internet Explorer (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx) ‣ When Can I Use... (http://caniuse.com) ‣ CSS Frameworks (video com um overview) (http://www.youtube.com/watch?v=EuhDIRzUJgc) ‣ Explorer Exposed! (http://www.positioniseverything.net/explorer.html)

Ferramentas ‣ jsFiddle.net (http://jsﬁddle.net) ‣ Dummy Images (http://dummyimage.com) ‣ Lorem Ipsum (http://lipsum.com)

Exemplos e Exercícios ‣ Exemplo de Grid (http://jsfiddle.net/lquixada/KVSNn/show/) ‣ Exercício do Grid (http://jsfiddle.net/lquixada/qxxkK/show/) ‣ Exercício do Box Nas Novelas (http://jsfiddle.net/lquixada/6mWM7/show/)

HTML/CSS Patterns

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a HTML/CSS Patterns

HTML/CSS Patterns

Notas do Editor