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

Normalising Designs For Better Quality CSS

Harry Roberts
September 13, 2013

Normalising Designs For Better Quality CSS

Normalising Designs For Better Quality CSS at CSSconf.eu, Berlin. September 2013.

Video: http://bit.ly/15CS3VF

Harry Roberts

September 13, 2013
Tweet

More Decks by Harry Roberts

Other Decks in Design

Transcript

  1. Not anti-design at all. Will not work on every site.

    Not necessary for every site. You might just disagree. Disclaimer
  2. Disclaimer Not anti-design at all. Will not work on every

    site. Not necessary for every site. You might just disagree. #DesignersHateHim
  3. Have a good relationship with designers. Discuss and explain everything.

    Collaborate to reach ideals. No means no. Making compromises
  4. No guarantee I will build exactly as designed. Too early

    to agree or commit. Gives me an idea of the overall design. A PSD is a clue…
  5. Pretty much anything is buildable but… …not everything should be.

    I used to pride myself on writing tonnes of CSS to perfectly reproduce a design. Bad idea. It’s doable, but…
  6. If we can achieve 80% of the design with 20%

    of the code, we should. 80:20
  7. Kinda makes me look like a bad developer. So much

    more to being a front-end dev than reproducing designs pixel-for-pixel. Look at the bigger picture. I thought you were good!
  8. /** * 1. Assume a 16px default. */ html {

    font-size: 100%; /* [1] */ line-height: 1.5; } http://bit.ly/13Vi6bu
  9. h1 { margin: 12px 0 38px 0; } p {

    margin: 7px 7px 20px 0; } .contact-form { margin: 10px 0 0 0; } ...
  10. h1, h2, h3, h4, h5, h6, hgroup, ul, ol, dl,

    blockquote, p, address, table, fieldset, figure, pre { margin: 0; margin-bottom: 24px; } http://bit.ly/LidsHu
  11. .island, .islet { display: block; } .island { padding: 24px;

    } .islet { padding: 12px; } http://bit.ly/13TfmeR
  12. .foo--tiny { 0.25x } .foo--small { 0.50x } .foo {

    1.00x } .foo--large { 2.00x } .foo--huge { 4.00x }
  13. .foo--tiny { margin-bottom: 6px; } .foo--small { margin-bottom: 12px; }

    .foo { margin-bottom: 24px; } .foo--large { margin-bottom: 48px; } .foo--huge { margin-bottom: 96px; }
  14. .btn--tiny { padding: 6px; } .btn--small { padding: 12px; }

    .btn { padding: 24px; } .btn--large { padding: 48px; } .btn--huge { padding: 96px; }
  15. Typography Piggyback HTML elements. Body copy is the default. Headings

    and smallprint deviate. Most UI elements fall into one of the above.
  16. h1, .h1 { font-size: ; } h2, .h2 { font-size:

    ; } h3, .h3 { font-size: ; } h4, .h4 { font-size: ; } h5, .h5 { font-size: ; } h6, .h6 { font-size: ; } http://bit.ly/15B7wRf
  17. Background image? Extra request. Base64? Lots of ugly code. CSS

    gradients and pseudo elements? Hacky. How?
  18. m.skybet.com Our most pared back, rationalised design. It still looks

    great. Our fastest site by far. Users love it.
  19. In summary We don’t deliver designs, we deliver websites. Make

    compromises for the sake of build quality. Stick to the rules. Be clever; cheat!
  20. Thank you! Consultant Front-end Architect – CSS Wizardry Senior UI

    Developer – BSkyB @csswizardry csswizardry.com/work