Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Styling frameworks v2

458 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Styling frameworks v2

  1. 1. #styling-frameworks { /* Nelson Wong */
  2. 2. .overview {• Current issues• Strategy• LESS• Bootstrap• Implementation plan• Issues
  3. 3. .current-issues {• Legacy CSS techniques• CSS3 support in browsers (prefixes)• Duplicate, redundant code (Tii, Pd)• Inconsistent styling• Unorganized code• No design pattern library
  4. 4. .strategy {• Best CSS practices• LESS• Bootstrap• Design patterns & style guide for common components
  5. 5. .tii-panel {
  6. 6. .less {• Extends CSS, compiles into CSS• Makes writing and maintaining styles a breeze• Faster development• A lot less code• Encourages structured and organized code• Easy to learn and maintain• Backwards compatible with CSS
  7. 7. .variables {
  8. 8. .mixins {
  9. 9. .nested-rules {
  10. 10. .functions.operations {
  11. 11. .now-vs-less {
  12. 12. .bootstrap {• CSS Toolkit• Customizable grid• Nice base styles• Basic javascript components (jQuery)• Written in LESS• Good documentation / style guide• http://twitter.github.com/bootstrap/
  13. 13. .implementation-plan {• FED support • Compiling of LESS • Isolate new stylesheet usage (Tii)• Develop new stylesheet • For new and existing components • Existing HTML untouched• Style guide / design pattern library
  14. 14. }

×