LESS, JS & WPfor #WPN12

RUSSELL FAIRdeveloper / open source code junkie r@q21.co

use-LESS links

http://lesscss.org/

https://github.com/rfair404/LESS-theme-demo

http://lesselements.com/https://github.com/juanghurtado/less-elements.tmbundlehttp://incident57.com/codekit/http://incident57.com/less/WINDOWS: http://wearekiss.com/simplesshttp://lessframework.com/http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

1 LESS joke

LESS != 'more';

LESS $beer != 'happy coder';LESS $money != 'happy coder';

LESS $time_writing_css == 'happy coder';

what's LESS

Serverside ClientsidePreCompiled

Valid CSS3

add LESS (bad code) to wp

<link rel="stylesheet/less" type="text/css" href="<?php echo THEME_URL; ?>/less/example.less">

<script src="<?php echo THEME_URL; ?>/js/less-1.2.0.min.js" type="text/javascript"></script>

doing LESS work is good

saves timeeasier to navigate

#!watch

drawbacks? slow,

more variables = LESS code

@color1: #e4e9c2;@padding1: 1%;

body { background: @color1; }

.hfeed {background:@color1;padding:@padding1;

}

nested rules = LESS confusing

body.blog { .hfeed { background: @color3; }

}

body.archive {.hfeed { background: @color2; }

}

LESS mixins

.minimal-padding { padding:@padding1; }

body.blog {.minimal-padding;

}

fancy mixins (parametric)

.box-shadow(@bscolor, @bsoffsety, @bsoffsetx, @bsblur) {

box-shadow: @bscolor @bsoffsety @bsoffsetx @bsblur;}

body .hfeed {.box-shadow(pink, -5px, -5px, 30px);

}

custom LESS functions

.recolor( @color4:purple ) {body.blog {

.hfeed {background:@color4;

}}

}

.recolor();

native LESS functions

body.blog {background: saturate(@color2, 90%);

}

.hfeed a {color: spin(@color2, 20);

}

more native LESS functions

.hentry:nth-child(3n+1) {background: lighten( @color2 , 20% );

}.hentry:nth-child(3n+2) {

background: darken( @color2 , 5% );}.hentry:nth-child(3n+3) {

background: saturate( spin( @color3, -50 ), 30% );}

LESS math

.multiplication { margin: @padding1 * 2; }

.division { margin: @padding2 / 2; }

.addition(@width1, @width2) {width: @width1 + @width2;

}.subtraction(@width1, @width2) {

width: @width1 - @width2;}

JS Funtime

Lettering.jsFitText.jsFitVids.js

lettering.JS

Adds <span>things</span>

Works on lines, words and letters

All JS so no SEO impact

Use no-JS fallback

http://letteringjs.com/

fittext.JS

Adjust font sizes to fit words into boxes on responsive views

All JS so no SEO impact

Use no-JS fallback

http://fittextjs.com/

fitvids.JS

Adjusts video widths dynamically (responsive)

Works with some* of the built in oEmbed providers

http://fitvidsjs.com/

Questions?