semantics, less and sarcasm

of 35/35
LESS

Post on 02-Dec-2014

1.174 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

  • 1. LESS
  • 2. Semantics,LESS & Sarcasm : | VINCENT BASKERVILLE | VP of PRODUCT
  • 3. wtfis less? VINCENT BASKERVILLE | VP of PRODUCT
  • 4. less [less]noun1. stylesheet language that extends CSS withdynamic behavior.2. pure awesomeness. VINCENT BASKERVILLE | VP of PRODUCT
  • 5. VINCENT BASKERVILLE | VP of PRODUCT
  • 6. css still [email protected]: #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. semantic [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. 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 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. why youshould beusing less VINCENT BASKERVILLE | VP of PRODUCT
  • 11. VINCENT BASKERVILLE | VP of PRODUCT
  • 12. VINCENT BASKERVILLE | VP of PRODUCT
  • 13. browser prexes .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. whatsinside 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 useframeworks 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. codedemo VINCENT BASKERVILLE | VP of PRODUCT
  • 31. resources VINCENT BASKERVILLE | VP of PRODUCT
  • 32. http://lesscss.orghttp://incident57.com/lesshttp://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 [email protected]
  • 35. Designing Happiness the bookhttp://kck.st/happyux VINCENT BASKERVILLE | VP of PRODUCT