Downloaded 109 times
![[before CSS]{HTML}<html> <head>…</head> <body> <table> <tr><td> <font size=“3” color=“red”> <h1>Hello World!</h1> </font> </td></tr> <font color=“green”> <font face=“Tahoma”> <h2>I’m green! I think.</h2> </font> <p>Loremipsum</p> </font> </table> </body></html>](https://image.slidesharecdn.com/anglinaspacs302doing-more-with-less-for-css-110405011006-phpapp02/85/Doing-More-with-LESS-for-CSS-5-320.jpg)
![IE6 is the [CSS] devil.Microsoft agrees.ie6countdown.com](https://image.slidesharecdn.com/anglinaspacs302doing-more-with-less-for-css-110405011006-phpapp02/85/Doing-More-with-LESS-for-CSS-10-320.jpg)
![[before CSS]{HTML}<html> <head>…</head> <body> <table> <tr><td> <font size=“3” color=“red”> <h1>Hello World!</h1> </font> </td></tr> <font color=“green”> <font face=“Tahoma”> <h2>I’m green! I think.</h2> </font> <p>Loremipsum</p> </font> </table> </body></html>](https://image.slidesharecdn.com/anglinaspacs302doing-more-with-less-for-css-110405011006-phpapp02/75/Doing-More-with-LESS-for-CSS-5-2048.jpg)
![IE6 is the [CSS] devil.Microsoft agrees.ie6countdown.com](https://image.slidesharecdn.com/anglinaspacs302doing-more-with-less-for-css-110405011006-phpapp02/75/Doing-More-with-LESS-for-CSS-10-2048.jpg)
Uploaded byTodd Anglin
Doing More with LESS for CSS
The document discusses the importance and benefits of using CSS, particularly in improving code organization through separation of concerns. It highlights challenges like browser interoperability and introduces CSS3 extensions as well as the LESS CSS preprocessor, which simplifies writing CSS via features like variables, mix-ins, and nested rules. The session encourages attendees to provide feedback and emphasizes the capability of doing more with less in styling web pages.
More Related Content
Similar to Doing More with LESS for CSS
Doing More with LESS for CSS
- 1. Doing More withLESSfor CSST: @toddanglin | E: anglin@telerik.com
- 2. IntroductionsTodd AnglinChief Evangelist,TelerikMicrosoft MVPASP InsiderPresident NHDNUG & O’Reilly AuthorTelerikWatch.com@toddanglin
- 3. What will wecover?
- 4. why do weneed CSS?
- 5. [before CSS]{HTML}<html> <head>…</head> <body> <table> <tr><td> <font size=“3” color=“red”> <h1>Hello World!</h1> </font> </td></tr> <font color=“green”> <font face=“Tahoma”> <h2>I’m green! I think.</h2> </font> <p>Loremipsum</p> </font> </table> </body></html>
- 6. Separation of Concerns*{CSS}{HTML}<html> <head>…</head> <body> <header>…</header> <article> <h1>Hello!</h1> <p>Loremipsum</p> </article> <nav>…</nav> <footer>…</footer> </body></html>body { color:#FFF; }header { margin:5px; }article { margin:5px 0; padding: 10px; background: #333;}stylestructure
- 7.
- 8. what is thekey CSS challenge?
- 9. Browser InteroperabilityBrowsers implementCSS 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; }
- 10. IE6 is the[CSS] devil.Microsoft agrees.ie6countdown.com
- 11.
- 12. What’s CSS3?Extensions forCSS2.1Add functionality, refine definitions
- 13.
- 14. -moz-border-radius: 5px 5px5px5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 2px 2px2px #333;-webkit-box-shadow: 2px 2px2px #333;box-shadow: 2px 2px2px #333;-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;
- 15.
- 16. wouldn’t it benice if CSS…
- 17. Made it easierto target different browsersSupported global variablesMade it easier to do DRY CSSSimplified complicated style hierarchies
- 18. LESS for CSSUseLESS to write less CSSVariables, operations, mix-ins, nested ruleslesscss.orgLESS is CSS
- 19. What LESS doesNOT doDoes not…Add CSS support to browsersDetect CSS support in browsersSave you from writing bad CSSAdd runtime overhead*
- 20. VariablesReusable valuesCan onlybe defined onceOutput CSSLESS@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }#header { color: #6c94be; }
- 21. OperationsIn-line CSS operationsAnynumber, color, or variableOutput CSSLESS@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%;}
- 22. Mix-insEncapsulated CSS rulesetsReusableCan accept parametersOutput CSSLESS/*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;}
- 23. Nested RulesSimplifies complicatedCSS rule namingOutput CSSLESS#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;}
- 24. Different Ways toUse LESSDynamic parsing client-sideDynamic parsing server-sideASP.NET HandlerDesign-time/Building-time parsingChirpy for VS<link rel="stylesheet/less" href="style.less" type="text/css" /><script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
- 26. Can you domore with LESS?
- 27. Your Feedback isImportantPlease fill out a session evaluation form drop it off at the conference registration desk.Thank you!telerikwatch.com@toddanglinanglin@telerik.com
Editor's Notes
- #5 Wrong answers: -developer job security-make designers feel like programmers
- #6 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)
- #7 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
- #8 http://dzineblog.com/2008/07/20-cool-css-zen-garden-designs.htmlCSS Zen Garden – Example of the flexibility CSS provideshttp://www.csszengarden.com
- #10 Key offendersSupporting different versionsIE6 is the devilExamples of needed hacks and workaroundshttp://www.webdevout.net/css-hacks
- #11 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.
- #13 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
- #14 -Show example of browser prefixes in actionhttp://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
- #19 Great tutorial:http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3LESS site: http://lesscss.org/Logo from http://lesscss.org/
- #20 *Depends on how you deploy LESS – runtime conversions of LESS to CSS can have some impact; build-time conversions do not.
- #25 JavaScript preprocessorASP.NET Handler - http://www.4guysfromrolla.com/articles/030310-1.aspxVisual Studio tooling – Chirpy - http://chirpy.codeplex.com/
- #26 -The pros and cons of using runtime vs. design time LESS to CSS parsing