UI Realigning & Refactoring by Jina Bolton
7 likes2,429 views
The document discusses the importance of refactoring in web user interface design, emphasizing clarity, maintainability, and efficiency in code. It outlines strategies for documenting changes and maintaining a consistent CSS architecture, alongside practical examples using Sass. The overall message advocates for a systematic approach to coding and documentation to enhance user experience and long-term project sustainability.
UI Realigning & Refactoring by Jina Bolton
- 1. Refactoring Web User Interfaces JINA BOLTON CODEMOTION BERLIN // 2013 (CC BY-NC-SA 3.0)
- 3. “It used to be that designers made an object and walked away. Today the emphasis must shift to designing the entire life cycle.” —PAUL SAFFO
- 7. “I always write code perfectly the first time.” —NO ONE EVER
- 8. Refactoring: CHANGE THE STRUCTURE OF EXISTING CODE WITHOUT CHANGING THE BEHAVIOR OF THAT CODE
- 9. Lack of clarity ➤ Confusion
- 10. No maintainability ➤ Inefficiency
- 12. Messy UI & CSS ➤ Messy UX
- 13. Get rid of code smells
- 14. Smell bad!
- 15. Refactoring is not just code clean up.
- 17. Refactoring & Style Guides go together perfectly.
- 19. Style guides for writing, design, & code
- 21. ENGINE YARD APP CLOUD, EARLY 2011
- 22. “A fractured process makes for a fractured user experience.” —NATE FORTIN
- 23. Make Refactoring & Documentation a regular part of your review process. 01 //
- 24. Don’t try to document everything at once. You’ll likely give up.
- 26. CSS Gatekeeper
- 27. Making something new? Document it.
- 28. Revising something? Refactor it. Then document it.
- 29. When code style preferences come up in code reviews, document it for reference in later code reviews.
- 30. smacss.com
- 31. sass-lang.com
- 32. Nesting USE (CAREFULLY) TO AVOID REPETITION
- 33. OUTPUT .menu a { color: #369; &:hover { color: #036; .note & { color: #fff; } } } .menu a { color: #369; } .menu a:hover { color: #036; } .note .menu a:hover { color: #fff; } SCSS
- 34. OUTPUT .menu a { color: #369; @media print { color: #000; } } .menu a { color: #369; } @media print { .menu a { color: #000; } } SCSS
- 35. OUTPUT .menu { border: 1px solid #eee { top-color: #fff; left: 0; } } .menu { border: 1px solid #eee; border-top-color: #fff; border-left: 0; } SCSS
- 36. If you’re nesting more than three levels deep, you’re probably doing something wrong. Refactor!
- 37. Variables STORE COMMON ATTRIBUTES FOR MAINTAINABILITY
- 38. OUTPUT $text: #444; $bg: $text; body { color: $text; } aside { background: $bg; } body { color: #444; } aside { background: #444; } SCSS
- 39. Mixins STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES
- 40. OUTPUT @mixin mod($txt: #ccc) { background: #111; color: $txt; } body { @include mod; } .box { @include mod(#888); } body { background: #111; color: #ccc; } .box { background: #111; color: #888; } SCSS
- 42. OUTPUT .message { padding: 1em; .content { background: #111; } } .error { @extend .message; color: #eee; } .message, .error { padding: 1em; } .message .content, .error .content { background: #111; } .error { color: #eee; } SCSS
- 43. Placeholder Selectors CREATE SILENT CLASSES THAT DON’T GET OUTPUT
- 44. OUTPUT %grid-1 { width: 240px; } %grid-2 { width: 480px; } .content { @extend %grid-1; background: #111; } .main { @extend %grid-1; color: #eee; } .content, .main { width: 240px; } .content { background: #111; } .main { color: #eee; } SCSS
- 45. Document your ideal CSS Architecture. 02 //
- 48. DO’S WEBSITE
- 54. VENDOR/_SHARED.SASS @import compass @import compass/layout @import susy KENOBI.CSS.SASS @import vendor/shared DEATHSTAR.CSS.SASS @import bootstrap/variables @import bootstrap/mixins @import vendor/shared 01 // VENDOR LIBRARIES
- 57. 01 // DEPENDENCIES/_SHARED.SASS @import metrics @import typography @import colors @import themes 02 // DEPENDENCIES VENDOR LIBRARIES Globally used variables, mixins, & functions
- 58. 01 // FOUNDATION/_SHARED.SASS @include border-box-sizing @import ../vendor/normalize @import base 03 // FOUNDATION VENDOR LIBRARIES 02 // DEPENDENCIES Plain old semantic HTML
- 61. 01 // KENOBI.CSS.SASS @import foundation/shared @import foundation/kenobi DEATHSTAR.CSS.SASS @import foundation/shared 03 // FOUNDATION VENDOR LIBRARIES 02 // DEPENDENCIES Kenobi has a different font, so we override them after importing shared styles.
- 62. 01 // COMPONENTS/_SHARED.SASS @import icons @import buttons @import toggles @import messages @import pagination 04 // COMPONENTS VENDOR LIBRARIES 02 // DEPENDENCIES 03 // FOUNDATION Modular components & their states. These should be able to be used anywhere.
- 63. 01 // REGIONS/_SHARED.SASS @import banner @import navigation @import complementary @import contentinfo 05 // REGIONS VENDOR LIBRARIES 02 // DEPENDENCIES 03 // FOUNDATION 04 // COMPONENTS Page regions, named after their class and role names.
- 64. 01 // HELPERS/_SHARED.SASS @import nonsemantic-classes @import placeholder-selectors 06 // HELPERS VENDOR LIBRARIES 02 // DEPENDENCIES 03 // FOUNDATION 04 // COMPONENTS 05 // REGIONS Non-semantic helpers
- 65. 01 // RESPONSIVE/_SHARED.SASS @import responsive/mobile @import responsive/tablet @import responsive/screen 07 // RESPONSIVE VENDOR LIBRARIES 02 // DEPENDENCIES 03 // FOUNDATION 04 // COMPONENTS 05 // REGIONS 06 // HELPERS Adjustments to type sizes, grids, and images.
- 66. 01 // @import tools/show-grid 08 // TOOLS VENDOR LIBRARIES 02 // DEPENDENCIES 03 // FOUNDATION 04 // COMPONENTS 05 // REGIONS 06 // HELPERS 07 // RESPONSIVE
- 67. 01 // <% if Rails.env.development? && Settings.show_grids %> @import tools/show-grid <% end %> 08 // TOOLS VENDOR LIBRARIES 02 // DEPENDENCIES 03 // FOUNDATION 04 // COMPONENTS 05 // REGIONS 06 // HELPERS 07 // RESPONSIVE
- 68. Don’t try to refactor everything at once. You’ll likely give up.
- 70. Refactor when you’re adding something new. Refactor when you’re fixing an issue. Refactor during code reviews.
- 71. } 01 // VENDOR LIBRARIES 02 // DEPENDENCIES 03 // FOUNDATION 04 // COMPONENTS 05 // REGIONS 06 // HELPERS 07 // RESPONSIVE 08 // TOOLS Put new CSS in the proper place. Move old CSS as you come to it in refactors. Have some tech debt time? Move more CSS.
- 72. Stay organized!
- 76. Make a UI Library03 //
- 77. oocss.org
- 78. Content (text, lists, tables) Navigation (tabs, pagination, filters, sorters, indexes) Status (progress, alerts, toasts) Interaction (forms, pickers, modals, drawers, toggles) Icons (consider SVG or fonts)
- 79. Show object & all associated states.
- 80. GUMBY FRAMEWORK’S UI KIT
- 81. Keep documentation current & useful.
- 83. STYLEDOCCO USED ON BOOTSTRAP
- 84. Get to know the tools you use. 04 //
- 86. Start at the element, then work outwards.
- 87. Use the CSS editor to debug quickly.
- 88. Don’t accidentally refresh all your changes away!
- 89. USING SUBLIME’S SEARCH TOOLS
- 90. COMMAND + P to find things quickly
- 91. COMMAND + SHIFT + F to see a full list of results in your project
- 92. If the selector or image is not used anywhere, it’s probably safe to delete it.
- 93. Red is a wonderful color to see during pull request reviews!
- 94. Check how your changes affect the object in the style guide. If the object you’re refactoring isn’t in the style guide, add it. Validate & Test.
- 95. During larger refactors, focus on one area at a time. 05 //
- 97. Color MAINTAINABILITY WITH SASS & STYLE GUIDES
- 98. Create a simple color palette. Use Sass to make variations.
- 99. OUTPUT $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);} .a { color: #3973ac; } .b { color: #2d5986; } .c { color: #2e669e; } .d { color: #666666; } .e { color: #99b2cc; } SCSS
- 100. Use your Sass variables to generate a living color palette in your style guide.
- 101. Make variables for common pairings of colors & Sass color functions, and document it.
- 102. ENGINE YARD APP CLOUD, EARLY 2011
- 103. _HEADER.SCSS // Color palette $black: #000; $grey: #eee; $white: invert($black); $h-bg-color: $black; $h-text-color: $grey; $h-link-color: $white; .header { background: $h-bg-color; color: $h-text-color; a { color: $h-link-color; } } _COLORS.SCSS
- 104. sassme.arc90.com
- 105. Make mixins for common pairings of background, text, & shadow colors.
- 106. DO’S POP STRIPE
- 108. PUKING RAINBOWS
- 109. Typography CREATE A SMART SYSTEM
- 110. Choose a standard base unit. 4 is good; it multiplies into 8, 12, 16, etc.
- 111. DEPENDENCIES/_TYPOGRAPHY.SASS // For typography, spacing, & grids $base-unit: 4px // These are used by both Compass & Susy $base-font-size: $base-unit * 4 $base-line-height: $base-font-size * 1.5
- 112. DEPENDENCIES/_TYPOGRAPHY.SASS $font-size-x-small: $base-font-size * .75 $font-size-small: $base-font-size * .875 $font-size: $base-font-size / 1px $font-size-large: $base-font-size * 1.125 $font-size-x-large: $base-font-size * 1.375 $font-size-xx-large: $base-font-size * 2.75 $line-height: $base-line-height / $base-font-size $line-height-reset: 1
- 113. DEPENDENCIES/_TYPOGRAPHY.SASS $sans-serif: Helvetica, Arial, sans-serif $serif: Georgia, serif $monospace: Menlo, Monaco, Consolas, monospace
- 114. Create mixins for your various type styles. Small and all caps, big quote styles, etc. Don’t have too many. Document them.
- 115. Layout REGIONS & GRID OPTIONS
- 116. Show layout structures: top-level, category, and detail/edit views.
- 118. BACKGROUNDS
- 119. BASELINE GRID
- 120. BOXES
- 121. GRID COLUMNS
- 122. ALL THE TOGGLES!
- 123. SUSY MAKES IT EASIER TO USE GRIDS
- 124. Try a responsive iframe sandbox during development.
- 125. USING IFRAMES TO DEVELOP FOR SMALLER SCREENS FIRST
- 126. Don’t try to refactor & document everything at once. You’ll likely give up.
- 127. Do refactor & document going forward, in iterations.
- 128. “Be regular and orderly in your life so that you may be violent and original in your work.” —GUSTAVE FLAUBERT
- 129. @jina
- 130. jina.me
- 131. artinmycoffee.com
- 133. Thank you!