Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Resets CSS e Propriedades padrões

Resets CSS e Propriedades padrões

Matheus Marsiglio

March 19, 2015
Tweet

More Decks by Matheus Marsiglio

Other Decks in Technology

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
  3. 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;
  4. Introdução ! body { margin: 8px; } .elemento { position:

    static; } h1 { font-size: 2em; } (article, aside, nav, section) h1 { font-size: 1.5em; } !
  5. 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
  6. 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;
  7. !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
  8. !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
  9. !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!
  10. 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.
  11. 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
  12. 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.
  13. ! Obrigado!! ! Resets CSS & Propriedades padrões Matheus Marsiglio

    ! Twitter - @matmarsiglio Medium - @matmarsiglio GitHub - /matmarsiglio CodePen - /matmarsiglio ! :)! http://www.heymathe.us/!