Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DesignOps: Removing Friction from Your Front-end Development Workflow

DesignOps: Removing Friction from Your Front-end Development Workflow

Implementing UX/UI change is not easy when code is architected without front-end flexibility in mind. If the process for making design changes is cumbersome, it slows down product iteration. Architect your app so that design changes and adding new features can be as frictionless as possible.

(Slides for my talk at Fluent 2013)
http://fluentconf.com/fluent2013/public/schedule/detail/28025

jessicaspacekat

May 29, 2013
Tweet

More Decks by jessicaspacekat

Other Decks in Programming

Transcript

  1. body { min-width: 960px; background: transparent url(/images/layout/bg_sky.png) top left repeat-x;

    // Add a visual banner to the top corner for dev mode &.development { &:after { position: fixed; content: 'development'; background-color: hsl(295, 77%, 74%); @include rotate(-45deg); white-space: nowrap; top: 26px; left: -50px; width: 200px; padding: 10px 0; text-align: center; color: $color_white; font-size: 14px; } } } Rails app sass
  2. html css tests <div class=“header”> .header { padding: 10px; }

    .instance-role gets around page.should have_selector(".instance-role")
  3. Ps

  4. .arrow-down { display: inline-block; width: 0; height: 0; border-left: 5px

    solid transparent; border-right: 5px solid transparent; border-top: 5px solid grey; border-bottom: none; } css css-tricks.com/snippets/css/css-triangle/
  5. vs.

  6. $ git pull $ git checkout -b “moar-sparklez” make rad

    design changes here $ git add -p $ git commit -m “sparklier pages” $ git push origin moar-sparklez