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

UI Realigning & Refactoring by Jina Bolton

on

  • 1,218 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,218
Views on SlideShare
1,152
Embed Views
66

Actions

Likes
6
Downloads
28
Comments
0

6 Embeds 66

http://html5devconf.com 52
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
    • Creating pages
    • 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!