doing more with less for css
DESCRIPTION
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.TRANSCRIPT
Introductions
Todd AnglinChief Evangelist, Telerik
Microsoft MVP
ASP InsiderPresident NHDNUG & O’Reilly Author
@toddanglin
TelerikWatch.com
What will we cover?
CSS Basics
CSS3 Intro
Basics of LESS
LESS in ASP.NET
why do we need CSS?
[before CSS]
<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>Lorem ipsum</p> </font> </table> </body></html>
{HTML}
Separation of Concerns*
<html> <head>…</head> <body> <header>…</header> <article> <h1>Hello!</h1> <p>Lorem ipsum</p> </article> <nav>…</nav> <footer>…</footer> </body></html>
structure
body { color:#FFF; }
header { margin:5px; }
article { margin:5px 0; padding: 10px; background: #333;}
style
{HTML} {CSS}
CSSZen
Garden
what is the key CSS challenge?
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; }
IE6 is the [CSS] devil.Microsoft agrees.
ie6countdown.com
CSS3
What’s CSS3?
• Extensions for CSS2.1● Add functionality, refine definitions
Module Status
Animations WD
2D/3D Transformations WD
Selectors (Level 3) PR
Media Queries (Level 3) CR
Backgrounds & Borders (rounded corners) CR
Text (text shadows, outline) WD
CSS 2.1 LC
WD LC CR PR REC
Browser Prefixes
prefix organization
-ms-, mso- Microsoft
-moz- Mozilla
-o-, -xv- Opera Software
-atsc- Advanced Television Standards Committee
-wap- The WAP Forum
-khtml- KDE
-webkit- Apple
prince- YesLogic
-ah- Antenna House
-hp- Hewlett Packard
-ro- Real Objects
-rim- Research In Motion
-tc- Tall Components
15
-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;
CSS3 IN ACTIONDEMO
wouldn’t it be nice if CSS…
• Made it easier to target different browsers• Supported global variables• Made it easier to do DRY CSS• Simplified complicated style hierarchies
LESS for CSS• Use LESS to write less CSS
● Variables, operations, mix-ins, nested rules
LESS is CSS
lesscss.org
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*
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
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
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
Nested Rules
• Simplifies complicated CSS rule naming
#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
Different Ways to Use LESS
1. Dynamic parsing client-side
2. Dynamic parsing server-side1. ASP.NET Handler
3. Design-time/Building-time parsing1. Chirpy 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>
Design Time Run Time
Fastest performance
Easy to deploy
Review CSS results
No runtime parsing
Easy Maintenance
Quick getting started
Deploy LESS
Can you do more with LESS?
Your Feedback is Important
Please fill out a session evaluation form drop it off at the conference registration
desk.
Thank you!
@toddanglin
telerikwatch.com
