The Coding Designer's Survival Kit - Capital Camp

download The Coding Designer's Survival Kit - Capital Camp

of 49

  • date post

  • Category


  • view

  • download


Embed Size (px)



Transcript of The Coding Designer's Survival Kit - Capital Camp

  • 1. The Coding Designers Survival Kit Markup, CSS, and JavaScript tools for Designing in the Browser

2. The Coding Designers Survival KitAnd, yes, a Drupal theme, too. 3. Present in the Browser 4. What Happens WhenI Mouse Over? Cant show interactions well, if at all It takes two images to show a mouseover 5. How About Animations? Javascript, CSS3, Flash Slow & Classy vs. Fast & Exciting 6. Hard to Change Some changes are trivial with CSS Fonts & Global Typography Color Palate Be careful of changes that are costly, butdont add more creative energy. 7. Last Minute Panic Browser support Interactions & Animations Type renderingThe worst time to have theses discussionsis at the end of the project. 8. No OneWants to GuessDont make them.They like not guessing. 9. Designing in CodeDo I ha a? 10. Who is Doing This? Not just Craig. Dan Cederholm@simplebits Andy Clarke@malarkey Meagan Fisher@owltastic More and more of us 11. Design Thinking in CSS Play and experiment CSS becomes your new tool palate Work out parts of your design in PSSpeak CSS natively 12. Dont Design theImpossible!Easy in Photoshop != Easy in CSS 13. Dont Design theImpossible!Hard in Photoshop might = Easy in CSS 14. Markup AsksQuestionsThat Photoshop Does Not What to do if this headline wraps? Have you designed for all possible listtypes? Tables? Form elements? Fluid layouts Responsive design 15. The Coding Designers Survival KitThe Anti-GUI A starter set of code and design tools All bundled up and ready to rock 16. The Coding Designers Survival Kit Whats included? HTML5 Boilerplate Elements and pages to design for Modernizr & Selectivizr Lettering.js and other js tools Sass / Compass mixins galore 17. The Coding Designers Survival Kit Whats required? Stu you need to install Sass, Compass Susy, Other Compass Plugins Livereload for auto-refreshing browsers 18. BC Before CodingBest to use as simple a tool as you can,until you need more power. 19. HTML 20. Modular HTML 21. HTML5 Elements 22. HTML UI Patterns 23. Javascript jQuery UI Modernizr Selectivizr Formalize Respond.js 24. Javascript Dynamic Carousel Lettering.js FitText Geared Scrolling more all the time 25. CSS:Sass & Compass 26. Sass Adds more power to the process ofwriting CSS Variables, Mixins, Selector Nesting 27. Sass Two Syntaxes SCSS: looks like CSSYoull be comfortable. Sass: clean and terseYoull be faster. 28. Sass 29. Sass 30. Sass $variables +mixins math & color conditionals @media 31. Sass @media CREATE AN EXAMPLE HERE 32. Compass Stylesheet framework built around Sass Built-in mixins for CSS3and common tasks like list formatting Use frameworks like Susy, Blueprint, and960 semantically Add your own framework 33. Compass CSS3 34. Compass CSS3 35. Sprite Generation Typography Text Replacement Trig (what?!) 36. Compass Zen Theme Fancy Buttons & Sassy Buttonsmakes pretty buttons Sassafrascolor schemes 37. Kit CSS: Step-by-Step First, Do no harm. Add functionality,not CSS you dont need. Considered defaults Flavors 38. Kit Flavors: Basic 39. Kit Flavors:Naked 40. Kit Flavors: Style Tile 41. Kit Flavors: Style Tile 42. Podcast 43. Drupal Theme In active development Focus is on CSS Modules can handle the JS 44. The Coding Designers Survival Kit The Kit & Podcast:theCodingDesigner.comThe 45. Resources 1HARDBOILEDWEB DESIGNBY ANDY CLARKEHardboiled Web Design 46. ResourcesCSS3 for Web Designers 47. ResourcesResponsive Web Design 48. 49. Get in Touch Mason Wendell twitter/d.o/github/irc: