the coding designer's survival kit - capital camp

49
The Coding Designer's Survival Kit Markup, CSS, and JavaScript tools for Designing in the Browser

Upload: canarymason

Post on 22-Nov-2014

2.495 views

Category:

Technology


9 download

DESCRIPTION

 

TRANSCRIPT

Page 1: The Coding Designer's Survival Kit - Capital Camp

The Coding Designer's Survival Kit

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

Page 2: The Coding Designer's Survival Kit - Capital Camp

The Coding Designer's Survival Kit

And, yes, a Drupal theme, too.

Page 3: The Coding Designer's Survival Kit - Capital Camp

Present in the Browser

Page 4: The Coding Designer's Survival Kit - Capital Camp

• Can’t show interactions well, if at all

• It takes two images to show a mouseover

What Happens When I Mouse Over?

Page 5: The Coding Designer's Survival Kit - Capital Camp

How About Animations?

• Javascript, CSS3, Flash

• Slow & Classy

• vs. Fast & Exciting

Page 6: The Coding Designer's Survival Kit - Capital Camp

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.

Page 7: The Coding Designer's Survival Kit - Capital Camp

Last Minute Panic

• Browser support

• Interactions & Animations

• Type rendering

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

Page 8: The Coding Designer's Survival Kit - Capital Camp

No One Wants to Guess

Don’t make them.They like not guessing.

Page 9: The Coding Designer's Survival Kit - Capital Camp

Designing in CodeDo I ha!a?

Page 10: The Coding Designer's Survival Kit - Capital Camp

Who is Doing This?

• Not just Craig.

• Dan Cederholm @simplebits

• Andy Clarke @malarkey

• Meagan Fisher @owltastic

• More and more of us

Page 11: The Coding Designer's Survival Kit - Capital Camp

Design Thinking in CSS

• Play and experiment

• CSS becomes your new tool palate

• Work out parts of your design in PS

Speak CSS natively

Page 12: The Coding Designer's Survival Kit - Capital Camp

Don’t Design the Impossible!

Easy in Photoshop != Easy in CSS

Page 13: The Coding Designer's Survival Kit - Capital Camp

Don’t Design the Impossible!

Hard in Photoshop might = Easy in CSS

Page 14: The Coding Designer's Survival Kit - Capital Camp

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

Page 15: The Coding Designer's Survival Kit - Capital Camp

The Coding Designer’s Survival Kit

The Anti-GUI

A starter set of code and design tools

All bundled up and ready to rock

Page 16: The Coding Designer's Survival Kit - Capital Camp

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

Page 17: The Coding Designer's Survival Kit - Capital Camp

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

Page 18: The Coding Designer's Survival Kit - Capital Camp

BCBefore Coding

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

Page 19: The Coding Designer's Survival Kit - Capital Camp

HTML

Page 20: The Coding Designer's Survival Kit - Capital Camp

Modular HTML

Page 21: The Coding Designer's Survival Kit - Capital Camp

HTML5 Elements

Page 22: The Coding Designer's Survival Kit - Capital Camp

HTML UI Patterns

Page 23: The Coding Designer's Survival Kit - Capital Camp

Javascript

• jQuery UI

• Modernizr

• Selectivizr

• Formalize

• Respond.js

Page 24: The Coding Designer's Survival Kit - Capital Camp

Javascript

• Dynamic Carousel

• Lettering.js

• FitText

• Geared Scrolling

• more all the time

Page 25: The Coding Designer's Survival Kit - Capital Camp

CSS:Sass & Compass

Page 26: The Coding Designer's Survival Kit - Capital Camp

Sass

• Adds more power to the process of writing CSS

• Variables, Mixins, Selector Nesting

sass-lang.com

Page 27: The Coding Designer's Survival Kit - Capital Camp

Sass

• Two Syntaxes

• SCSS: looks like CSSYou’ll be comfortable.

• Sass: clean and terseYou’ll be faster.

sass-lang.com

Page 28: The Coding Designer's Survival Kit - Capital Camp

Sass Variablessass-lang.com

Page 29: The Coding Designer's Survival Kit - Capital Camp

Sass Mixinssass-lang.com

Page 30: The Coding Designer's Survival Kit - Capital Camp

Sass

• $variables

• +mixins

• math & color

• conditionals

• @media

sass-lang.com

Page 31: The Coding Designer's Survival Kit - Capital Camp

Sass

• @media

• CREATE AN EXAMPLE HERE

sass-lang.com

Page 32: The Coding Designer's Survival Kit - Capital Camp

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

Page 33: The Coding Designer's Survival Kit - Capital Camp

Compass CSS3compass-style.org

Page 34: The Coding Designer's Survival Kit - Capital Camp

Compass CSS3compass-style.org

Page 35: The Coding Designer's Survival Kit - Capital Camp

Compass

• Sprite Generation

• Typography

• Text Replacement

• Trig (what?!)

compass-style.org

Page 36: The Coding Designer's Survival Kit - Capital Camp

Compass Plugins

• Zen Theme

• Fancy Buttons & Sassy Buttonsmakes pretty buttons

• Sassafrascolor schemes

compass-style.org/frameworks

Page 37: The Coding Designer's Survival Kit - Capital Camp

Kit CSS:Step-by-Step

• First, Do no harm.

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

• Considered defaults

• Flavors

Page 38: The Coding Designer's Survival Kit - Capital Camp

Kit Flavors:Basic

Page 39: The Coding Designer's Survival Kit - Capital Camp

Kit Flavors:Naked

Page 40: The Coding Designer's Survival Kit - Capital Camp

Kit Flavors:Style Tile

Page 41: The Coding Designer's Survival Kit - Capital Camp

Kit Flavors:Style Tile

Page 42: The Coding Designer's Survival Kit - Capital Camp

Podcast

Page 43: The Coding Designer's Survival Kit - Capital Camp

Drupal Theme

• In active development

• Focus is on CSS

• Modules can handle the JS

• drupal.org/project/survivalkit

Page 44: The Coding Designer's Survival Kit - Capital Camp

The Coding Designer’s Survival Kit

The Kit & Podcast:

theCodingDesigner.com

The Theme:

drupal.org/project/survivalkit

Page 45: The Coding Designer's Survival Kit - Capital Camp

1

HARDBOILED

BY ANDY CLARKEWEB DESIGN

Resources

Hardboiled Web Design

Page 46: The Coding Designer's Survival Kit - Capital Camp

Resources

CSS3 for Web Designers

Page 47: The Coding Designer's Survival Kit - Capital Camp

Resources

Responsive Web Design

Page 48: The Coding Designer's Survival Kit - Capital Camp

Resources

sass-lang.com

compass-style.org

Page 49: The Coding Designer's Survival Kit - Capital Camp

Get in TouchMason Wendell

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

theCodingDesigner.comBirdsAndMonkeys.com

zivtech.com