Download - Semantics, LESS and Sarcasm

Semantics,LESS & Sarcasm : |

VINCENT BASKERVILLE | VP of PRODUCT

wtf is less?



[less]lessnoun

1. stylesheet language that extends CSS with dynamic behavior.

2. pure awesomeness.

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

css still right?



[si-man-tik]se•man•ticadjective

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.

http://dictionary.reference.com/browse/semantics

http://dictionary.reference.com/browse/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 prefixes

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


• -

••

•


what’sinside


// LESS

@color: #4D926F;

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

/* Compiled CSS */

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

Variables


.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}

mixins

#menu a { color: #111; .bordered;}.post a { color: red; .bordered;}

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

+ =


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

nesting


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

@arguments


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

operations


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 useframeworks


✓

✓

✓

✓

✓


-

-

-

-

-


codedemo


resources


VINCENT BASKERVILLE | VP OF PRODUCTION

http://lesscss.org

http://incident57.com/less

http://www.initializr.com- http://html5boilerplate.com- http://twitter.github.com/bootstrap

http://lesscss.org/

http://lesscss.org/

http://incident57.com/less/

http://incident57.com/less/

http://www.initializr.com/

http://www.initializr.com/

http://html5boilerplate.com/

http://html5boilerplate.com/

http://twitter.github.com/bootstrap/

http://twitter.github.com/bootstrap/


oh yeah... sooo Scss *may* be better than less now.

But Haml will forever suck.

STAY CLASSY

AU REVOIRVINCE BASKERVILLE

@[email protected]

mailto:[email protected]

mailto:[email protected]

DesigningHappinessthe book

http://kck.st/happyux VINCENT BASKERVILLE | VP of PRODUCT

http://kck.st/happyux






Download - Semantics, LESS and Sarcasm

Top Related