CSS with LESS for #jd13nl

A presentation at Joomladagen 2013 in April 2013 in Zeist, Netherlands by Hans Kuijpers

CSS met LESS waar begin ik? een presentatie voor de Joomla!dagen 21 april 2013 Woudschoten - Zeist hans2103 @hans2103 Sunday 21 April 13

CSS met LESS waar begin ik? een presentatie voor de Joomla!dagen 21 april 2013 Woudschoten - Zeist presentatie kun je downloaden via http://slideshare.net/hans2103 hans2103 @hans2103 Sunday 21 April 13

Wat is LESS? • LESS is een programmeertaal • LESS compileer je naar CSS • LESS is een CSS preprocessor • LESS syntax is gemaakt vanuit CSS • LESS is dynamisch CSS @hans2103 Sunday 21 April 13

Waarom LESS gebruiken • LESS bespaart tijd • LESS vermindert fouten • LESS vermindert herhalingen • LESS is handig @hans2103 Sunday 21 April 13

Hopsakee… aan de slag! veel code @hans2103 Sunday 21 April 13

vooraf compileren
<link rel=”stylesheet/css” href=”style.css” /> on the fly compileren <link rel=”stylesheet/less” href=”style.less” /> <script src=”less.js”></script> @hans2103 Sunday 21 April 13

style.less // LESS // import normalize for CSS resets @import “normalize”; // same as @import “normalize.less”; // import mixins @import “mixins”; // base for mobile devices @import “base”; //tables and small laptops @media only screen and (min-width: 768px) { @import “768up”; } //desktop @media only screen and (min-width: 1030px) { @import “1030up”; } @hans2103 Sunday 21 April 13

http://incident57.com/codekit http://winless.org #apt-get install node-less @hans2103 Sunday 21 April 13

clean structure with nesting // LESS /* Compiled CSS */
header { #nav { ul { li { a {} } } } }
#header {} #header #nav {} #header #nav ul {} #header #nav ul li {} #header #nav ul li a {} lijkt warempel op de HTML structuur @hans2103 Sunday 21 April 13

clean structure with nesting // LESS /* Compiled CSS */ a{ &:hover {} &:active {} &:visited {} } a {} a:hover {} a:active {} a:visited {} @hans2103 Sunday 21 April 13

variables standaard waarden om te hergebruiken in de stylesheet. // LESS /* Compiled CSS */ @color: #4D926F; @serif: serif; @sans-serif: sans-serif; #header { color: @color; font-family: @serif; } h2 { color: @color; font-family: @sans-serif; } @hans2103 Sunday 21 April 13 #header { color: #4D926F; font-family: serif; } h2 { color: #4D926F; font-family: sans-serif; }

mixins Gebruik de waarden van een gehele class in een andere class. // LESS /* Compiled CSS */ .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; } @hans2103 Sunday 21 April 13 .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; border-top: dotted 1px black; border-bottom: solid 2px black; }

parametric mixins parameters verwerkt in mixins // LESS /* Compiled CSS */ .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } @hans2103 Sunday 21 April 13 #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }

operations (simple mathematical operators: + - * / ) // LESS /* Compiled CSS */ .font-size(@font-size: 16){ @remValue: (@font-size / 10); font-size: @font-size * 1px; font-size: ~”@{remValue}rem”; } html { font-size: 62.5%; } body { .font-size(); } h1 { .font-size(24); } http://snook.ca/archives/html_and_css/font-size-with-rem @hans2103 Sunday 21 April 13 html { font-size: 62.5%; } body { font-size: 16px; font-size: 1.6rem; } h1 { font-size: 24px; font-size: 2.4rem; }

operations (simple mathematical operators: + - * / ) // LESS /* Compiled CSS */ @the-border: 2px; @base-color: #111; #header { color: (@base-color * 3); border-top: (@the-border / 2); border-right: (@the-border + 2); border-bottom: (@the-border - 1); border-left: @the-border; } #footer { color: (@base-color + #003300); } @hans2103 Sunday 21 April 13 #header { color: #333; border-top: 1px; border-right: 4px; border-bottom: 1px; border-left: 2px; } #footer { color: #114411; }

functions (map one-to-one with Javascript code) // LESS escape(@string); e(@string); %(@string, values…); // URL encodes a string // escape string content // formats a string unit(@dimension, [@unit: “”]); // remove or change the unit of a dimension color(@string); // parses a string to a color data-uri([mimetype,] url); // * inlines a resource and falls back to url() ceil(@number); // rounds up to an integer floor(@number); // rounds down to an integer percentage(@number); // converts to a %, e.g. 0.5 -> 50% round(number, [places: 0]); // rounds a number to a number of places sqrt(number); // * calculates square root of a number abs(number); // * absolute value of a number sin(number); // * sine function asin(number); // * arcsine - inverse of sine function http://lesscss.org/#reference cos(number); // * cosine function acos(number); // *2103 arccosine - inverse of cosine function @hans tan(number); // * tangent function atan(number); // * arctangent - inverse of tangent function Sunday 21 April 13

functions - darken & lighten // LESS .background_gradient(@base) { background: @base; background: -webkit-gradient(linear, left top, left bottom, from(lighten(@base, 5%)), to(darken background: -moz-linear-gradient(top, lighten(@base, 5%), darken(@base, 5%)); } @orange_base: #f78d1d; .orange { .background_gradient(@orange_base); &:hover { .background_gradient(darken(@orange_base, 10%)); } &:active { .background_gradient(lighten(@orange_base, 10%)); } } @blue_base: #7db8db; .blue { .background_gradient(@blue_base); &:hover { .background_gradient(darken(@blue_base, 10%)); } &:active { .background_gradient(lighten(@blue_base, 10%)); } } http://lesscss.org/#reference @hans2103 Sunday 21 April 13

functions - darken & lighten /* Compiled CSS */ .orange { background: #f78d1d; background: -webkit-gradient(linear,left top,left bottom,from(#f89936),to(#f28009)); background: -moz-linear-gradient(top,#f89936,#f28009); } .orange:hover { background: #d97308; background: -webkit-gradient(linear,left top,left bottom,from(#f28009),to(#c16607)); background: -moz-linear-gradient(top,#f28009,#c16607); } .orange:active { background: #f9a64e; background: -webkit-gradient(linear,left top,left bottom,from(#fab267),to(#f89936)); background: -moz-linear-gradient(top,#fab267,#f89936); } .blue { http://lesscss.org/#reference background: #7db8db; @hans2103 background: -webkit-gradient(linear,left top,left bottom,from(#91c3e1),to(#69add5)); background: -moz-linear-gradient(top,#91c3e1,#69add5); } Sunday 21 April 13

functions - escaping // LESS .background_gradient(@base) { background-color: @base; background-image: -webkit-gradient(linear, left top, left bottom, from(lighten(@base, 5%)), to( background-image: -webkit-linear-gradient(top, lighten(@base, 5%), darken(@base, 5%)); background-image: -moz-linear-gradient(top, lighten(@base, 5%), darken(@base, 5%)); background-image: -o-linear-gradient(top, lighten(@base, 5%), darken(@base, 5%)); background-image: linear-gradient(to bottom, lighten(@base, 5%), darken(@base, 5%)); filter: e(progid:DXImageTransform.Microsoft.gradient(startColorstr=lighten(@base, 5%), end } @orange_base: #f78d1d; .orange { .background_gradient(@orange_base); &:hover { .background_gradient(darken(@orange_base, 10%)); } &:active { .background_gradient(lighten(@orange_base, 10%)); } } @blue_base: #7db8db; .blue { .background_gradient(@blue_base); http://lesscss.org/#reference &:hover { .background_gradient(darken(@blue_base, 10%)); } @hans2103 &:active { .background_gradient(lighten(@blue_base, 10%)); } } Sunday 21 April 13

functions - escaping /* Compiled CSS */ .orange { background-color: #f78d1d; background-image: -webkit-gradient(linear,left top,left bottom,from(#f89936),to(#f28009)); background-image: -webkit-linear-gradient(top,#f89936,#f28009); background-image: -moz-linear-gradient(top,#f89936,#f28009); background-image: -o-linear-gradient(top,#f89936,#f28009); background-image: linear-gradient(to bottom,#f89936,#f28009); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f89936,endColorstr=#f28 } .orange:hover { background-color: #f78d1d; background-image: -webkit-gradient(linear,left top,left bottom,from(#f28009),to(#c16607)); background-image: -webkit-linear-gradient(top,#f28009,#c16607); background-image: -moz-linear-gradient(top,#f28009,#c16607); background-image: -o-linear-gradient(top,#f28009,#c16607); background-image: linear-gradient(to bottom,#f28009,#c16607); http://lesscss.org/#reference filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f28009,endColorstr=#c16 @hans2103 } .orange:active { Sunday 21 April 13 background-color: #f9a64e;

functions - data-uri // LESS data-uri(‘image/jpeg;base64’, ‘../data/image.jpg’); /* Compiled CSS */ url(‘data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==’); flinke reductie HTTP-request. voor- en nadelen beschreven in wiki http://en.wikipedia.org/wiki/ Data_URI_scheme#Advantages http://lesscss.org/#reference @hans2103 Sunday 21 April 13

String interpolation // LESS @baseUrl: “http://joomladagen.nl/”; @imageUrl: “images/”; background-image: url(‘@{baseUrl}@{imageUrl}logo.png’); /* CSS Compilation */ background-image: url(‘http://joomladagen.nl/images/logo.png’); http://lesscss.org/#reference @hans2103 Sunday 21 April 13

scope // LESS /* Compiled CSS */ header { @color: black; background-color: @color; nav {
@color: blue;
background-color: @color;
a{
color: @color;
} } h1 {
color: @color; } } @hans2103 Sunday 21 April 13 header { background-color: black; } header nav { background-color: blue; } header nav a { color: blue; } header h1 { color: black; }

combinator Gebruik de waarden van een gehele class in een andere class. // LESS /* Compiled CSS */ .bordered, .rounded { &.float { float: left; } .top { margin: 5px; } &+&{ color: yellow; } } .bordered.float, .rounded.float { float: left; } .bordered .top, .rounded .top { margin: 5px; } .bordered + .bordered, .rounded + .rounded { color: yellow; } @hans2103 Sunday 21 April 13

http://leafo.net/lessphp/lessify/ @hans2103 Sunday 21 April 13

http://leafo.net/lessphp/editor.html @hans2103 Sunday 21 April 13

@hans2103 Sunday 21 April 13

@hans2103 Sunday 21 April 13

@hans2103 Sunday 21 April 13

@hans2103 Sunday 21 April 13

@hans2103 Sunday 21 April 13

Hopsakee… aan de slag! gewoon beginnen @hans2103 Sunday 21 April 13

veel plezier @hans2103 Sunday 21 April 13

thank you for your time and have fun http://about.me/hans2103 hans2103 http://slideshare.net/hans2103 @hans2103 http://www.flickr.com/photos/trasimac/1217071176 Sunday 21 April 13

Hans Kuijpers
@hans2103

1 / 34

CSS met Less :: Hoe begin ik? - een presentatie gegeven door Hans Kuijpers tijdens Joomladagen 2013 te Woudschoten, Zeist. #jd13nl De eerste keer werken met CSS gaf me dezelfde kriebels als nu werken met LESS. Het maakt je leven zo veel makkelijker!