Styling frameworks v2

421 views
373 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
421
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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. }

    ×