LESS  
Semantics,LESS & Sarcasm :  |                     VINCENT BASKERVILLE | VP of P...
wtfis less?      VINCENT BASKERVILLE | VP of PRODUCT
less     [less]noun1. stylesheet language that extends CSS withdynamic behavior.2. pure awesomeness.                      ...
VINCENT BASKERVILLE | VP of PRODUCT
css still right?@base: #f938ab;.box-shadow(@style, @c) when (iscolor(@c)) {  box-shadow:         @style @c;  -webkit-box-s...
se•man•tic                  [si-man-tik]adjective1. of, pertaining to, or arising from the differentmeanings of words or o...
div+id/class = no semantic value   HTML5 tags = rich semantic value                                             VINCENT BA...
the div ! span elements, in conjunction with the id ! class attributes, offer ageneric structure to documents. they define...
why youshould beusing less       VINCENT BASKERVILLE | VP of PRODUCT
  •      •   •     •...
  •      •    •          ...
browser prefixes       .round_corners (@radius: 20px) {         border-radius: @radius;         -moz-border-radius: @radius...
  •  -•• •                            VINCENT BASKERVILLE | VP o...
what’sinside     VINCENT BASKERVILLE | VP of PRODUCT
Variables// LESS                 /* Compiled CSS */@color: #4D926F;        #header {                          color: #4D92...
.bordered {                                mixins    border-top: dotted 1px black;    border-bottom: solid 2px black;}    ...
nesting#header {  color: black;  .navigation {    font-size: 12px;  }  .logo {    width: 300px;    &:hover {      text-dec...
@arguments.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {  box-shadow: @arguments;  -moz-box-shadow: @arguments;  -...
operations#page_title {  font-size: @headerSize * .5;  }  .logo {    width: @full_page / 2;  }} //#page_title             ...
eff sass &  haml       VINCENT BASKERVILLE | VP of PRODUCT
Sass, SCSS (sassy CSS)                    Haml                         Haml takes your gross, ugly templates and          ...
Sass          HAML       VINCENT BASKERVILLE | VP of PRODUCT
Just say no              VINCENT BASKERVILLE | VP of PRODUCT
why useframeworks       VINCENT BASKERVILLE | VP of PRODUCT
 ✓  ✓  ✓  ✓   ✓                  ...
 -  -  -  -  -                        VINCENT B...
VINCENT BASKERVILLE | VP of PRODUCT
VINCENT BASKERVILLE | VP of PRODUCT
codedemo   VINCENT BASKERVILLE | VP of PRODUCT
resources      VINCENT BASKERVILLE | VP of PRODUCT
http://lesscss.orghttp://incident57.com/lesshttp://www.initializr.com- http://html5boilerplate.com- http://twitter.github....
oh yeah... sooo Scss *may* be    better than less now. But Haml will forever suck.                STAY                CLAS...
AU REVOIR    VINCE BASKERVILLE          @WHOISVINCE             VINCE@TRIPLINGO.COM
Upcoming SlideShare
Loading in …5
×

Semantics, less and sarcasm

1,006 views

Published on

In brief, in this presentation at That Conference I tried to illustrates why you should be using LESS in your current & future projects, an overview of it's features and make you a pro :D

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.

If you missed my presentation, still give it a shot, the *variables* alone will make it worth while!

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,006
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Semantics, less and sarcasm

  1. 1. LESS  
  2. 2. Semantics,LESS & Sarcasm :  |    VINCENT BASKERVILLE | VP of PRODUCT
  3. 3. wtfis less? VINCENT BASKERVILLE | VP of PRODUCT
  4. 4. less [less]noun1. stylesheet language that extends CSS withdynamic behavior.2. pure awesomeness. VINCENT BASKERVILLE | VP of PRODUCT
  5. 5. VINCENT BASKERVILLE | VP of PRODUCT
  6. 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. 7. se•man•tic [si-man-tik]adjective1. of, pertaining to, or arising from the differentmeanings of words or other symbols: semanticchange; semantic confusion.2. of or pertaining to semantics. VINCENT BASKERVILLE | VP of PRODUCT
  8. 8. div+id/class = no semantic value HTML5 tags = rich semantic value VINCENT BASKERVILLE | VP of PRODUCT
  9. 9. the div ! span elements, in conjunction with the id ! class attributes, offer ageneric structure to documents. they define content to be inline or block" level but impose no otherpresentational idioms on the content. !WORLD WIDE WEB CONSORTIUM VINCENT BASKERVILLE | VP of PRODUCT
  10. 10. why youshould beusing less VINCENT BASKERVILLE | VP of PRODUCT
  11. 11.   •      •   •     •    VINCENT BASKERVILLE | VP of PRODUCT
  12. 12.   •      •    •      VINCENT BASKERVILLE | VP of PRODUCT
  13. 13. browser prefixes .round_corners (@radius: 20px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } VINCENT BASKERVILLE | VP of PRODUCT
  14. 14.   •  -•• •  VINCENT BASKERVILLE | VP of PRODUCT
  15. 15. what’sinside VINCENT BASKERVILLE | VP of PRODUCT
  16. 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. 17. .bordered { mixins 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 { #menu a { color: red; color: #111; border-top: dotted 1px black; .bordered; border-bottom: solid 2px black; } } .post a { color: red; .bordered; } VINCENT BASKERVILLE | VP of PRODUCT
  18. 18. nesting#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } }} //#header VINCENT BASKERVILLE | VP of PRODUCT
  19. 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. 20. operations#page_title { font-size: @headerSize * .5; } .logo { width: @full_page / 2; }} //#page_title VINCENT BASKERVILLE | VP of PRODUCT
  21. 21. eff sass & haml VINCENT BASKERVILLE | VP of PRODUCT
  22. 22. Sass, SCSS (sassy CSS) Haml Haml takes your gross, ugly templates and replaces them with veritable Haiku VINCENT BASKERVILLE | VP of PRODUCT
  23. 23. Sass HAML VINCENT BASKERVILLE | VP of PRODUCT
  24. 24. Just say no VINCENT BASKERVILLE | VP of PRODUCT
  25. 25. why useframeworks VINCENT BASKERVILLE | VP of PRODUCT
  26. 26.  ✓  ✓  ✓  ✓   ✓  VINCENT BASKERVILLE | VP of PRODUCT
  27. 27.  -  -  -  -  -  VINCENT BASKERVILLE | VP of PRODUCT
  28. 28. VINCENT BASKERVILLE | VP of PRODUCT
  29. 29. VINCENT BASKERVILLE | VP of PRODUCT
  30. 30. codedemo VINCENT BASKERVILLE | VP of PRODUCT
  31. 31. resources VINCENT BASKERVILLE | VP of PRODUCT
  32. 32. http://lesscss.orghttp://incident57.com/lesshttp://www.initializr.com- http://html5boilerplate.com- http://twitter.github.com/bootstrap VINCENT BASKERVILLE | VP OF PRODUCTION
  33. 33. oh yeah... sooo Scss *may* be better than less now. But Haml will forever suck. STAY CLASSY VINCENT BASKERVILLE | VP of PRODUCT
  34. 34. AU REVOIR VINCE BASKERVILLE @WHOISVINCE VINCE@TRIPLINGO.COM

×