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.
Doing More with LESSfor CSS<br />T: @toddanglin | E: anglin@telerik.com<br />
Introductions<br />Todd Anglin<br />Chief Evangelist, Telerik<br />Microsoft MVP<br />ASP Insider<br />President NHDNUG & ...
What will we cover?<br />
why do we need CSS?<br />
[before CSS]<br />{HTML}<br /><html><br />  <head>…</head><br />   <body><br />      <table><br />     <tr><td><br />     ...
Separation of Concerns*<br />{CSS}<br />{HTML}<br /><html><br />  <head>…</head><br />   <body><br />     <header>…</heade...
CSS<br />Zen<br />Garden<br />
what is the key CSS challenge?<br />
Browser Interoperability<br />Browsers implement CSS differently<br />.t-button { padding: 2px 8px; }<br />*+html .t-butto...
IE6 is the [CSS] devil.<br />Microsoft agrees.<br />ie6countdown.com<br />
CSS3<br />
What’s CSS3?<br />Extensions for CSS2.1<br />Add functionality, refine definitions<br />
Browser Prefixes<br />15<br />
-moz-border-radius: 5px 5px5px5px; <br />-webkit-border-radius: 5px;<br />border-radius: 5px;<br />-moz-box-shadow: 2px 2p...
CSS3 IN ACTION	<br />DEMO<br />
wouldn’t it be nice if CSS…<br />
Made it easier to target different browsers<br />Supported global variables<br />Made it easier to do DRY CSS<br />Simplif...
LESS for CSS<br />Use LESS to write less CSS<br />Variables, operations, mix-ins, nested rules<br />lesscss.org<br />LESS ...
What LESS does NOT do<br />Does not…<br />Add CSS support to browsers<br />Detect CSS support in browsers<br />Save you fr...
Variables<br />Reusable values<br />Can only be defined once<br />Output CSS<br />LESS<br />@nice-blue: #5B83AD;<br />@lig...
Operations<br />In-line CSS operations<br />Any number, color, or variable<br />Output CSS<br />LESS<br />@base: 5%;<br />...
Mix-ins<br />Encapsulated CSS rule sets<br />Reusable<br />Can accept parameters<br />Output CSS<br />LESS<br />/*LESS Mix...
Nested Rules<br />Simplifies complicated CSS rule naming<br />Output CSS<br />LESS<br />#header {<br />  color: black;<br ...
Different Ways to Use LESS<br />Dynamic parsing client-side<br />Dynamic parsing server-side<br />ASP.NET Handler<br />Des...
Can you do more with LESS?<br />
Your Feedback is Important<br />Please fill out a session evaluation form drop it off at the conference registration desk....
Doing More with LESS for CSS
Upcoming SlideShare
Loading in …5
×

Doing More with LESS for CSS

6,772 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
  • Be the first to comment

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

×