UI Realigning & Refactoring by Jina Bolton
Upcoming SlideShare
Loading in...5
×
 

UI Realigning & Refactoring by Jina Bolton

on

  • 1,328 views

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. ...

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.

Statistics

Views

Total Views
1,328
Views on SlideShare
1,260
Embed Views
68

Actions

Likes
7
Downloads
29
Comments
0

6 Embeds 68

http://html5devconf.com 54
http://berlin.codemotionworld.com 6
http://callforpaper.codemotionworld.com 2
https://twitter.com 2
http://localhost 2
http://www.html5devconf.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UI Realigning & Refactoring by Jina Bolton UI Realigning & Refactoring by Jina Bolton Presentation Transcript

  • Refactoring WebUser InterfacesJINA BOLTONCODEMOTION BERLIN // 2013(CC BY-NC-SA 3.0)
  • PRODUCT DESIGNER
  • “It used to be that designersmade an object and walkedaway. Today the emphasismust shift to designing theentire life cycle.”—PAUL SAFFO View slide
  • Creating pages View slide
  • Creating pages
  • Creating systems
  • “I always write codeperfectly the first time.”—NO ONE EVER
  • Refactoring:CHANGE THE STRUCTURE OF EXISTING CODE WITHOUTCHANGING THE BEHAVIOR OF THAT CODE
  • Lack of clarity ➤ Confusion
  • No maintainability ➤ Inefficiency
  • Duplication ➤ Bloat
  • Messy UI & CSS ➤ Messy UX
  • Get rid of code smells
  • Smell bad!
  • Refactoring is not justcode clean up.
  • ClarityMaintainabilityEfficiencyDRYQuality
  • Refactoring & StyleGuides go togetherperfectly.
  • alistapart.com/article/writingainterfacestyleguide
  • Style guides for writing,design, & code
  • blog.engineyard.com/front-end-maintainability-with-sass-and-style-guides
  • ENGINE YARD APP CLOUD, EARLY 2011
  • “A fractured processmakes for a fractureduser experience.”—NATE FORTIN
  • Make Refactoring &Documentation a regularpart of your review process.01 //
  • Don’t try to documenteverything at once.You’ll likely give up.
  • Do document goingforward.
  • CSS Gatekeeper
  • Making somethingnew? Document it.
  • Revising something?Refactor it.Then document it.
  • When code style preferencescome up in code reviews,document it for reference inlater code reviews.
  • smacss.com
  • sass-lang.com
  • NestingUSE (CAREFULLY) TO AVOID REPETITION
  • 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
  • OUTPUT.menu a {color: #369;@media print {color: #000;}}.menu a { color: #369; }@media print {.menu a { color: #000; }}SCSS
  • OUTPUT.menu {border: 1px solid #eee {top-color: #fff;left: 0;}}.menu {border: 1px solid #eee;border-top-color: #fff;border-left: 0;}SCSS
  • If you’re nesting more than threelevels deep, you’re probably doingsomething wrong. Refactor!
  • VariablesSTORE COMMON ATTRIBUTES FOR MAINTAINABILITY
  • OUTPUT$text: #444;$bg: $text;body { color: $text; }aside { background: $bg; }body { color: #444; }aside { background: #444; }SCSS
  • MixinsSTORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES
  • 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
  • ExtendCHAIN SELECTORS TOGETHER
  • 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
  • PlaceholderSelectorsCREATE SILENT CLASSES THAT DON’T GET OUTPUT
  • 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
  • Document your idealCSS Architecture.02 //
  • DO’S WEB APPLICATION
  • deathstarDO’S WEB APPLICATION
  • DO’S WEBSITE
  • KenobiDO’S WEBSITE
  • KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
  • KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
  • KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
  • KENOBI.CSS.SASSDEATHSTAR.CSS.SASS
  • VENDOR/_SHARED.SASS@import compass@import compass/layout@import susyKENOBI.CSS.SASS@import vendor/sharedDEATHSTAR.CSS.SASS@import bootstrap/variables@import bootstrap/mixins@import vendor/shared01 // VENDOR LIBRARIES
  • compass-style.org
  • susy.oddbird.netSUSY›‹
  • 01 //DEPENDENCIES/_SHARED.SASS@import metrics@import typography@import colors@import themes02 // DEPENDENCIESVENDOR LIBRARIESGlobally used variables,mixins, & functions
  • 01 //FOUNDATION/_SHARED.SASS@include border-box-sizing@import ../vendor/normalize@import base03 // FOUNDATIONVENDOR LIBRARIES02 // DEPENDENCIESPlain old semanticHTML
  • http://paulirish.com/2012/box-sizing-border-box-ftw/
  • necolas.github.com/normalize.css/normalize
  • 01 //KENOBI.CSS.SASS@import foundation/shared@import foundation/kenobiDEATHSTAR.CSS.SASS@import foundation/shared03 // FOUNDATIONVENDOR LIBRARIES02 // DEPENDENCIESKenobi has a differentfont, so we overridethem after importingshared styles.
  • 01 //COMPONENTS/_SHARED.SASS@import icons@import buttons@import toggles@import messages@import pagination04 // COMPONENTSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATIONModular components& their states.These should be able tobe used anywhere.
  • 01 //REGIONS/_SHARED.SASS@import banner@import navigation@import complementary@import contentinfo05 // REGIONSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTSPage regions, namedafter their class and rolenames.
  • 01 //HELPERS/_SHARED.SASS@import nonsemantic-classes@import placeholder-selectors06 // HELPERSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONSNon-semantic helpers
  • 01 //RESPONSIVE/_SHARED.SASS@import responsive/mobile@import responsive/tablet@import responsive/screen07 // RESPONSIVEVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 // HELPERSAdjustments to typesizes, grids, and images.
  • 01 //@import tools/show-grid08 // TOOLSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 // HELPERS07 // RESPONSIVE
  • 01 //<% if Rails.env.development? && Settings.show_grids %>@import tools/show-grid<% end %>08 // TOOLSVENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 // HELPERS07 // RESPONSIVE
  • Don’t try to refactoreverything at once.You’ll likely give up.
  • Do refactor goingforward.
  • Refactor when you’re addingsomething new.Refactor when you’re fixing an issue.Refactor during code reviews.
  • }01 // VENDOR LIBRARIES02 // DEPENDENCIES03 // FOUNDATION04 // COMPONENTS05 // REGIONS06 // HELPERS07 // RESPONSIVE08 // TOOLSPut new CSS in theproper place.Move old CSS as youcome to it in refactors.Have some tech debttime? Move more CSS.
  • Stay organized!
  • app/views/layoutscomponents/dependencies/foundation/helpers/regions/_banner.sass_contentinfo.sassresponsive/tools/vendor/deathstar.css.scsskenobi.css.scsscomponents/regions/_banner.haml_contentinfo.hamldeathstar.hamlkenobi.hamlapp/assets/stylesheets
  • app/assets/javascriptscomponents/dependencies/foundation/helpers/regions/responsive/tools/vendor/deathstar.css.scsskenobi.css.scsscomponents/responsive/tools/vendor/jquery.jsmodernizr.jsdeathstar.js.coffeekenobi.js.coffeeapp/assets/stylesheets
  • app/assets/imagescomponents/icons/dependencies/foundation/helpers/regions/responsive/tools/vendor/deathstar.css.scsskenobi.css.scsscomponents/icons/textures/logos/regions/vendor/app/assets/stylesheets
  • Make a UI Library03 //
  • oocss.org
  • 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)
  • Show object &all associated states.
  • GUMBY FRAMEWORK’S UI KIT
  • Keep documentationcurrent & useful.
  • jacobrask.github.com/styledocco/
  • STYLEDOCCO USED ON BOOTSTRAP
  • Get to know thetools you use.04 //
  • USING CHROME INSPECTOR
  • Start at the element,then work outwards.
  • Use the CSS editor todebug quickly.
  • Don’t accidentallyrefresh all yourchanges away!
  • USING SUBLIME’S SEARCH TOOLS
  • COMMAND + Pto find things quickly
  • COMMAND + SHIFT + Fto see a full list ofresults in your project
  • If the selector or image is notused anywhere, it’s probablysafe to delete it.
  • Red is a wonderfulcolor to see during pullrequest reviews!
  • Check how your changes affect the objectin the style guide.If the object you’re refactoring isn’t in thestyle guide, add it.Validate & Test.
  • During largerrefactors, focus onone area at a time.05 //
  • ColorTypographyLayout
  • ColorMAINTAINABILITY WITH SASS & STYLE GUIDES
  • Create a simple colorpalette. Use Sass tomake variations.
  • 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
  • Use your Sass variables togenerate a living color palettein your style guide.
  • Make variables for commonpairings of colors & Sass colorfunctions, and document it.
  • ENGINE YARD APP CLOUD, EARLY 2011
  • _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
  • sassme.arc90.com
  • Make mixins for commonpairings of background, text,& shadow colors.
  • DO’S POP STRIPE
  • http://codepen.io/jina/pen/iosjp
  • PUKING RAINBOWS
  • TypographyCREATE A SMART SYSTEM
  • Choose a standardbase unit.4 is good; it multiplies into 8, 12, 16, etc.
  • 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
  • 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
  • DEPENDENCIES/_TYPOGRAPHY.SASS$sans-serif: Helvetica, Arial, sans-serif$serif: Georgia, serif$monospace: Menlo, Monaco, Consolas, monospace
  • Create mixins for yourvarious type styles.Small and all caps, big quote styles, etc.Don’t have too many. Document them.
  • LayoutREGIONS & GRID OPTIONS
  • Show layout structures:top-level, category, anddetail/edit views.
  • starbucks.com/static/reference/styleguide/layout_promo_a.aspx
  • BACKGROUNDS
  • BASELINE GRID
  • BOXES
  • GRID COLUMNS
  • ALL THE TOGGLES!
  • SUSY MAKES IT EASIER TO USE GRIDS
  • Try a responsive iframesandbox duringdevelopment.
  • USING IFRAMES TO DEVELOP FOR SMALLER SCREENS FIRST
  • Don’t try to refactor &document everythingat once.You’ll likely give up.
  • Do refactor & document goingforward, in iterations.
  • “Be regular and orderlyin your life so that youmay be violent andoriginal in your work.”—GUSTAVE FLAUBERT
  • @jina
  • jina.me
  • artinmycoffee.com
  • DO.COM@DOWORKTOGETHER
  • Thank you!