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.
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
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
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
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
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
