Tweet
Tweet

Slide 1

Slide 1 text

:)

Slide 2

Slide 2 text

Resets CSS & ! Propriedades Padrões! Matheus Marsiglio UI & Front-End Developer - Runrun.it! http://heymathe.us ! ! ! ! ! ! ! Twitter - @matmarsiglio Medium - @matmarsiglio GitHub - /matmarsiglio CodePen - /matmarsiglio

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Resets CSS & Propriedades Padrões Matheus Marsiglio

Slide 5

Slide 5 text

Introdução ! • Navegadores têm propriedades de estilos já definidas para cada elemento; • A influência de conceitos com muita particularidade nos fez adotar o ato de resetar coisas para nossos projetos;

Slide 6

Slide 6 text

Introdução ! body { margin: 8px; } .elemento { position: static; } h1 { font-size: 2em; } (article, aside, nav, section) h1 { font-size: 1.5em; } !

Slide 7

Slide 7 text

Propriedades Padrões

Slide 8

Slide 8 text

Propriedades Padrões Referências de estilos padrões! ! Internet Explorer http://www.iecss.com/ ! Mozilla http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css ! Navegadores WebKit http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Slide 9

Slide 9 text

Propriedades Padrões Principais elementos resetados! ! • ol, ul, li;! • a;! • body - (?)

Slide 10

Slide 10 text

Propriedades Padrões O "problema" do position! ! ! Default value: static; ! Fatos: ! • o valor static faz o elemento se posicionar de acordo com o fluxo da página e não interpreta as propriedades top, right, bottom, left e z-index; ! • elementos com position: absolute; dentro de um elemento com position: static;

Slide 11

Slide 11 text

!cssHardcoded

Slide 12

Slide 12 text

!cssHardcoded Escalabilidade! ! Carga de escalabilidade – É a facilidade com que um sistema distribuído pode ser expandido usando todos os seus recursos para acomodar as demandas, sejam altas ou baixas.! ! - http://pt.wikipedia.org/wiki/Escalabilidade

Slide 13

Slide 13 text

!cssHardcoded Escalabilidade == Produtividade! ! ! • base.css - Reset, suas propriedades de preferência extras;! • layouts.css - Propriedades específicas da aplicação;! • page.css - Folha de estilos com propriedades especificas

Slide 14

Slide 14 text

!cssHardcoded Seu código trabalha para você!! ! ! Containers inteligentes! .wrapper, .wrap, .box-areaname! ! Reaproveitamento de heads e textos! Defina os heads e textos uma vez! ! Identifique os padrões visuais do layout e tire proveito! Todo .wrap terá um padding-top? Ótimo!

Slide 15

Slide 15 text

CSS power over 9.000

Slide 16

Slide 16 text

box-sizing: border-box; box-sizing: Fala para o navegador quais propriedades de tamanhos ele deve incluir no elemento.! ! Valores do box-sizing:! ! content-box (default): Apenas incluso propriedades de width e height. Padding e border não se incluem;! ! border-box: Inclue, além de width e height, border e padding no tamanho de width e height.

Slide 17

Slide 17 text

box-sizing: border-box; content-box .quadradinho-de-8 { height: 100px; padding: 0 10px; } total height: 120px border-box .quadradinho-de-8 { height: 100px; padding: 0 10px; } total height: 100px

Slide 18

Slide 18 text

Super Power CSS for Mobile tap-highlight-color: transparent; -webkit-tap-highlight-color -moz-tap-highlight-color -ms-tap-highlight-color Ao tocar em algum link, ao fundo aparece um highlight no fundo do elemento. Home Home

Slide 19

Slide 19 text

Super Power CSS for Mobile img { width: 100%; max-width: 100%; height: auto; } Você define o tamanho do content da imagem e ela herda esse tamanho, se adaptando a valores relativos em level Jedi.! ! Ótima adaptação para as milhares de variações de telas mobile.

Slide 20

Slide 20 text

! Obrigado!! ! Resets CSS & Propriedades padrões Matheus Marsiglio ! Twitter - @matmarsiglio Medium - @matmarsiglio GitHub - /matmarsiglio CodePen - /matmarsiglio ! :)! http://www.heymathe.us/!