CSS Workflow with Sass

CSS Workflowwith SassJina BoltonUser Experience DesignerEngine Yard ValioCon Carlsbad 2011

Hello! ValioCon Carlsbad 2011

sushiandrobots.com ValioCon Carlsbad 2011

artinmycoffee.com ValioCon Carlsbad 2011

engineyard.com ValioCon Carlsbad 2011

CSS Workflow ValioCon Carlsbad 2011

A good workflowgives you moretime to be creative Photo credit: http://flickr.com/photos/nostri-imago/3001714270/ ValioCon Carlsbad 2011

Good Workflow =Good Design Photo credit: http://flickr.com/photos/gen4152/445931195/ ValioCon Carlsbad 2011

Good Workflow =Good Development Photo credit: http://flickr.com/photos/gen4152/445931195/ ValioCon Carlsbad 2011

Good Workflow =Good Business Photo credit: http://flickr.com/photos/gen4152/445931195/ ValioCon Carlsbad 2011

You’re doing it wrong ValioCon Carlsbad 2011

Be creative ValioCon Carlsbad 2011

Be smart ValioCon Carlsbad 2011

Be efficient ValioCon Carlsbad 2011

Be realistic ValioCon Carlsbad 2011

Be psychic ValioCon Carlsbad 2011

It used to be that designersmade an object and walkedaway. Today the emphasismust shift to designing theentire life cycle. —Paul Saffo ValioCon Carlsbad 2011

A fractured processmakes for a fractureduser experience. —Nate Fortin ValioCon Carlsbad 2011

Evaluation ValioCon Carlsbad 2011

The Achilles Project ValioCon Carlsbad 2011

Sketch it out Photo credit: http://skitch.com/joesak/di74r/img-0287 ValioCon Carlsbad 2011

Create pages ValioCon Carlsbad 2011

Create systems ValioCon Carlsbad 2011

Organization ValioCon Carlsbad 2011

css/ img/img/js/swf/ ValioCon Carlsbad 2011

images/javascripts/stylesheets/ ValioCon Carlsbad 2011

images/ content/ layout/javascripts/ jquery/stylesheets/ framework/ ValioCon Carlsbad 2011

Be regular and orderlyin your life so that youmay be violent andoriginal in your work. —Gustave Flaubert ValioCon Carlsbad 2011

Front-EndArchitecture ValioCon Carlsbad 2011

The Achilles Project ValioCon Carlsbad 2011

The Achilles Project .page ValioCon Carlsbad 2011

The Achilles Project .logo .header .page .breadcrumbs .content .sidebar ValioCon Carlsbad 2011

The Achilles Project .logo .header .page .breadcrumbs .content .sidebar ul ValioCon Carlsbad 2011

The Achilles Project .logo .header .page .breadcrumbs .content .sidebar ul li li li li li ValioCon Carlsbad 2011

Clarity is beautiful Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

fg359dleftredbordershopping-cart Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Brevity is okay Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Clarity > brevity Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

entryContententry_contententry-content Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Microformatshttp://webdirections.org/slides/MicroformatsForDevelopers.pdfhttp://webdirections.org/slides/MicroformatsForDesigners.pdf Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

screen.cssmobile.cssprint.css ValioCon Carlsbad 2011

Resethttp://html5doctor.com/html-5-reset-stylesheet/ ValioCon Carlsbad 2011

FoundationHover state on buttons & labels:focus stylesZero out line-height on inline elementsList bullet stylesClear fixes, etc. ValioCon Carlsbad 2011

TypographyHeadersLists, Paragraphs, & Other Text ElementsTables, FormsInline Text ElementsDecorative Typography ValioCon Carlsbad 2011

LayoutGrid SystemLayout Backgrounds & BordersSection/Page-specific Styles, etc. ValioCon Carlsbad 2011

Plug-insThird-party widgetsSliders, scrollersTab switchers, etc. ValioCon Carlsbad 2011

screen.css reset foundation typography layout plug-insmobile.cssprint.css Photo credit: http://flickr.com/photos/trevino/1046513730/ ValioCon Carlsbad 2011

Keep propertiesorganized Photo credit: http://flickr.com/photos/minxlj/515294056/ ValioCon Carlsbad 2011

Alphabetical orfunctional? Photo credit: http://flickr.com/photos/minxlj/515294056/ ValioCon Carlsbad 2011

Separate by purpose Photo credit: http://flickr.com/photos/minxlj/515294056/ ValioCon Carlsbad 2011

Sass ValioCon Carlsbad 2011

Easier maintainability Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Better separationof presentationfrom content Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Better optimization Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Nesting Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

ul.items { overflow: hidden; }ul.items li { float: left; }ul.items a { display: block; }ul.items a span,ul.items a em { color: red; } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

ul.items { overflow: hidden; li { float: left; } a { display: block; span, em { color: red; } } } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Parent Selectors Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

ul.items a { display: block; }ul.items a:hover { color: blue; }.sidebar ul.items a { font-weight: bold; } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

ul.items a { display: block; &:hover { color: blue; } .sidebar & { font-weight: bold; } } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Nesting Properties Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

ul.items { border-bottom: 1px solid red; border-top: 1px solid blue; font-weight: bold; font-size: 2em; } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

ul.items { border: { bottom: 1px solid red; top: 1px solid blue; } font: { weight: bold; size: 2em; } } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Commenting Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

/* Multi-line; appears in output */// Single-line; hidden from output Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Variables Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

$color-text: #444;body { color: $color-text;} Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Mixins Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

@mixin clearfix { &:after { clear: both; visibility: hidden; display: block; height: 0; font-size: 0; content: " "; } .ie6 &, .ie7 & { zoom: 1; } }ul.items { @include clearfix; } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

@mixin rounded($radius: 10px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }.module { @include rounded; }.info { @include rounded(5px); } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Operations Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

.module h2 { font-size: 2em + 3em; width: $width/2; height: (500px*2); } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

.module h2 { background: #000 + #fff; }p{ color: rgba(0, 0, 0, .5) * 2; } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Functions Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

.module h2 { background: lighten($color-text, 5%); } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Interpolation Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

$name: awesome;$side: top;p.#{$name} { border-#{$side}-color: red; }p.awesome { border-top-color: red; } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Including Partials Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

@import "grid";@import "typography";@import "styles"; Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Extending styles Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

.message { border: 1px solid #ccc; }.message.alert { background: url(/images/alert.png) no-repeat;.error { @extend .message; background: red; } Photo credit: http://flickr.com/photos/tearsandrain/2868003710/ ValioCon Carlsbad 2011

Sass sass-lang.com ValioCon Carlsbad 2011

SassWatch twitter.com/SassWatch ValioCon Carlsbad 2011

InterfaceStyle Guide ValioCon Carlsbad 2011

Write an InterfaceStyle Guidehttp://alistapart.com/articles/writingainterfacestyleguide ValioCon Carlsbad 2011

// --------------------------------------------------// COLOR// --------------------------------------------------$color_border = #ccc // light grey$color_background = #f8f8f8 // lightest grey$color_background_alt = #cfdbe8 // light blue$color_background_alt2 = #e3e5cf // light beige$color_text = #555 // dark grey$color_text_alt = #999 // medium grey$color_text_alert = #910f0f // bold red ValioCon Carlsbad 2011

ValioCon Carlsbad 2011

h1 { border-bottom-color: darken($color_border, 10%); } ValioCon Carlsbad 2011

<div id="sidebar" class="grid_1 prefix alpha">…</div><div id="sidebar">…</div> ValioCon Carlsbad 2011

Document Failures ValioCon Carlsbad 2011

Keep documentationcurrent & useful ValioCon Carlsbad 2011

Resources ValioCon Carlsbad 2011

ProCSSor http://procssor.com/ ValioCon Carlsbad 2011

Modernizr modernizr.com ValioCon Carlsbad 2011

HTML 5 Boilerplate html5boilerplate.com ValioCon Carlsbad 2011

What else? ValioCon Carlsbad 2011

Patterns &Proportions ValioCon Carlsbad 2011

Write it clean.Keep it clean. ValioCon Carlsbad 2011

Archive what hasvalue. Trash the rest. ValioCon Carlsbad 2011

Collaborate ValioCon Carlsbad 2011

Get critiques &code reviews ValioCon Carlsbad 2011

Every human being isa designer. —Norman Potter ValioCon Carlsbad 2011

Master yourtext editor ValioCon Carlsbad 2011

Iterate ValioCon Carlsbad 2011

Fancy Form Design fancyformdesign.com ValioCon Carlsbad 2011

The Art & Science of CSS artsciencecss.com ValioCon Carlsbad 2011

@jina ValioCon Carlsbad 2011

@engineyard ValioCon Carlsbad 2011

Thanks! ValioCon Carlsbad 2011

Questions? ValioCon Carlsbad 2011

http://parashuto.com	339
http://www.scoop.it	17
http://jamesmadson.me	11
http://twitter.com	7
http://modea.posterous.com	4
https://twitter.com	3
http://a0.twimg.com	2
http://zootool.com	1
http://fairbet.asia	1
http://news.taaza.com	1
http://webcache.googleusercontent.com	1

CSS Workflow with Sass

by Jina Bolton on May 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 387

Statistics

CSS Workflow with Sass — Presentation Transcript