Successfully reported this slideshow.
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...
mixins.bordered {    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
Designing    Happiness    the bookhttp://kck.st/happyux               VINCENT BASKERVILLE | VP of PRODUCT
Upcoming SlideShare
Loading in …5
×

Semantics, LESS and Sarcasm

1,614 views

Published on

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.

Published in: Technology, Design
  • Be the first to comment

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. 3WORLD 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. 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. 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
  35. 35. Designing Happiness the bookhttp://kck.st/happyux VINCENT BASKERVILLE | VP of PRODUCT

×