Recommended
Recommended
More Related Content
More from chriseppstein
More from chriseppstein (9)
Recently uploaded
Recently uploaded (20)
Unobtrusive Stylesheets
- 1. Thursday, March 19, 2009
- 2. Building Unobtrusive Stylesheets with Sass & Compass For faster development and easier maintenance Thursday, March 19, 2009
- 3. Chris Eppstein Web UI Architect for 7 years Software Architect for Caring.com for the last 2 years Member of the Sass core team Creator of Compass, the first Sass framework Thursday, March 19, 2009
- 4. Assumptions You know HTML You know CSS You don’t look forward to the design phase You’re tired of reinventing the wheel when you design Thursday, March 19, 2009
- 5. What is an Unobtrusive Stylesheet? Makes no requirements on content Only affects targeted content Thursday, March 19, 2009
- 6. Why build Unobtrusive Stylesheets? Initial implementation is faster Changing design is faster More flexibility for theming and alternate stylesheets Redesigns made easier Better SEO Thursday, March 19, 2009
- 7. Being Unobtrusive with CSS is Hard You need better tools Thursday, March 19, 2009
- 8. Unobtrusive Footer without Sass & Compass Thursday, March 19, 2009
- 9. Unobtrusive Footer with Sass & Compass Thursday, March 19, 2009
- 10. Unobtrusive Homepage without Sass & Compass Thursday, March 19, 2009
- 11. Unobtrusive Homepage with Sass & Compass Thursday, March 19, 2009
- 12. Case Study: Caring.com Entire UI Redesign took the team two weeks Front-end development times down by ~40% Thursday, March 19, 2009
- 13. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
- 14. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
- 15. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
- 16. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
- 17. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
- 18. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
- 19. Sass Is Whitespace Aware Indented selectors are descendant selectors Not DRY DRY Thursday, March 19, 2009
- 20. Sass is Good at Permutation DRY Not DRY Thursday, March 19, 2009
- 21. More Sass Syntax Thursday, March 19, 2009
- 22. More Sass Syntax Variables Thursday, March 19, 2009
- 23. More Sass Syntax Variables Thursday, March 19, 2009
- 24. More Sass Syntax Attribute Namespaces Thursday, March 19, 2009
- 25. More Sass Syntax Attribute Namespaces Thursday, March 19, 2009
- 26. More Sass Syntax Mixins Thursday, March 19, 2009
- 27. More Sass Syntax Mixins Thursday, March 19, 2009
- 28. More Sass Syntax Parent References Thursday, March 19, 2009
- 29. More Sass Syntax Parent References Thursday, March 19, 2009
- 30. More Sass Syntax Expressions Thursday, March 19, 2009
- 31. More Sass Syntax Expressions Thursday, March 19, 2009
- 32. More Sass Syntax Other Benefits of Compilation: Environment-dependent output SassScript formats Partials & imports Silent comments Thursday, March 19, 2009
- 33. There’s No Excuse Now Go forth and scope to your heart’s content Thursday, March 19, 2009
- 34. A Cute Little Trick Ever notice how Haml looks like CSS? Selectors Delete Write Haml ready to some stuff style Via: Lachlan Hardy Thursday, March 19, 2009
- 35. CSS Lacks Abstraction Classes are not for Style Reuse Thursday, March 19, 2009
- 36. You’ve been picking the lesser of two evils, right? Copy & Paste Presentational Class Names Thursday, March 19, 2009
- 37. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
- 38. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
- 39. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
- 40. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
- 41. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
- 42. Sass Mixins are CSS Macros When you need to apply the same styles to different selectors Thursday, March 19, 2009
- 43. Sass Script is Turing Complete Credit: Nathan Weizenbaum Thursday, March 19, 2009
- 44. Sass Script is Turing Complete Credit: Nathan Weizenbaum Thursday, March 19, 2009
- 45. The Only Limitation is Your Imagination and CSS... Thursday, March 19, 2009
- 46. Sass is a Language Compass is an Ecosystem Thursday, March 19, 2009
- 47. Compass Makes Frameworks Work Thursday, March 19, 2009
- 48. Building Web UIs Can Be Fun Again! Thursday, March 19, 2009
- 49. Compass Provides Built-in framework ports: Blueprint, YUI Installable plugins: 960.gs Core library Reset Sass compilation for stand-alone projects Application framework integration Thursday, March 19, 2009
- 50. Add Compass to your Rails Application Sass has Merb/Rails integration that automatically recompiles stylesheets. Thursday, March 19, 2009
- 51. Where’s the Sass? Compass stores its sass files in its gem Easy upgrades rake gems:unpack GEM=chriseppstein-compass Thursday, March 19, 2009
- 52. Compass’s Blueprint Port contains a Layout DSL Configuration Parameters +container +column(n,last) !blueprint_grid_columns +last !blueprint_grid_width +append(n) !blueprint_grid_margin +prepend(n) Oh and it does some basic +push(n) styling for you if you want that. +pull(n) +blueprint-typography +blueprint-form Thursday, March 19, 2009
- 53. Thursday, March 19, 2009
- 54. Compass’s YUI Port is Configurable & Semantic YUI uses class descendants to layout grid blocks -- this makes it more complex to abstract and use than Blueprint Compass lets you configure the sizes, class names, selectors, and IDs Sophisticated Font System (%-based specified in px) Source-order independent, Zoom friendly grids +font-size(size, base_size) +yui-base +yui-document(width) And much, much more... Thursday, March 19, 2009
- 55. Thursday, March 19, 2009
- 56. Compass Makes Frameworks à la Carte At Caring.com we use Blueprint’s grids, Compass’s reset, YUI’s Base and Font system Thursday, March 19, 2009
- 57. Compass Core Library CSS Reset Link styling Sticky Footer List Styling (bullets, orientation) Clearfix Table styling Tag Cloud (background colors, borders) Cross-browser inline- block Text Replacement Thursday, March 19, 2009
- 58. Thursday, March 19, 2009
- 59. Real World Rails Example http://compass-style.org/ Code at: http://github.com/chriseppstein/compass-style.org Thursday, March 19, 2009
- 60. The Future of Compass & Sass Haml & Sass 2.2, Compass: Compass 1.0 stable Page Scaffolds (script/generate releases are imminent scaffold should be pretty!) Design Sharing Sass: Cultivate Plugin Ecosystem Stylesheet Optimizer Registry Multiple styles rules per line Installer New output formats Other CSS Frameworks Localized Imports Thursday, March 19, 2009
- 61. Open Sourced On Github • This slide deck and related code: http://github.com/chriseppstein/presentations • Sass is part of Haml: http://github.com/nex3/haml • Compass: http://github.com/chriseppstein/compass Thursday, March 19, 2009
- 62. ? Q&A Thursday, March 19, 2009
Editor's Notes
- Compass has been under active development for 9 months now and has an active following.
- CSS Features that you should know: Especially Descendent, Tag, Class, & ID Selectors You want Re-use, Abstraction, Libraries, Computation, etc. for your stylesheets.
- A designer should be able to style a well thought out page with little to no changes to the markup New markup should have only base styles applied to it until the designer begins work.
- *Initial implementation is faster because it is faster to build than debug. *Changing design is faster becase you don’t have to worry about what your change will affect, you can read your stylesheet and know because there’s no dependency inversion.
- CSS3: Variables, Better layout, Smarter Selectors HTML5: Scoped Stylesheets
- Repeat: Classes are not for style reuse
- Sass has all the necessary prerequisites to enable sharing styles/design.