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.
Citation preview
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
DesigningHappinessthe book
http://kck.st/happyux VINCENT BASKERVILLE | VP of PRODUCT
