Resets CSS e Propriedades padrões

Transcript

1. :)
2. Resets CSS & ! Propriedades Padrões! Matheus Marsiglio UI & Front-End Developer - Runrun.it! http://heymathe.us ! ! ! ! ! ! ! Twitter - @matmarsiglio Medium - @matmarsiglio GitHub - /matmarsiglio CodePen - /matmarsiglio
4. Resets CSS & Propriedades Padrões Matheus Marsiglio
5. 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;
6. Introdução ! body { margin: 8px; } .elemento { position: static; } h1 { font-size: 2em; } (article, aside, nav, section) h1 { font-size: 1.5em; } !
7. Propriedades Padrões
8. 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
9. Propriedades Padrões Principais elementos resetados! ! • ol, ul, li;! • a;! • body - (?)
10. 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;
11. !cssHardcoded
12. !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
13. !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
14. !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!
15. CSS power over 9.000
16. 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.
17. 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
18. 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
19. 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.
20. ! Obrigado!! ! Resets CSS & Propriedades padrões Matheus Marsiglio ! Twitter - @matmarsiglio Medium - @matmarsiglio GitHub - /matmarsiglio CodePen - /matmarsiglio ! :)! http://www.heymathe.us/!