Semantics, less and sarcasm

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

Semantics,
LESS & Sarcasm
 :
  |   

VINCENT BASKERVILLE | VP of PRODUCT

wtf
is less?


less [less]
noun
1. stylesheet language that extends CSS with
dynamic behavior.

2. pure awesomeness.


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%) }
}


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.


div+id/class = no semantic value HTML5 tags = rich semantic value


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.
!WORLD WIDE WEB CONSORTIUM


why you
should be
using less

 
 
•    
 
•  

•     
• 
 


 
 
•    
 
•   

•    



browser preﬁxes
.round_corners (@radius: 20px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}


 
 
•  -
•
• 
• 


what’s
inside

Variables
// LESS /* Compiled CSS */

@color: #4D926F; #header {
color: #4D926F;
#header { }
color: @color; h2 {
} color: #4D926F;
h2 { }
color: @color;
}


.bordered {
mixins
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;

+ border-bottom: solid 2px black;

= }
.post a {
#menu a {
color: red;
color: #111;
.bordered;
border-bottom: solid 2px black;
}
}
.post a {
color: red;
.bordered;
}


nesting
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover {
text-decoration: none
}
}
} //#header


@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;
}


operations
#page_title {
font-size: @headerSize * .5;
}
.logo {
width: @full_page / 2;
}
} //#page_title


eff sass &
haml


Sass, SCSS (sassy CSS) Haml

Haml takes your gross, ugly templates and
replaces them with veritable Haiku


Sass HAML


Just say no


why use
frameworks



✓ 
✓ 
✓ 
✓  
✓ 



- 
- 
- 
- 
- 


code
demo

resources


http://lesscss.org
http://incident57.com/less
http://www.initializr.com
- http://html5boilerplate.com
- http://twitter.github.com/bootstrap

VINCENT BASKERVILLE | VP OF PRODUCTION

oh yeah... sooo Scss *may* be
better than less now.
But Haml will forever suck.

STAY
CLASSY


AU REVOIR
VINCE BASKERVILLE
@WHOISVINCE
VINCE@TRIPLINGO.COM

Semantics, less and sarcasm

More Related Content

Similar to Semantics, less and sarcasm

Similar to Semantics, less and sarcasm (20)

More from Vincent Baskerville

More from Vincent Baskerville (19)

Recently uploaded

Recently uploaded (20)

Semantics, less and sarcasm