Jina bolton - Refactoring Web Interfaces
description
Transcript of Jina bolton - Refactoring Web Interfaces
![Page 1: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/1.jpg)
RefactoringWeb Interfaces@ J I N A / / D E V CO N F U / / JŪR M A L A / / 2 0 1 4
![Page 2: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/2.jpg)
@jina
![Page 3: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/3.jpg)
Senior Product Designer
![Page 4: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/4.jpg)
— PA U L S A F F O
“It used to be that designers made an object and walked away. Today the emphasis must shi! to designing the entire life cycle.”
![Page 5: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/5.jpg)
What is refactoring?
![Page 6: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/6.jpg)
Refactoring:G E T T I N G R I D O F CO D E S M E L L S ?
![Page 7: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/7.jpg)
— S O M E L I A R
“I always code perfectly the !rst time.”
![Page 8: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/8.jpg)
lack of clarity confusion
![Page 9: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/9.jpg)
no maintainability inef!ciency
![Page 10: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/10.jpg)
duplication bloat
![Page 11: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/11.jpg)
Refactoring:B U S Y W O R K ?
![Page 12: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/12.jpg)
Refactoring:C H A N G E T H E S T R U C T U R E O F E X I S T I N G CO D E W I T H O U T C H A N G I N G T H E B E H A V I O R O F T H AT CO D E
![Page 13: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/13.jpg)
My "rst large major CSS refactor:
![Page 14: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/14.jpg)
2007–2008 // Apple Online Store
![Page 15: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/15.jpg)
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.
![Page 16: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/16.jpg)
Too bad I wasn’t using Sass then…
![Page 17: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/17.jpg)
![Page 18: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/18.jpg)
2010–2011 // AppCloud
![Page 19: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/19.jpg)
NestingU S E ( C A R E F U L LY ) T O A V O I D R E P E T I T I O N
![Page 20: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/20.jpg)
If you’re nesting more than 3 levels deep, you’re probably doing something wrong.
![Page 21: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/21.jpg)
VariablesS TO R E CO M M O N AT T R I B U T E S F O R M A I N TA I N A B I L I T Y
![Page 22: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/22.jpg)
MixinsS TO R E R E U S A B L E CO D E & PA S S A R G U M E N TS F O R O V E R R I D E S
![Page 23: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/23.jpg)
@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
![Page 24: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/24.jpg)
@extendC H A I N S E L E C TO R S TO G E T H E R
![Page 25: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/25.jpg)
.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
![Page 26: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/26.jpg)
Placeholder SelectorsC R E AT E S I L E N T C L A S S E S F O R @ E X T E N D
![Page 27: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/27.jpg)
%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
![Page 28: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/28.jpg)
ZOMG!
![Page 29: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/29.jpg)
Refactoring, Sass,& Style Guides are awesome together!
![Page 30: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/30.jpg)
Engine Yard App Cloud Style Guide, Early 2011
![Page 31: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/31.jpg)
blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides
![Page 32: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/32.jpg)
2012–2013 // Web App & Web Site
![Page 33: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/33.jpg)
Make Refactoring a regular part of your work"ow.
0 1 / /
![Page 34: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/34.jpg)
Don’t try to refactor everything at once.Y O U ’ L L L I K E LY G I V E U P.
![Page 35: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/35.jpg)
Refactorgoing forward.
![Page 36: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/36.jpg)
Making something new? Document it.
![Page 37: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/37.jpg)
Revising something? Refactor it.Then document it.
![Page 38: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/38.jpg)
If code style preferences are agreed upon,document it.
![Page 39: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/39.jpg)
Do you have a CSS Gatekeeper?
![Page 40: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/40.jpg)
Document your ideal CSS Architecture.
0 2 / /
![Page 42: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/42.jpg)
Do Web App “Deathstar”
![Page 43: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/43.jpg)
Do Website “Kenobi”
![Page 44: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/44.jpg)
deathstar.sass kenobi.sass
![Page 45: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/45.jpg)
deathstar.sass kenobi.sass
![Page 46: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/46.jpg)
deathstar.sass kenobi.sass
![Page 47: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/47.jpg)
deathstar.sass kenobi.sass
![Page 48: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/48.jpg)
deathstar.sass kenobi.sass
![Page 49: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/49.jpg)
vendor // third party libraries
![Page 50: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/50.jpg)
@import compass
@import susy
@import breakpoint
vendor/_shared.sass
![Page 54: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/54.jpg)
// ------------------------
// VENDOR
@import vendor/shared
@import bootstrap/variables
@import bootstrap/mixins
// ------------------------
// VENDOR
@import vendor/shared
deathstar.sass kenobi.sass
![Page 55: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/55.jpg)
vendor
dependencies // Global variables, mixins, & functions
![Page 56: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/56.jpg)
@import color
@import type
@import layout
dependencies/_shared.sass
![Page 57: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/57.jpg)
// ---------------------------------------
// DEPENDENCIES
@import dependencies/shared
@import dependencies/deathstar/themes
@import dependencies/deathstar/animations
// ---------------------------------------
// DEPENDENCIES
@import dependencies/shared
@import dependencies/kenobi/themes
deathstar.sass kenobi.sass
![Page 58: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/58.jpg)
vendor
dependencies
base // Plain old semantic HTML
![Page 59: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/59.jpg)
@include border-box-sizing
@import vendor/normalize
@import type
@import lists
@import tables
base/_shared.sass
![Page 60: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/60.jpg)
// -----------------------
// BASE
@import base/shared
// -----------------------
// BASE
@import base/shared
@import base/kenobi/fonts
deathstar.sass kenobi.sass
![Page 61: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/61.jpg)
vendor
dependencies
base
components // Modular components & states
![Page 62: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/62.jpg)
@import icons
@import forms
@import buttons
@import toggles
@import messages
components/_shared.sass
![Page 63: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/63.jpg)
// --------------------------------
// COMPONENTS
@import components/shared
@import components/deathstar/modals
// --------------------------------
// COMPONENTS
@import components/shared
deathstar.sass kenobi.sass
![Page 64: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/64.jpg)
vendor
dependencies
base
components
regions // Divided page regions
![Page 65: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/65.jpg)
// ------------------------------------
// 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
![Page 66: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/66.jpg)
vendor
dependencies
base
components
regions
helpers // Layout helpers
![Page 67: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/67.jpg)
@import layout-float
@import layout-display-table
@import visibility
helpers/_shared.sass
![Page 68: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/68.jpg)
// --------------------------------
// HELPERS
@import helpers/shared
@import helpers/deathstar/sprites
// --------------------------------
// HELPERS
@import helpers/shared
deathstar.sass kenobi.sass
![Page 69: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/69.jpg)
vendor
dependencies
base
components
regions
helpers
responsive // Adjustments to type & spacing
![Page 70: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/70.jpg)
// --------------------------------
// 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
![Page 71: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/71.jpg)
_buttons.sass _screen.sass
_forms.sass
_modals.sass
![Page 72: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/72.jpg)
vendor
dependencies
base
components
regions
helpers
responsive
tools // Visible grids & diagnostics
![Page 73: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/73.jpg)
@import show-grid
@import diagnostics
tools/_shared.sass
![Page 74: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/74.jpg)
<% if Rails.env.development? && Settings.show_grids %>
@import show-grid
@import diagnostics
<% end %>
tools/_shared.sass.erb
![Page 75: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/75.jpg)
vendor/
dependencies/
base/
components/
regions/
helpers/
responsive/
tools/
} P U T N E W C S S I N I TS P L A C E
M O V E O L D CS S A S Y O U G E T TO I T I N R E V I S I O N S
M O V E M O R E W H E N Y O UH A V E T I M E TO W O R K O NT E C H D E BT
![Page 76: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/76.jpg)
Refactor when you’re adding something new.
Refactor when you’re !xing an issue.
Refactor during issues come up in code reviews.
![Page 77: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/77.jpg)
Keep commits focused & organized.
0 3 / /
![Page 78: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/78.jpg)
Bigger commits lazy reviews
![Page 79: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/79.jpg)
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.
![Page 80: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/80.jpg)
To debug, inspect at the inner-most element then work outward.
![Page 81: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/81.jpg)
Find in Project (or GREP)to determine if what you’re editing is used anywhere else.
![Page 82: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/82.jpg)
Check how your commit affects the style guide.
![Page 83: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/83.jpg)
Not in a style guide?Put it in one!
![Page 84: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/84.jpg)
ColorM A I N TA I N A B I L I T Y W I T H S A S S
![Page 85: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/85.jpg)
Use your Sass Variables to generate a living color palette in your Style Guide.
![Page 86: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/86.jpg)
Create a simple color palette. Use Sass to do variations.
![Page 87: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/87.jpg)
$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.
![Page 88: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/88.jpg)
Make Variables for common pairings of color & Sass functions, and document it.
![Page 89: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/89.jpg)
$black: #000;
$grey: #eee;
$white: invert($black);
$h-bg-color: $black;
$h-text-color: $grey;
$h-link-color: $white;
_colors.scss _header.scss
![Page 91: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/91.jpg)
Make Mixins for common pairings of backgrounds, text colors, & shadow colors.
![Page 92: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/92.jpg)
Typography:C R E AT E A S M A R T S Y S T E M & S TA R T M O V I N G TO W A R D I T.
![Page 93: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/93.jpg)
Choose a standard base unit.4 I S A G O O D B A S E … I T M U LT I P L I E S I N TO 8 , 1 2 , 1 6 , E TC .
![Page 94: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/94.jpg)
Create Mixins for common type styles.S PA C E D O U T C A P S , B I G Q U O T E S T Y L E S …B U T D O N ’ T H A V E TO O M A N Y. A N D D O C U M E N T T H E M !
![Page 95: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/95.jpg)
Don’t try to refactor everything at once.Y O U ’ L L L I K E LY G I V E U P.
![Page 96: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/96.jpg)
Refactorgoing forward.
![Page 97: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/97.jpg)
— G U S TA V E F L A U B E R T
“Be regular and orderly in your life so that you may be violent and original in your work.”
![Page 98: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/98.jpg)
sfdc-styleguide.herokuapp.com
![Page 104: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/104.jpg)
themixinsf.com
![Page 105: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/105.jpg)
susy.oddbird.net
![Page 106: Jina bolton - Refactoring Web Interfaces](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c783274a7959f6208b464e/html5/thumbnails/106.jpg)
T W I T T E R , D R I B B B L E , I N S T A G R A M , & G I T H U B
@jina