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

Refactoring Web Interfaces

jina
May 29, 2014

Refactoring Web Interfaces

Talk given at DevConFu, ConvergeSE, CodeMotion Roma, SassConf, Future of Web Design, BlendConf, Distill, Nordic Ruby, CodeMotion Berlin, HTML5 Dev Conf, etc.

jina

May 29, 2014
Tweet

More Decks by jina

Other Decks in Technology

Transcript

  1. — PAUL SAFFO “It used to be that designers made

    an object and walked away. Today the emphasis must shi to designing the entire life cycle.”
  2. old styles // legacy CSS new styles // basic font

    sizes, colors, & fonts typography // basic font sizes, colors, & fonts layout // grid, borders, backgrounds overrides // temporary overrides for old styles local styles // localization context styles // styles for stores for b2b, education, etc.
  3. @mixin mod($txt: #ccc) { background: #111; color: $txt; } body

    { @include mod; } h1 { @include mod(#888); } body { background: #111; color: #ccc; } h1 { background: #111; color: #888888; } SCSS Output
  4. .message { padding: 1em; a { color: #369; } }

    .error { @extend .message; color: #eee; } .message, .error { padding: 1em; } .message a, .error a { color: #369; } .error { color: #eee; } SCSS Output
  5. %grid-1 { width: 240px; } %grid-2 { width: 480px; }

    .content { @extend %grid-1; color: #369; } .main { @extend %grid-1; background: #eee; } .content, .main { width: 240px; } .content { color: #369; } .main { background: #eee; } SCSS Output
  6. // ------------------------ // VENDOR @import vendor/shared @import bootstrap/variables @import bootstrap/mixins

    // ------------------------ // VENDOR @import vendor/shared deathstar.sass kenobi.sass
  7. // --------------------------------------- // DEPENDENCIES @import dependencies/shared @import dependencies/deathstar/themes @import dependencies/deathstar/animations

    // --------------------------------------- // DEPENDENCIES @import dependencies/shared @import dependencies/kenobi/themes deathstar.sass kenobi.sass
  8. // ----------------------- // BASE @import base/shared // ----------------------- // BASE

    @import base/shared @import base/kenobi/fonts deathstar.sass kenobi.sass
  9. // ------------------------------------ // REGIONS @import regions/deathstar/banner @import regions/deathstar/navigation // ------------------------------------

    // REGIONS @import regions/kenobi/banner @import regions/kenobi/complementary @import regions/kenobi/contentinfo deathstar.sass kenobi.sass
  10. // -------------------------------- // RESPONSIVE @import responsive/deathstar/mobile @import responsive/deathstar/tablet @import responsive/deathstar/screen

    @import responsive/deathstar/retina @import responsive/print // -------------------------------- // RESPONSIVE @import responsive/kenobi/mobile @import responsive/kenobi/tablet @import responsive/kenobi/screen @import responsive/kenobi/retina @import responsive/print deathstar.sass kenobi.sass
  11. vendor/ dependencies/ base/ components/ regions/ helpers/ responsive/ tools/ }PUT NEW

    CSS IN ITS PLACE MOVE OLD CSS AS YOU GET TO IT IN REVISIONS MOVE MORE WHEN YOU HAVE TIME TO WORK ON TECH DEBT
  12. Refactor when you’re adding something new. Refactor when you’re xing

    an issue. Refactor during issues come up in code reviews.
  13. If you see something you want to x that is

    not within the scope of the current commit, take note, and x it in a new commit.
  14. $x: #369; $y: #fff; .a { color: lighten($x, 5%); }

    .b { color: darken($x, 5%); } .c { color: saturate($x, 5%); } .d { color: grayscale($x ); } .e { color: mix($x, $y); } Just a few things Sass can do to your colors.
  15. Choose a standard base unit. 4 IS A GOOD BASE…

    IT MULTIPLIES INTO 8, 12, 16, ETC.
  16. Create Mixins for common type styles. SPACED OUT CAPS, BIG

    QUOTE STYLES… BUT DON’T HAVE TOO MANY. AND DOCUMENT THEM!
  17. — GUSTAVE FLAUBERT “Be regular and orderly in your life

    so that you may be violent and original in your work.”
  18. T W I T T E R , D R

    I B B B L E , I N STAG RA M , & G I T H U B @jina