jina bolton - refactoring web interfaces
DESCRIPTION
Often designers and developers see Refactoring front end user interfaces as a dreaded, monolithic task. Organization, architecture, clean up, optimization, and 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, organization, and documentation tricks from a product designer's perspective. Start making refactoring a regular part of your design process and development workflows.TRANSCRIPT
RefactoringWeb Interfaces@ J I N A / / D E V CO N F U / / JŪR M A L A / / 2 0 1 4
@jina
Senior Product Designer
— 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.”
What is refactoring?
Refactoring:G E T T I N G R I D O F CO D E S M E L L S ?
— S O M E L I A R
“I always code perfectly the !rst time.”
lack of clarity confusion
no maintainability inef!ciency
duplication bloat
Refactoring:B U S Y W O R K ?
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
My "rst large major CSS refactor:
2007–2008 // Apple Online Store
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.
Too bad I wasn’t using Sass then…
2010–2011 // AppCloud
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
If you’re nesting more than 3 levels deep, you’re probably doing something wrong.
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
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
@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
@extendC H A I N S E L E C TO R S TO G E T H E R
.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
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
%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
ZOMG!
Refactoring, Sass,& Style Guides are awesome together!
Engine Yard App Cloud Style Guide, Early 2011
blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides
2012–2013 // Web App & Web Site
Make Refactoring a regular part of your work"ow.
0 1 / /
Don’t try to refactor everything at once.Y O U ’ L L L I K E LY G I V E U P.
Refactorgoing forward.
Making something new? Document it.
Revising something? Refactor it.Then document it.
If code style preferences are agreed upon,document it.
Do you have a CSS Gatekeeper?
Document your ideal CSS Architecture.
0 2 / /
Do Web App “Deathstar”
Do Website “Kenobi”
deathstar.sass kenobi.sass
deathstar.sass kenobi.sass
deathstar.sass kenobi.sass
deathstar.sass kenobi.sass
deathstar.sass kenobi.sass
vendor // third party libraries
@import compass
@import susy
@import breakpoint
vendor/_shared.sass
// ------------------------
// VENDOR
@import vendor/shared
@import bootstrap/variables
@import bootstrap/mixins
// ------------------------
// VENDOR
@import vendor/shared
deathstar.sass kenobi.sass
vendor
dependencies // Global variables, mixins, & functions
@import color
@import type
@import layout
dependencies/_shared.sass
// ---------------------------------------
// DEPENDENCIES
@import dependencies/shared
@import dependencies/deathstar/themes
@import dependencies/deathstar/animations
// ---------------------------------------
// DEPENDENCIES
@import dependencies/shared
@import dependencies/kenobi/themes
deathstar.sass kenobi.sass
vendor
dependencies
base // Plain old semantic HTML
@include border-box-sizing
@import vendor/normalize
@import type
@import lists
@import tables
base/_shared.sass
// -----------------------
// BASE
@import base/shared
// -----------------------
// BASE
@import base/shared
@import base/kenobi/fonts
deathstar.sass kenobi.sass
vendor
dependencies
base
components // Modular components & states
@import icons
@import forms
@import buttons
@import toggles
@import messages
components/_shared.sass
// --------------------------------
// COMPONENTS
@import components/shared
@import components/deathstar/modals
// --------------------------------
// COMPONENTS
@import components/shared
deathstar.sass kenobi.sass
vendor
dependencies
base
components
regions // Divided page regions
// ------------------------------------
// 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
vendor
dependencies
base
components
regions
helpers // Layout helpers
@import layout-float
@import layout-display-table
@import visibility
helpers/_shared.sass
// --------------------------------
// HELPERS
@import helpers/shared
@import helpers/deathstar/sprites
// --------------------------------
// HELPERS
@import helpers/shared
deathstar.sass kenobi.sass
vendor
dependencies
base
components
regions
helpers
responsive // Adjustments to type & spacing
// --------------------------------
// 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
_buttons.sass _screen.sass
_forms.sass
_modals.sass
vendor
dependencies
base
components
regions
helpers
responsive
tools // Visible grids & diagnostics
@import show-grid
@import diagnostics
tools/_shared.sass
<% if Rails.env.development? && Settings.show_grids %>
@import show-grid
@import diagnostics
<% end %>
tools/_shared.sass.erb
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
Refactor when you’re adding something new.
Refactor when you’re !xing an issue.
Refactor during issues come up in code reviews.
Keep commits focused & organized.
0 3 / /
Bigger commits lazy reviews
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.
To debug, inspect at the inner-most element then work outward.
Find in Project (or GREP)to determine if what you’re editing is used anywhere else.
Check how your commit affects the style guide.
Not in a style guide?Put it in one!
ColorM A I N TA I N A B I L I T Y W I T H S A S S
Use your Sass Variables to generate a living color palette in your Style Guide.
Create a simple color palette. Use Sass to do variations.
$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.
Make Variables for common pairings of color & Sass functions, and document it.
$black: #000;
$grey: #eee;
$white: invert($black);
$h-bg-color: $black;
$h-text-color: $grey;
$h-link-color: $white;
_colors.scss _header.scss
Make Mixins for common pairings of backgrounds, text colors, & shadow colors.
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.
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 .
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 !
Don’t try to refactor everything at once.Y O U ’ L L L I K E LY G I V E U P.
Refactorgoing forward.
— 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.”
sfdc-styleguide.herokuapp.com
themixinsf.com
susy.oddbird.net
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