ui realigning & refactoring by jina bolton
DESCRIPTION
Often designers and developers see Markup and CSS Refactoring as a dreaded, monolithic task. Organization, architecture, clean up, optimization, documentation all seem tedious and overwhelming. However, if you’re armed with the right tools and a solid foundation, you may find refactoring to be actually quite fun. Learn some Sass, markup, and documentation tips & tricks from a product designer’s perspective. Start making refactoring a regular part of your design process and development workflows.TRANSCRIPT
![Page 1: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/1.jpg)
Refactoring Web User InterfacesJINA BOLTON
CODEMOTION BERLIN // 2013
(CC BY-NC-SA 3.0)
![Page 2: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/2.jpg)
PRODUCT DESIGNER
![Page 3: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/3.jpg)
“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
![Page 4: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/4.jpg)
Creating pages
![Page 5: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/5.jpg)
Creating pages
![Page 6: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/6.jpg)
Creating systems
![Page 7: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/7.jpg)
“I always write code perfectly the first time.”
—NO ONE EVER
![Page 8: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/8.jpg)
Refactoring:CHANGE THE STRUCTURE OF EXISTING CODE WITHOUT
CHANGING THE BEHAVIOR OF THAT CODE
![Page 9: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/9.jpg)
Lack of clarity ➤ Confusion
![Page 10: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/10.jpg)
No maintainability ➤ Inefficiency
![Page 11: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/11.jpg)
Duplication ➤ Bloat
![Page 12: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/12.jpg)
Messy UI & CSS ➤ Messy UX
![Page 13: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/13.jpg)
Get rid of code smells
![Page 14: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/14.jpg)
Smell bad!
![Page 15: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/15.jpg)
Refactoring is not just code clean up.
![Page 16: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/16.jpg)
Clarity
Maintainability
Efficiency
DRY
Quality
![Page 17: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/17.jpg)
Refactoring & Style Guides go together perfectly.
![Page 18: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/18.jpg)
alistapart.com/article/writingainterfacestyleguide
![Page 19: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/19.jpg)
Style guides for writing, design, & code
![Page 20: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/20.jpg)
blog.engineyard.com/
front-end-maintainability-with-sass-and-style-guides
![Page 21: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/21.jpg)
ENGINE YARD APP CLOUD, EARLY 2011
![Page 22: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/22.jpg)
“A fractured process makes for a fractured user experience.”
—NATE FORTIN
![Page 23: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/23.jpg)
Make Refactoring & Documentation a regular part of your review process.
01 //
![Page 24: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/24.jpg)
Don’t try to document everything at once.
You’ll likely give up.
![Page 25: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/25.jpg)
Do document going forward.
![Page 26: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/26.jpg)
CSS Gatekeeper
![Page 27: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/27.jpg)
Making something new? Document it.
![Page 28: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/28.jpg)
Revising something? Refactor it.Then document it.
![Page 29: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/29.jpg)
When code style preferences come up in code reviews, document it for reference in later code reviews.
![Page 30: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/30.jpg)
smacss.com
![Page 31: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/31.jpg)
sass-lang.com
![Page 32: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/32.jpg)
NestingUSE (CAREFULLY) TO AVOID REPETITION
![Page 33: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/33.jpg)
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
![Page 34: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/34.jpg)
OUTPUT
.menu a {
color: #369;
@media print {
color: #000;
}
}
.menu a { color: #369; }
@media print {
.menu a { color: #000; }
}
SCSS
![Page 35: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/35.jpg)
OUTPUT
.menu {
border: 1px solid #eee {
top-color: #fff;
left: 0;
}
}
.menu {
border: 1px solid #eee;
border-top-color: #fff;
border-left: 0;
}
SCSS
![Page 36: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/36.jpg)
If you’re nesting more than three levels deep, you’re probably doing something wrong. Refactor!
![Page 37: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/37.jpg)
VariablesSTORE COMMON ATTRIBUTES FOR MAINTAINABILITY
![Page 38: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/38.jpg)
OUTPUT
$text: #444;
$bg: $text;
body { color: $text; }
aside { background: $bg; }
body { color: #444; }
aside { background: #444; }
SCSS
![Page 39: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/39.jpg)
MixinsSTORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES
![Page 40: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/40.jpg)
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
![Page 41: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/41.jpg)
ExtendCHAIN SELECTORS TOGETHER
![Page 42: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/42.jpg)
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
![Page 43: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/43.jpg)
Placeholder SelectorsCREATE SILENT CLASSES THAT DON’T GET OUTPUT
![Page 44: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/44.jpg)
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
![Page 45: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/45.jpg)
Document your ideal CSS Architecture.
02 //
![Page 46: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/46.jpg)
DO’S WEB APPLICATION
![Page 47: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/47.jpg)
deathstarDO’S WEB APPLICATION
![Page 48: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/48.jpg)
DO’S WEBSITE
![Page 49: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/49.jpg)
KenobiDO’S WEBSITE
![Page 50: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/50.jpg)
KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
![Page 51: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/51.jpg)
KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
![Page 52: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/52.jpg)
KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
![Page 53: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/53.jpg)
KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
![Page 54: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/54.jpg)
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
![Page 55: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/55.jpg)
compass-style.org
![Page 56: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/56.jpg)
susy.oddbird.net
SUSY›‹
![Page 57: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/57.jpg)
01 //
DEPENDENCIES/_SHARED.SASS
@import metrics
@import typography
@import colors
@import themes
02 // DEPENDENCIESVENDOR LIBRARIES
Globally used variables, mixins, & functions
![Page 58: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/58.jpg)
01 //
FOUNDATION/_SHARED.SASS
@include border-box-sizing
@import ../vendor/normalize
@import base
03 // FOUNDATION
VENDOR LIBRARIES
02 // DEPENDENCIES
Plain old semantic HTML
![Page 59: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/59.jpg)
http://paulirish.com/2012/box-sizing-border-box-ftw/
![Page 60: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/60.jpg)
necolas.github.com/normalize.css/
normalize
![Page 61: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/61.jpg)
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.
![Page 62: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/62.jpg)
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.
![Page 63: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/63.jpg)
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.
![Page 64: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/64.jpg)
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
![Page 65: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/65.jpg)
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.
![Page 66: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/66.jpg)
01 //
@import tools/show-grid
08 // TOOLS
VENDOR LIBRARIES
02 // DEPENDENCIES
03 // FOUNDATION
04 // COMPONENTS
05 // REGIONS
06 // HELPERS
07 // RESPONSIVE
![Page 67: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/67.jpg)
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
![Page 68: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/68.jpg)
Don’t try to refactor everything at once.
You’ll likely give up.
![Page 69: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/69.jpg)
Do refactor going forward.
![Page 70: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/70.jpg)
Refactor when you’re addingsomething new.
Refactor when you’re fixing an issue.
Refactor during code reviews.
![Page 71: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/71.jpg)
}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.
![Page 72: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/72.jpg)
Stay organized!
![Page 73: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/73.jpg)
app/views/layouts
components/
dependencies/
foundation/
helpers/regions/
_banner.sass
_contentinfo.sass
responsive/tools/
vendor/
deathstar.css.scss
kenobi.css.scss
components/
regions/
_banner.haml
_contentinfo.haml
deathstar.haml
kenobi.haml
app/assets/stylesheets
![Page 74: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/74.jpg)
app/assets/javascripts
components/
dependencies/
foundation/
helpers/regions/
responsive/
tools/
vendor/
deathstar.css.scss
kenobi.css.scss
components/
responsive/
tools/
vendor/
jquery.js
modernizr.js
deathstar.js.coffee
kenobi.js.coffee
app/assets/stylesheets
![Page 75: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/75.jpg)
app/assets/images
components/
icons/
dependencies/foundation/
helpers/
regions/
responsive/
tools/
vendor/
deathstar.css.scss
kenobi.css.scss
components/
icons/
textures/
logos/
regions/
vendor/
app/assets/stylesheets
![Page 76: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/76.jpg)
Make a UI Library03 //
![Page 78: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/78.jpg)
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)
![Page 79: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/79.jpg)
Show object &all associated states.
![Page 80: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/80.jpg)
GUMBY FRAMEWORK’S UI KIT
![Page 81: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/81.jpg)
Keep documentation current & useful.
![Page 82: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/82.jpg)
jacobrask.github.com/styledocco/
![Page 83: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/83.jpg)
STYLEDOCCO USED ON BOOTSTRAP
![Page 84: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/84.jpg)
Get to know the tools you use.
04 //
![Page 85: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/85.jpg)
USING CHROME INSPECTOR
![Page 86: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/86.jpg)
Start at the element, then work outwards.
![Page 87: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/87.jpg)
Use the CSS editor to debug quickly.
![Page 88: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/88.jpg)
Don’t accidentally refresh all yourchanges away!
![Page 89: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/89.jpg)
USING SUBLIME’S SEARCH TOOLS
![Page 90: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/90.jpg)
COMMAND + P
to find things quickly
![Page 91: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/91.jpg)
COMMAND + SHIFT + F
to see a full list of results in your project
![Page 92: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/92.jpg)
If the selector or image is not used anywhere, it’s probably safe to delete it.
![Page 93: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/93.jpg)
Red is a wonderful color to see during pull request reviews!
![Page 94: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/94.jpg)
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.
![Page 95: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/95.jpg)
During larger refactors, focus on one area at a time.
05 //
![Page 96: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/96.jpg)
Color
Typography
Layout
![Page 97: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/97.jpg)
ColorMAINTAINABILITY WITH SASS & STYLE GUIDES
![Page 98: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/98.jpg)
Create a simple color palette. Use Sass to make variations.
![Page 99: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/99.jpg)
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
![Page 100: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/100.jpg)
Use your Sass variables to generate a living color palette in your style guide.
![Page 101: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/101.jpg)
Make variables for common pairings of colors & Sass color functions, and document it.
![Page 102: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/102.jpg)
ENGINE YARD APP CLOUD, EARLY 2011
![Page 103: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/103.jpg)
_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
![Page 104: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/104.jpg)
sassme.arc90.com
![Page 105: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/105.jpg)
Make mixins for common pairings of background, text,& shadow colors.
![Page 106: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/106.jpg)
DO’S POP STRIPE
![Page 108: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/108.jpg)
PUKING RAINBOWS
![Page 109: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/109.jpg)
TypographyCREATE A SMART SYSTEM
![Page 110: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/110.jpg)
Choose a standard base unit.4 is good; it multiplies into 8, 12, 16, etc.
![Page 111: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/111.jpg)
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
![Page 112: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/112.jpg)
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
![Page 113: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/113.jpg)
DEPENDENCIES/_TYPOGRAPHY.SASS
$sans-serif: Helvetica, Arial, sans-serif
$serif: Georgia, serif
$monospace: Menlo, Monaco, Consolas, monospace
![Page 114: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/114.jpg)
Create mixins for your various type styles.Small and all caps, big quote styles, etc. Don’t have too many. Document them.
![Page 115: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/115.jpg)
LayoutREGIONS & GRID OPTIONS
![Page 116: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/116.jpg)
Show layout structures: top-level, category, and detail/edit views.
![Page 117: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/117.jpg)
starbucks.com/static/reference/styleguide/
layout_promo_a.aspx
![Page 118: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/118.jpg)
BACKGROUNDS
![Page 119: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/119.jpg)
BASELINE GRID
![Page 120: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/120.jpg)
BOXES
![Page 121: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/121.jpg)
GRID COLUMNS
![Page 122: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/122.jpg)
ALL THE TOGGLES!
![Page 123: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/123.jpg)
SUSY MAKES IT EASIER TO USE GRIDS
![Page 124: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/124.jpg)
Try a responsive iframe sandbox during development.
![Page 125: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/125.jpg)
USING IFRAMES TO DEVELOP FOR SMALLER SCREENS FIRST
![Page 126: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/126.jpg)
Don’t try to refactor & document everything at once.You’ll likely give up.
![Page 127: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/127.jpg)
Do refactor & document going forward, in iterations.
![Page 128: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/128.jpg)
“Be regular and orderly in your life so that you may be violent and original in your work.”
—GUSTAVE FLAUBERT
![Page 129: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/129.jpg)
@jina
![Page 130: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/130.jpg)
jina.me
![Page 131: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/131.jpg)
artinmycoffee.com
![Page 132: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/132.jpg)
DO.COM
@DOWORKTOGETHER
![Page 133: UI Realigning & Refactoring by Jina Bolton](https://reader034.vdocuments.net/reader034/viewer/2022051613/54c7601e4a79590d288b457a/html5/thumbnails/133.jpg)
Thank you!