the coding designer's survival kit - capital camp

The Coding Designer's Survival Kit

Markup, CSS, and JavaScript tools for Designing in the Browser

The Coding Designer's Survival Kit

And, yes, a Drupal theme, too.

Present in the Browser

• Can’t show interactions well, if at all

• It takes two images to show a mouseover

What Happens When I Mouse Over?

How About Animations?

• Javascript, CSS3, Flash

• Slow & Classy

• vs. Fast & Exciting

Hard to Change

• Some changes are trivial with CSS

• Fonts & Global Typography

• Color Palate

• Be careful of changes that are costly, but don’t add more creative energy.

Last Minute Panic

• Browser support

• Interactions & Animations

• Type rendering

The worst time to have theses discussions is at the end of the project.

No One Wants to Guess

Don’t make them.They like not guessing.

Designing in CodeDo I ha!a?

Who is Doing This?

• Not just Craig.

• Dan Cederholm @simplebits

• Andy Clarke @malarkey

• Meagan Fisher @owltastic

• More and more of us

Design Thinking in CSS

• Play and experiment

• CSS becomes your new tool palate

• Work out parts of your design in PS

Speak CSS natively

Don’t Design the Impossible!

Easy in Photoshop != Easy in CSS

Don’t Design the Impossible!

Hard in Photoshop might = Easy in CSS

Markup Asks Questions

That Photoshop Does Not

• What to do if this headline wraps?

• Have you designed for all possible list types? Tables? Form elements?

• Fluid layouts

• Responsive design

The Coding Designer’s Survival Kit

The Anti-GUI

A starter set of code and design tools

All bundled up and ready to rock

The Coding Designer’s Survival Kit

What's included?

• HTML5 Boilerplate

• Elements and pages to design for

• Modernizr & Selectivizr

• Lettering.js and other js tools

• Sass / Compass mixins galore

The Coding Designer’s Survival Kit

What's required?

• Stuff you need to install

• Sass, Compass

• Susy, Other Compass Plugins

• Livereload for auto-refreshing browsers

BCBefore Coding

Best to use as simple a tool as you can, until you need more power.

HTML

Modular HTML

HTML5 Elements

HTML UI Patterns

Javascript

• jQuery UI

• Modernizr

• Selectivizr

• Formalize

• Respond.js

Javascript

• Dynamic Carousel

• Lettering.js

• FitText

• Geared Scrolling

• more all the time

CSS:Sass & Compass

Sass

• Adds more power to the process of writing CSS

• Variables, Mixins, Selector Nesting

sass-lang.com

Sass

• Two Syntaxes

• SCSS: looks like CSSYou’ll be comfortable.

• Sass: clean and terseYou’ll be faster.

sass-lang.com

Sass Variablessass-lang.com

Sass Mixinssass-lang.com

Sass

• $variables

• +mixins

• math & color

• conditionals

• @media

sass-lang.com

Sass

• @media

• CREATE AN EXAMPLE HERE

sass-lang.com

Compass

• Stylesheet framework built around Sass

• Built-in mixins for CSS3 and common tasks like list formatting

• Use frameworks like Susy, Blueprint, and 960 semantically

• Add your own framework

compass-style.org

Compass CSS3compass-style.org

Compass CSS3compass-style.org

Compass

• Sprite Generation

• Typography

• Text Replacement

• Trig (what?!)

compass-style.org

Compass Plugins

• Zen Theme

• Fancy Buttons & Sassy Buttonsmakes pretty buttons

• Sassafrascolor schemes

compass-style.org/frameworks

Kit CSS:Step-by-Step

• First, Do no harm.

• Add functionality, not CSS you don’t need.

• Considered defaults

• Flavors

Kit Flavors:Basic

Kit Flavors:Naked

Kit Flavors:Style Tile

Kit Flavors:Style Tile

Podcast

Drupal Theme

• In active development

• Focus is on CSS

• Modules can handle the JS

• drupal.org/project/survivalkit

The Coding Designer’s Survival Kit

The Kit & Podcast:

theCodingDesigner.com

The Theme:

drupal.org/project/survivalkit

1

HARDBOILED

BY ANDY CLARKEWEB DESIGN

Resources

Hardboiled Web Design

Resources

CSS3 for Web Designers

Resources

Responsive Web Design

Resources

sass-lang.com

compass-style.org

Get in TouchMason Wendell

twitter/d.o/github/irc:@canarymason

theCodingDesigner.comBirdsAndMonkeys.com

zivtech.com