Semantics, LESS and Sarcasm
•
1 like•1,080 views
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.
Report
Share
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
- 2. Semantics, LESS & Sarcasm : | VINCENT BASKERVILLE | VP of PRODUCT
- 3. wtf is less? VINCENT BASKERVILLE | VP of PRODUCT
- 4. less [less] noun 1. stylesheet language that extends CSS with dynamic behavior. 2. pure awesomeness. VINCENT BASKERVILLE | VP of PRODUCT
- 5. VINCENT BASKERVILLE | VP of PRODUCT
- 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. 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. 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 a generic structure to documents. they define content to be inline or block" level but impose no other presentational idioms on the content. 3WORLD WIDE WEB CONSORTIUM VINCENT BASKERVILLE | VP of PRODUCT
- 10. why you should be using less VINCENT BASKERVILLE | VP of PRODUCT
- 11. • • • • VINCENT BASKERVILLE | VP of PRODUCT
- 12. • • • VINCENT BASKERVILLE | VP of PRODUCT
- 13. browser prefixes .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. what’s inside 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 use frameworks 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. code demo VINCENT BASKERVILLE | VP of PRODUCT
- 31. resources VINCENT BASKERVILLE | VP of PRODUCT
- 32. http://lesscss.org http://incident57.com/less http://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 VINCE@TRIPLINGO.COM
- 35. Designing Happiness the book http://kck.st/happyux VINCENT BASKERVILLE | VP of PRODUCT
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- div + span are semantically meaningless (aka neutral)\n
- \n
- \n
- \n
- \n
- \n
- \n
- Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.v\n
- Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.\n
- Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.\n
- Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.v\n
- Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- scss doesn’t require ruby anymore, and you can run it alone like less.. and with extra stuff like conditionals & controls it’s getting better\n
- \n
- \n