Your SlideShare is downloading. ×
0
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Unobtrusive CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Unobtrusive CSS

4,913

Published on


To quote Eric Meyer, "Semantic Frameworks are a game-changer." Meta CSS frameworks like SASS, lessCSS, and xCSS are revolutionizing the way we write and manage modern, semantic CSS. With features such as variables, mixins, nested rules and operations, these meta frameworks brings us closer to writing our CSS in an unobtrusive way. They incorporate CSS frameworks such as Blueprint, Grid960, and YUI and bring together the best of grid design, CSS reset techniques and browser hacks in an unobtrusive and semantic way. Ultimately, these meta frameworks allow us to develop truly semantic websites that are not only maintainable and fun to develop. This talk with discuss CSS systems, meta frameworks, and best practices for writing unobtrusive semantic code.

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,913
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
67
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. OBJECT-ORIENTED UNOBTRUSIVE CSS Saturday, July 17, 2010 1
  2. OBJECT-ORIENTED UNOBTRUSIVE CSS Saturday, July 17, 2010 2
  3. JOHN HWANG CEO @ MUTUALLY HUMAN Saturday, July 17, 2010 3
  4. MUTUALLY HUMAN is an expert custom software strategy & design consultancy specializing in mobile & web-based products & services. Saturday, July 17, 2010 4
  5. Saturday, July 17, 2010 5
  6. ERIC MEYER "Semantic Frameworks are a game-changer." Saturday, July 17, 2010 6
  7. RAILS 3.1 Preprocessors for JavaScript and CSS Saturday, July 17, 2010 7
  8. Saturday, July 17, 2010 8
  9. UNOBTRUSIVE CSS Saturday, July 17, 2010 9
  10. ASSUMPTIONS • Write beautiful and valid markup • Mostly Use Semantic Markup & Class/ID Names • Agree that separate of content, presentation and behavior is a Good Thing® • Appreciate Unobtrusive JavaScript • Aware of Saturday, July 17, 2010 10
  11. WHAT IS UNOBTRUSIVE CSS? • True separation of presentation and content • No presentational classes in your HTML Saturday, July 17, 2010 11
  12. THIS IS PRETTY CLEAN, BUT... Saturday, July 17, 2010 12
  13. WHY BUILD UNOBTRUSIVE STYLESHEETS? • Implementation is faster • Changing design is faster • More flexibility for theming and alternate stylesheets • Redesigns made easier • Better SEO Saturday, July 17, 2010 13
  14. UNOBTRUSIVE CSS IS HARD Saturday, July 17, 2010 14
  15. WHAT MAKES UNOBTRUSIVE HARD? The issues with current CSS techniques Saturday, July 17, 2010 15
  16. REPETITIVE SELECTORS Not DRY Saturday, July 17, 2010 16
  17. Saturday, July 17, 2010 17
  18. CSS LACKS ABSTRACTION Classes are not for style reuse Saturday, July 17, 2010 18
  19. DIFFICULT TO CONTROL LAYOUT • Grid Layouts are great, but requires a lot of careful pre- planning • Must manually calculate widths and dimensions • Internet Explorer Saturday, July 17, 2010 19
  20. EFFICIENCY/ ORGANIZATIONAL ISSUES • IE imposes a maximum limit of 31 individual stylesheets Saturday, July 17, 2010 20
  21. WHAT DOES THIS ALL MEAN? • Code Reuse is almost non-existent • Code Organization is non-existent • File size just keep getting bigger • Very difficult to create a sensible easy to understand CSS system • Difficult to maintain or change Saturday, July 17, 2010 21
  22. CSS FRAMEWORKS Blueprint CSS, 960 Grid, YUI and many more... Saturday, July 17, 2010 22
  23. CSS FRAMEWORKS GAINED SOME TRACTION • Promoted Grid Layout • Best Practices • Sensible Defaults • Reset CSS • Typography Saturday, July 17, 2010 23
  24. Saturday, July 17, 2010 24
  25. PROBLEM WITH CSS FRAMEWORKS • Nothing more than a collection of CSS snippets • Tight coupling of presentation and content • Almost as bad as using <table> for layout Saturday, July 17, 2010 25
  26. HISTORY LESSON Evolution of Programming Languages Saturday, July 17, 2010 26
  27. EVOLUTION OF PROGRAMMING LANGUAGES • Punchcards/Assembly Language • Procedural Code (C/Cobol/Fortran) • Object Oriented Code (Java/C#/C++/Ruby) • The All Compile Down to Assembly Language Saturday, July 17, 2010 27
  28. EVOLUTION OF CSS DEVELOPMENT • CSS • CSS Frameworks • Semantic/Meta Frameworks • Compiles down to CSS Saturday, July 17, 2010 28
  29. SEMANTIC/META FRAMEWORKS Saturday, July 17, 2010 29
  30. WHAT ARE CSS META FRAMEWORKS? CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax Saturday, July 17, 2010 30
  31. SASS "Syntactically Awesome Style Sheets" Saturday, July 17, 2010 31
  32. WHAT IS SASS? • Nested Rules • Variables • Mixins • Compiles & Outputs CSS • Fully CSS3-compatible (SCSS Syntax) Saturday, July 17, 2010 32
  33. CSS3 COMPATIBLE Saturday, July 17, 2010 33
  34. VARIABLES Saturday, July 17, 2010 34
  35. NESTING Saturday, July 17, 2010 35
  36. MIXIN Saturday, July 17, 2010 36
  37. SELECTOR INHERITANCE Saturday, July 17, 2010 37
  38. HOW DOES SASS MAKE UNOBTRUSIVE CSS EASY? Case Study Saturday, July 17, 2010 38
  39. STAGE 1 Saturday, July 17, 2010 39
  40. Saturday, July 17, 2010 40
  41. BETTER YET... Saturday, July 17, 2010 41
  42. Saturday, July 17, 2010 42
  43. STAGE 2 Implement new shell to house legacy content and new content Saturday, July 17, 2010 43
  44. NAMESPACE LEGACY CSS 50+ legacy css files Saturday, July 17, 2010 44
  45. NESTED RULES FTW! CSS to SASS converter script FTW! Saturday, July 17, 2010 45
  46. Saturday, July 17, 2010 46
  47. ELIMINATED ALL PRESENTATIONAL CLASSES Saturday, July 17, 2010 47
  48. Saturday, July 17, 2010 48
  49. NESTED RULES MAKES CSS MORE CONCISE Saturday, July 17, 2010 49
  50. EFFICIENCY/ORGANIZATIONAL ISSUES Imports are compiled down to 1 single CSS file Saturday, July 17, 2010 50
  51. OTHER BENEFITS OF COMPILATION • Environment-dependent output formats • Partials & imports • Silent comments • SassScript (Turing Complete) Saturday, July 17, 2010 51
  52. PROVOCATIVE STATEMENT #1 HAML feels like an unnecessary abstraction Saturday, July 17, 2010 52
  53. If you're product is 10 times better than your competitor, ship it now! Saturday, July 17, 2010 53
  54. PROVOCATIVE STATEMENT #2 HTML/CSS is Your Problem Saturday, July 17, 2010 54
  55. PROVOCATIVE STATEMENT #3 You probably don’t know CSS Saturday, July 17, 2010 55
  56. ERIC MEYER Saturday, July 17, 2010 56
  57. Q&A Saturday, July 17, 2010 57

×