CSS is an amazing language that keeps evolving and incorporating more and more awesome features; however, utilizing LESS will extend CSS with dynamic behavior like variables, mixins, operations and functions thus adding even more *awesomeness* to this language and smoothing out your workflow. This presentation will take you through utilizing web frameworks like Bootstrap, Boilerplate in your development process and dig into some advanced CSS usage via LESS. In brief, I'll show you why you should be using LESS in your current & future projects, an overview of it's features, make you a pro and show you how to use it with other frameworks.

1. LESS
  

2. Semantics,
LESS & Sarcasm
 :
  |   
VINCENT BASKERVILLE | VP of PRODUCT

3. wtf
is less?
VINCENT BASKERVILLE | VP of PRODUCT

4. less [less]
noun
1. stylesheet language that extends CSS with
dynamic behavior.
2. pure awesomeness.
VINCENT BASKERVILLE | VP of PRODUCT

5. VINCENT BASKERVILLE | VP of PRODUCT

6. css still right?
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
VINCENT BASKERVILLE | VP of PRODUCT

7. se•man•tic [si-man-tik]
adjective
1. of, pertaining to, or arising from the different
meanings of words or other symbols: semantic
change; semantic confusion.
2. of or pertaining to semantics.
VINCENT BASKERVILLE | VP of PRODUCT

8. div+id/class = no semantic value HTML5 tags = rich semantic value
VINCENT BASKERVILLE | VP of PRODUCT

9. the div ! span elements, in conjunction
with the id ! class attributes, offer a
generic structure to documents. they
define content to be inline or block"
level but impose no other
presentational idioms on the content.
3WORLD WIDE WEB CONSORTIUM
VINCENT BASKERVILLE | VP of PRODUCT

10. why you
should be
using less
VINCENT BASKERVILLE | VP of PRODUCT

11.  
 
•    
 
•  

•     
• 
 
VINCENT BASKERVILLE | VP of PRODUCT

12.  
 
•    
 
•   

•    

VINCENT BASKERVILLE | VP of PRODUCT

13. browser prefixes
.round_corners (@radius: 20px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
VINCENT BASKERVILLE | VP of PRODUCT

14.  
 
•  -
•
• 
• 
VINCENT BASKERVILLE | VP of PRODUCT

15. what’s
inside
VINCENT BASKERVILLE | VP of PRODUCT

16. Variables
// LESS /* Compiled CSS */
@color: #4D926F; #header {
color: #4D926F;
#header { }
color: @color; h2 {
} color: #4D926F;
h2 { }
color: @color;
}
VINCENT BASKERVILLE | VP of PRODUCT

17. mixins
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
#menu a {
}
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
+ = }
.post a {
color: red;
#menu a {
border-top: dotted 1px black;
color: #111;
border-bottom: solid 2px black;
.bordered;
}
}
.post a {
color: red;
.bordered;
}
VINCENT BASKERVILLE | VP of PRODUCT

18. nesting
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover {
text-decoration: none
}
}
} //#header
VINCENT BASKERVILLE | VP of PRODUCT

19. @arguments
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
.box-shadow {
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
}
VINCENT BASKERVILLE | VP of PRODUCT

20. operations
#page_title {
font-size: @headerSize * .5;
}
.logo {
width: @full_page / 2;
}
} //#page_title
VINCENT BASKERVILLE | VP of PRODUCT

21. eff sass &
haml
VINCENT BASKERVILLE | VP of PRODUCT

22. Sass, SCSS (sassy CSS) Haml
Haml takes your gross, ugly templates and
replaces them with veritable Haiku
VINCENT BASKERVILLE | VP of PRODUCT

23. Sass HAML
VINCENT BASKERVILLE | VP of PRODUCT

24. Just say no
VINCENT BASKERVILLE | VP of PRODUCT

25. why use
frameworks
VINCENT BASKERVILLE | VP of PRODUCT

26. 
✓ 
✓ 
✓ 
✓  
✓ 
VINCENT BASKERVILLE | VP of PRODUCT

27. 
- 
- 
- 
- 
- 
VINCENT BASKERVILLE | VP of PRODUCT

28. VINCENT BASKERVILLE | VP of PRODUCT

29. VINCENT BASKERVILLE | VP of PRODUCT

30. code
demo
VINCENT BASKERVILLE | VP of PRODUCT

31. resources
VINCENT BASKERVILLE | VP of PRODUCT

32. http://lesscss.org
http://incident57.com/less
http://www.initializr.com
- http://html5boilerplate.com
- http://twitter.github.com/bootstrap
VINCENT BASKERVILLE | VP OF PRODUCTION

33. oh yeah... sooo Scss *may* be
better than less now.
But Haml will forever suck.
STAY
CLASSY
VINCENT BASKERVILLE | VP of PRODUCT

34. AU REVOIR
VINCE BASKERVILLE
@WHOISVINCE
VINCE@TRIPLINGO.COM

35. Designing
Happiness
the book
http://kck.st/happyux
VINCENT BASKERVILLE | VP of PRODUCT