1. Doing More with Less for CSS Todd Anglin Telerik anglin@telerik.com

2. Doing More with LESS for CSS @toddanglin | Telerik

3. Doing More with LESS for CSS T: @toddanglin | E: anglin@telerik.com

4. @toddanglin VP HTML5 Web & Mobile Tools, Telerik

5. Introductions Todd Anglin VP HTML5 Web & Mobile Tools, Telerik Microsoft MVP ASP Insider President NHDNUG & O’Reilly Author @toddanglin kendoui.com/blogs

6. Texas

7. 6105 miles [9824 km]

8. What will we cover? CSS Basics CSS3 Intro Basics of LESS LESS in ASP.NET

9. why do we need CSS?

10. [before CSS] … Hello World! I’m green! I think. Lorem ipsum {HTML}

11. Separation of Concerns* … … Hello! Lorem ipsum … structure body { color:#FFF; } header { margin:5px; } article { margin:5px 0; padding: 10px; background: #333; } style {HTML} {CSS}

12. CSS Zen Garden

13. what is the key CSS challenge?

14. Browser Interoperability Browsers implement CSS differently.t-button { padding: 2px 8px; } *+html.t-button { padding: 1px 8px; }.t-icon,.t-sprite,.t-editor-button.t-tool-icon { display: inline-block; *display: inline; text-indent: -9999px; } * html.t-icon,.t-sprite { text-indent: 0; } *+html.t-icon,.t-sprite { text-indent: 0; }

15. IE6 is the [CSS] devil. Microsoft agrees. ie6countdown.com

16. CSS3

17. What’s CSS3? Extensions for CSS2.1 ● Add functionality, refine definitions ModuleStatus AnimationsWD 2D/3D TransformationsWD Selectors (Level 3)PR Media Queries (Level 3)CR Backgrounds & Borders (rounded corners)CR Text (text shadows, outline)WD CSS 2.1LC WDLCCRPRREC

18. Browser Prefixes 15

19. -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 2px 2px 2px #333; -webkit-box-shadow: 2px 2px 2px #333; box-shadow: 2px 2px 2px #333; -webkit-background-size: 137px 50px; -o-background-size: 137px 50px; background-size: 137px 50px;

20. CSS3 IN ACTION DEMO

21. wouldn’t it be nice if CSS…

22. Made it easier to target different browsers Supported global variables Made it easier to do DRY CSS Simplified complicated style hierarchies

23. LESS for CSS Use LESS to write less CSS ● Variables, operations, mix-ins, nested rules LESS is CSS lesscss.org

24. What LESS does NOT do Does not… 1. Add CSS support to browsers 2. Detect CSS support in browsers 3. Save you from writing bad CSS 4. Add runtime overhead*

25. Variables Reusable values ● Can only be defined once @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } #header { color: #6c94be; } LESS Output CSS

26. Operations In-line CSS operations ● Any number, color, or variable @base: 5%; @filler: @base * 2; @other: @base + @filler; @base-color: #C9C9C9;.rule{ color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; }.rule { color: #222222; background-color: #dadada; height: 60%; } LESS Output CSS

27. Mix-ins Encapsulated CSS rule sets ● Reusable ● Can accept parameters /*LESS Mix-in*/.border-radius (@radius) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header {.border-radius(4px); } #header { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } LESS Output CSS

28. Pattern Matches & Guards More logic processing for mix-ins ● Create conditional mix-ins Patterns match on values Guards match on expressions /*LESS Mix-in*/.textcolor (light, @color) { color: lighten(@color, 10%); background: black; }.textcolor (dark, @color) { color: darken(@color, 10%); background: white; } #header {.textcolor(light, #ddd); } #header { color: #f7f7f7; background: black; } LESS Output CSS

29. Nested Rules Simplifies complicated CSS rule naming ● Useable for CSS namespaces, too #header { color: black;.navigation { font-size: 12px; }.logo { width: 300px; &:hover { text-decoration: none } } #header { color: black; } #header.navigation { font-size: 12px; } #header.logo { width: 300px; } #header.logo:hover { text-decoration: none; } LESS Output CSS

30. Different Ways to Use LESS 1.Dynamic parsing client-side 2.Dynamic parsing server-side 1. ASP.NET Handler 3.Design-time/Building-time parsing 1. Chirpy for VS

31. Design Time Run Time Fastest performance Easy to deploy Review CSS results No runtime parsing Easy Maintenance Quick getting started Deploy LESS

32. Can you do more with LESS?

33. Thank you! @toddanglin www.lesscssismore.com Todd Anglin | Telerik

34. Your Feedback is Important Please fill out a session evaluation form drop it off at the conference registration desk. Thank you! @toddanglin telerikwatch.com anglin@telerik.com

35. Resources For additional help with the LESS syntax, vist: http://lesscss.orghttp://lesscss.org