semantics, less and sarcasm
Post on 14-May-2015
648 Views
Preview:
DESCRIPTION
TRANSCRIPT
LESS
Semantics,LESS & Sarcasm : |
VINCENT BASKERVILLE | VP of PRODUCT
wtf is less?
VINCENT BASKERVILLE | VP of PRODUCT
VINCENT BASKERVILLE | VP of PRODUCT
[less]lessnoun
1. stylesheet language that extends CSS with dynamic behavior.
2. pure awesomeness.
VINCENT BASKERVILLE | VP of PRODUCT
@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%) }}
css still right?
VINCENT BASKERVILLE | VP of PRODUCT
VINCENT BASKERVILLE | VP of PRODUCT
[si-man-tik]se•man•ticadjective
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
div+id/class = no semantic value HTML5 tags = rich semantic value
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.
-WORLD WIDE WEB CONSORTIUM
VINCENT BASKERVILLE | VP of PRODUCT
why you should be using 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
// LESS
@color: #4D926F;
#header { color: @color;}h2 { color: @color;}
/* Compiled CSS */
#header { color: #4D926F;}h2 { color: #4D926F;}
Variables
VINCENT BASKERVILLE | VP of PRODUCT
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}
mixins
#menu a { color: #111; .bordered;}.post a { color: red; .bordered;}
#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black;}.post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black;}
+=
VINCENT BASKERVILLE | VP of PRODUCT
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } }} //#header
nesting
VINCENT BASKERVILLE | VP of PRODUCT
.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;}
@arguments
VINCENT BASKERVILLE | VP of PRODUCT
#page_title { font-size: @headerSize * .5; } .logo { width: @full_page / 2; }} //#page_title
operations
VINCENT BASKERVILLE | VP of PRODUCT
eff sass & haml
VINCENT BASKERVILLE | VP of PRODUCT
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
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
VINCENT BASKERVILLE | VP OF PRODUCTION
http://lesscss.org
http://incident57.com/less
http://www.initializr.com- http://html5boilerplate.com- http://twitter.github.com/bootstrap
VINCENT BASKERVILLE | VP of PRODUCT
oh yeah... sooo Scss *may* be better than less now.
But Haml will forever suck.
STAY CLASSY
AU REVOIRVINCE BASKERVILLE
@WHOISVINCEVINCE@TRIPLINGO.COM
top related