Doing More with LESS for CSS

6,509 views

Published on

As CSS3 adds support for rich styling in standards-based web applications, style sheet markup can quickly get out of control! Many CSS effects today require repetitive rules to cover the proprietary browser CSS prefixes. LESS for CSS is an open source framework that makes modern CSS more manageable. With support for variables, mix-ins, nested CSS rules, and operations, LESS finally makes complex CSS easy to maintain. In this session, you will discover how LESS can be easily adopted in any ASP.NET project and learn about tools that make it easy to work with LESS in Visual Studio 2010.

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

No Downloads
Views
Total views
6,509
On SlideShare
0
From Embeds
0
Number of Embeds
1,623
Actions
Shares
0
Downloads
102
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Wrong answers: -developer job security-make designers feel like programmers
  • Before CSS:Styles were mixed with HTML tags (difficult to update, difficult to read)Layout was defined with HTML tags (poor semantic use of tags)
  • CSS exists to separate styling and layout decisions from structural meaning of underlying document*Separation of concerns to a degreeCSS rules often tend to create dependencies on HTMLOther benefits of CSS:Performance (caching of CSS rules)Semantic HTML
  • http://dzineblog.com/2008/07/20-cool-css-zen-garden-designs.htmlCSS Zen Garden – Example of the flexibility CSS provideshttp://www.csszengarden.com
  • Key offendersSupporting different versionsIE6 is the devilExamples of needed hacks and workaroundshttp://www.webdevout.net/css-hacks
  • IE6 is the devil – It is the source of many CSS myths, fears, and painful truths.Microsoft is actively trying to help end the IE6 era – goal: less than 1% usage worldwide.
  • New CSS3 featuresCSS3 principlesShow example of CSS3 in actionhttp://www.w3.org/Style/CSS/current-workhttp://www.w3.org/TR/2010/WD-css-2010-20101202/#css3
  • -Show example of browser prefixes in actionhttp://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
  • Great tutorial:http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3LESS site: http://lesscss.org/Logo from http://lesscss.org/
  • *Depends on how you deploy LESS – runtime conversions of LESS to CSS can have some impact; build-time conversions do not.
  • JavaScript preprocessorASP.NET Handler - http://www.4guysfromrolla.com/articles/030310-1.aspxVisual Studio tooling – Chirpy - http://chirpy.codeplex.com/
  • -The pros and cons of using runtime vs. design time LESS to CSS parsing
  • Doing More with LESS for CSS

    1. 1. Doing More with LESSfor CSS<br />T: @toddanglin | E: anglin@telerik.com<br />
    2. 2. Introductions<br />Todd Anglin<br />Chief Evangelist, Telerik<br />Microsoft MVP<br />ASP Insider<br />President NHDNUG & O’Reilly Author<br />TelerikWatch.com<br />@toddanglin<br />
    3. 3. What will we cover?<br />
    4. 4. why do we need CSS?<br />
    5. 5. [before CSS]<br />{HTML}<br /><html><br /> <head>…</head><br /> <body><br /> <table><br /> <tr><td><br /> <font size=“3” color=“red”><br /> <h1>Hello World!</h1><br /> </font><br /> </td></tr><br /> <font color=“green”><br /> <font face=“Tahoma”><br /> <h2>I’m green! I think.</h2><br /> </font><br /> <p>Loremipsum</p><br /> </font><br /> </table><br /> </body><br /></html><br />
    6. 6. Separation of Concerns*<br />{CSS}<br />{HTML}<br /><html><br /> <head>…</head><br /> <body><br /> <header>…</header><br /> <article><br /> <h1>Hello!</h1><br /> <p>Loremipsum</p><br /> </article><br /> <nav>…</nav><br /> <footer>…</footer><br /> </body><br /></html><br />body { color:#FFF; }<br />header { margin:5px; }<br />article {<br /> margin:5px 0;<br /> padding: 10px;<br /> background: #333;<br />}<br />style<br />structure<br />
    7. 7. CSS<br />Zen<br />Garden<br />
    8. 8. what is the key CSS challenge?<br />
    9. 9. Browser Interoperability<br />Browsers implement CSS differently<br />.t-button { padding: 2px 8px; }<br />*+html .t-button { padding: 1px 8px; }<br />.t-icon, .t-sprite, .t-editor-button .t-tool-icon<br />{<br /> display: inline-block;<br />*display: inline;<br /> text-indent: -9999px;<br />}<br />* html .t-icon, .t-sprite { text-indent: 0; }<br />*+html .t-icon, .t-sprite { text-indent: 0; }<br />
    10. 10. IE6 is the [CSS] devil.<br />Microsoft agrees.<br />ie6countdown.com<br />
    11. 11. CSS3<br />
    12. 12. What’s CSS3?<br />Extensions for CSS2.1<br />Add functionality, refine definitions<br />
    13. 13. Browser Prefixes<br />15<br />
    14. 14. -moz-border-radius: 5px 5px5px5px; <br />-webkit-border-radius: 5px;<br />border-radius: 5px;<br />-moz-box-shadow: 2px 2px2px #333;<br />-webkit-box-shadow: 2px 2px2px #333;<br />box-shadow: 2px 2px2px #333;<br />-webkit-background-size: 137px 50px;<br />-o-background-size: 137px 50px;<br />background-size: 137px 50px;<br />
    15. 15. CSS3 IN ACTION <br />DEMO<br />
    16. 16. wouldn’t it be nice if CSS…<br />
    17. 17. Made it easier to target different browsers<br />Supported global variables<br />Made it easier to do DRY CSS<br />Simplified complicated style hierarchies<br />
    18. 18. LESS for CSS<br />Use LESS to write less CSS<br />Variables, operations, mix-ins, nested rules<br />lesscss.org<br />LESS is CSS<br />
    19. 19. What LESS does NOT do<br />Does not…<br />Add CSS support to browsers<br />Detect CSS support in browsers<br />Save you from writing bad CSS<br />Add runtime overhead*<br />
    20. 20. Variables<br />Reusable values<br />Can only be defined once<br />Output CSS<br />LESS<br />@nice-blue: #5B83AD;<br />@light-blue: @nice-blue + #111;<br />#header { color: @light-blue; }<br />#header { color: #6c94be; }<br />
    21. 21. Operations<br />In-line CSS operations<br />Any number, color, or variable<br />Output CSS<br />LESS<br />@base: 5%;<br />@filler: @base * 2;<br />@other: @base + @filler;<br />@base-color: #C9C9C9;<br />.rule{<br />color: #888 / 4;<br />background-color: @base-color + #111;<br />height: 100% / 2 + @filler;<br />}<br />.rule { <br />color: #222222; <br />background-color: #dadada; <br />height: 60%;<br />}<br />
    22. 22. Mix-ins<br />Encapsulated CSS rule sets<br />Reusable<br />Can accept parameters<br />Output CSS<br />LESS<br />/*LESS Mix-in*/<br />.border-radius (@radius) {<br /> -moz-border-radius: @radius;<br /> -webkit-border-radius: @radius;<br /> border-radius: @radius;<br />}<br />#header {<br />.border-radius(4px);<br />}<br />#header {<br /> -moz-border-radius: 4px;<br /> -webkit-border-radius: 4px;<br /> border-radius: 4px;<br />}<br />
    23. 23. Nested Rules<br />Simplifies complicated CSS rule naming<br />Output CSS<br />LESS<br />#header {<br /> color: black;<br /> .navigation {<br /> font-size: 12px;<br />}<br /> .logo {<br /> width: 300px;<br /> &:hover { text-decoration: none }<br /> }<br />}<br />#header { color: black; }<br />#header .navigation {<br /> font-size: 12px;<br />}<br />#header .logo { <br /> width: 300px; <br />}<br />#header .logo:hover{<br /> text-decoration: none;<br />}<br />
    24. 24. Different Ways to Use LESS<br />Dynamic parsing client-side<br />Dynamic parsing server-side<br />ASP.NET Handler<br />Design-time/Building-time parsing<br />Chirpy for VS<br /><link rel="stylesheet/less" href="style.less" type="text/css" /><br /><script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script><br />
    25. 25.
    26. 26. Can you do more with LESS?<br />
    27. 27. Your Feedback is Important<br />Please fill out a session evaluation form drop it off at the conference registration desk.<br />Thank you!<br />telerikwatch.com<br />@toddanglin<br />anglin@telerik.com<br />

    ×