Semantics, LESS and Sarcasm
Upcoming SlideShare
Loading in...5
×
 

Semantics, LESS and Sarcasm

on

  • 1,125 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 ...

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.

Statistics

Views

Total Views
1,125
Views on SlideShare
978
Embed Views
147

Actions

Likes
1
Downloads
15
Comments
0

3 Embeds 147

http://vincentjordan.com 120
http://storify.com 23
http://feeds.feedburner.com 4

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Semantics, LESS and Sarcasm Semantics, LESS and Sarcasm Presentation Transcript

  • LESS  
  • Semantics,LESS & Sarcasm :  |    VINCENT BASKERVILLE | VP of PRODUCT
  • 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
  • VINCENT BASKERVILLE | VP of PRODUCT
  • 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
  • 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
  • div+id/class = no semantic value HTML5 tags = rich semantic value VINCENT BASKERVILLE | VP of PRODUCT
  • 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
  • why youshould beusing less VINCENT BASKERVILLE | VP of PRODUCT
  •   •      •   •     •    VINCENT BASKERVILLE | VP of PRODUCT
  •   •      •    •      VINCENT BASKERVILLE | VP of PRODUCT
  • browser prefixes .round_corners (@radius: 20px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } VINCENT BASKERVILLE | VP of PRODUCT
  •   •  -•• •  VINCENT BASKERVILLE | VP of PRODUCT
  • what’sinside VINCENT BASKERVILLE | VP of PRODUCT
  • Variables// LESS /* Compiled CSS */@color: #4D926F; #header { color: #4D926F;#header { } color: @color; h2 {} color: #4D926F;h2 { } color: @color;} VINCENT BASKERVILLE | VP of PRODUCT
  • 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
  • nesting#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } }} //#header VINCENT BASKERVILLE | VP of PRODUCT
  • @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
  • operations#page_title { font-size: @headerSize * .5; } .logo { width: @full_page / 2; }} //#page_title VINCENT BASKERVILLE | VP of PRODUCT
  • eff sass & haml VINCENT BASKERVILLE | VP of PRODUCT
  • Sass, SCSS (sassy CSS) Haml Haml takes your gross, ugly templates and replaces them with veritable Haiku VINCENT BASKERVILLE | VP of PRODUCT
  • Sass HAML VINCENT BASKERVILLE | VP of PRODUCT
  • Just say no VINCENT BASKERVILLE | VP of PRODUCT
  • why useframeworks VINCENT BASKERVILLE | VP of PRODUCT
  •  ✓  ✓  ✓  ✓   ✓  VINCENT BASKERVILLE | VP of PRODUCT
  •  -  -  -  -  -  VINCENT BASKERVILLE | VP of PRODUCT
  • 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.com/bootstrap VINCENT BASKERVILLE | VP OF PRODUCTION
  • oh yeah... sooo Scss *may* be better than less now. But Haml will forever suck. STAY CLASSY VINCENT BASKERVILLE | VP of PRODUCT
  • AU REVOIR VINCE BASKERVILLE @WHOISVINCE VINCE@TRIPLINGO.COM
  • Designing Happiness the bookhttp://kck.st/happyux VINCENT BASKERVILLE | VP of PRODUCT