• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Semantics, less and sarcasm
 

Semantics, less and sarcasm

on

  • 687 views

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 ...

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!

Statistics

Views

Total Views
687
Views on SlideShare
685
Embed Views
2

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 2

https://si0.twimg.com 1
http://www.linkedin.com 1

Accessibility

Categories

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

    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. !WORLD 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
    • .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
    • 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