{less} is more - Speaker Deck

Slide 1

Slide 1 text

Do more with {less}

Slide 2

Slide 2 text

This session

Slide 3

Slide 3 text

Goal #1: Show you why you should use {less}

Slide 4

Slide 4 text

Goal #2: Teach you {less} in 30 minutes

Slide 5

Slide 5 text

There will be code

Slide 6

Slide 6 text

{less} to keep us sane

Slide 7

Slide 7 text

You don’t need notes

Slide 8

Slide 8 text

I won’t bash SASS

Slide 9

Slide 9 text

Jesper Wøldiche Rahkonen Designer / themer / markup marine *really* likes grids twitter: woeldiche About me

Slide 10

Slide 10 text

What Why Features Learn {less} Drupal Extras What is {less} Overview

Slide 11

Slide 11 text

What Why Features Learn {less} Drupal Extras What is {less} Overview

Slide 12

Slide 12 text

What Why Features Learn {less} Drupal Extras Why you should be using {less} Overview

Slide 13

Slide 13 text

What Why Features Learn {less} Drupal Extras An overview of the features in {less} Overview

Slide 14

Slide 14 text

What Why Features Learn {less} Drupal Extras I’ll teach you {less}, hopefully Overview

Slide 15

Slide 15 text

What Why Features Learn {less} Drupal Extras Using {less} in drupal Overview

Slide 16

Slide 16 text

What Why Features Learn {less} Drupal Extras Yummy extras, if time Overview

Slide 17

Slide 17 text

What is {less}?

Slide 18

Slide 18 text

{less} extends css with new features

Slide 19

Slide 19 text

Compiles into ordinary (but yummy, yummy) CSS

Slide 20

Slide 20 text

A strict superset of CSS

Slide 21

Slide 21 text

Why use {less}?

Slide 22

Slide 22 text

Write less code Why?

Slide 23

Slide 23 text

Write less code, that’s faster to code up Why?

Slide 24

Slide 24 text

Write less code, that’s faster to code up, easier (cheaper) to maintain Why?

Slide 25

Slide 25 text

Write less code, that’s faster to code up, easier (cheaper) to maintain and re-use in a project Why?

Slide 26

Slide 26 text

Write less code, that’s faster to code up, easier (cheaper) to maintain and re-use in a project or among several projects Why?

Slide 27

Slide 27 text

And it’s dead-easy to learn, if you already know CSS - honestly!

Slide 28

Slide 28 text

Feature overview

Slide 29

Slide 29 text

Variables (yay!) Feature overview

Slide 30

Slide 30 text

Variables Mixins (it’ll make sense, promise) Feature overview

Slide 31

Slide 31 text

Variables Mixins Nested rules (for prettier code) Feature overview

Slide 32

Slide 32 text

Variables Mixins Nested rules Operations (it’s almost like programming) Feature overview

Slide 33

Slide 33 text

Variables Mixins Nested rules Operations Color functions (Want channels with your HSL?) Feature overview

Slide 34

Slide 34 text

Variables Mixins Nested rules Operations Color functions + more Feature overview

Slide 35

Slide 35 text

Variables

Slide 36

Slide 36 text

1 // LESS 2 @color: #4D926F; 3 4 #header { 5 color: @color; 6 } 7 8 h2 { 9 color: @color; 10 } 11 12 /* Compiled CSS */ 13 #header { 14 color: #4D926F; 15 } 16 17 h2 { 18 color: #4D926F; 19 } Variables

Slide 37

Slide 37 text

Mixins

Slide 38

Slide 38 text

// LESS 1 .bordered { 2 border-top: dotted 1px black; 3 border-bottom: solid 2px black; 4 } 5 6 #menu a { 7 color: #111; 8 .bordered; 9 } 10 .post a { 11 color: red; 12 .bordered; 13 } Mixins

Slide 39

Slide 39 text

Mixins /* Compiled CSS */ 1 .bordered { 2 border-top: dotted 1px black; 3 border-bottom: solid 2px black; 4 } 5 6 #menu a { 7 color: #111; 8 border-top: dotted 1px black; 9 border-bottom: solid 2px black; 10 } 11 .post a { 12 color: red; 13 border-top: dotted 1px black; 14 border-bottom: solid 2px black; 15 }

Slide 40

Slide 40 text

Any css class, id og element definition can be mixed in Mixins

Slide 41

Slide 41 text

Define once. Use multiple time 1 .awesome-styling { } 2 3 .funky-box { 4 .awesome-styling 5 } 6 7 .even funkier box { 8 .awesome-styling 9 10 } Case: reusable styles

Slide 42

Slide 42 text

Case: hard to remember hacks workarounds 1 .obscure-msie-hack { 2 3 } 4 5 .content-that-works-in-any-other-browser { 6 7 .obscure-msie-hack 8 }

Slide 43

Slide 43 text

meh...

Slide 44

Slide 44 text

meh...

Slide 45

Slide 45 text

Now we’re talking. They should be spelled paramëtric mixins and have a theme song. Parametric mixins

Slide 46

Slide 46 text

Paramëtric mixins // LESS 1 .rounded-corners (@radius: 5px) { 2 -webkit-border-radius: @radius; 3 -moz-border-radius: @radius; 4 border-radius: @radius; 5 } 6 7 #header { 8 .rounded-corners; 9 } 10 #footer { 11 .rounded-corners(10px); 12 }

Slide 47

Slide 47 text

Paramëtric mixins /* Compiled CSS */ 1 #header { 2 border-radius: 5px; 3 -webkit-border-radius: 5px; 4 -moz-border-radius: 5px; 5 } 6 7 #footer { 8 border-radius: 10px; 9 -webkit-border-radius: 10px; 10 -moz-border-radius: 10px; 11 }

Slide 48

Slide 48 text

Case: Vendor prefixes Define once 1 .opacity(@opacity: 0.5) { 2 -moz-opacity: @opacity; 3 -khtml-opacity: @opacity; 4 -webkit-opacity: @opacity; 5 opacity: @opacity; 6 -ms-filter: e(“progid:DXImageTransform.Microsoft. Alpha(Opacity=”)@opacity*100e(“)”); 7 filter: e(“alpha(opacity =”)@opacity * 100e(“)”); 8 } Use thrice 9 body { .opacity(0.8) } 10 .fancy-box { .opacity(0.4) } 11 .see-through-footer { .opacity }

Slide 49

Slide 49 text

Slide 50

Slide 50 text

designshack.co.uk/articles/css/introducing-the- less-css-grid Case: Variable grid

Slide 51

Slide 51 text

Case: Style library

Slide 52

Slide 52 text

// Import .less 1 @import “lib.less”; 2 @import “lib2”; // Import without processing 3 @import “lib.css”; @import

Slide 53

Slide 53 text

// LESS 1 // Import libraries 2 @import “lib-typography”; 3 @import “lib-branding.less”; 4 @import “lib-form_ui.less”; 5 @import “lib-buttons.less”; 6 7 /* Import base styling */ 8 @import “reset.css”; 9 @import “typography.css”; 10 11 /* Apply library styles */ 12 body { 13 .lib_ty-base 14 .lib_brand-base 15 } 16 form { 17 .lib_form-base 18 .lib_form-modern 19 ... your custom styles 20 } 21 22 input[type=text], 23 textarea { 24 .lib_form-input-modern 25 ... more custom styles 26 } A style library

Slide 54

Slide 54 text

/* Compiled CSS */ 1 2 3 4 /* Apply library styles */ 5 body { 6 7 8 } 9 form { 10 11 12 ... your custom styles 13 } 14 input[type=text], 15 textarea { 16 17 ... more custom styling 18 } A style library

Slide 55

Slide 55 text

Operations

Slide 56

Slide 56 text

Any number, colour or value can be operated on

Slide 57

Slide 57 text

Operations // LESS 1 @base: 5%; 2 @filler: @base * 2; 3 @other: @base + @filler; 4 5 color: #888 / 4; 6 background-color: @base-color + #111; 7 height: 100% / 2 + @filler;

Slide 58

Slide 58 text

// LESS 1 @var: 1px + 5; 2 3 // You can use brackets 4 width: (@var + 5) * 2; 5 6 // Required for compound values 7 border: (@width / 11) solid black; /* Compiled CSS */ 8 width: 22px; 9 border: 2px solid black; {less} tells colours from units

Slide 59

Slide 59 text

Case: Derived styling // LESS 1 @fontsize-default: 14px; 2 @fontsize-sec: @fontsize-default * 0.8; 3 @lineheight: 1.3; 4 5 p { 6 font-size: @fontsize-default; 7 line-height: @lineheight * @fontsize-default; 8 } 9 10 .block p { 11 font-size: @fontsize-sec; 12 line-height: @lineheight * @fontsize-sec; 13 }

Slide 60

Slide 60 text

Colour operations

Slide 61

Slide 61 text

Colour operations 1 lighten(@color, 10%); // a color 10% *lighter* 2 darken(@color, 10%); // a color 10% *darker* 3 4 saturate(@color, 10%); // a color 10% *more* saturated 5 desaturate(@color, 10%); // a color 10% *less* saturated 6 7 fadein(@color, 10%); // a color 10% *less* transparent 8 fadeout(@color, 10%); // a color 10% *more* transparent 9 10 spin(@color, -10%); // return a color with a 10 degree larger in hue than @color 11 spin(@color, 10%); // return a color with a 10 degree smaller hue than @color

Slide 62

Slide 62 text

Huh? Colors are first converted to the HSL color-space And then manipulated at the channel level

Slide 63

Slide 63 text

Nested rules

Slide 64

Slide 64 text

/* Old skool CSS */ 1 #header { color: black; } 2 #header .navigation { 3 font-size: 12px; 4 } 5 #header .logo { 6 width: 300px; 7 } 8 #header .logo:hover { 9 text-decoration: none; 10 } Nesting

Slide 65

Slide 65 text

// LESS 1 #header { 2 color: black; 3 4 .navigation { 5 font-size: 12px; 6 } 7 .logo { 8 width: 300px; 9 &:hover { text-decoration: none } 10 } 11 } Nesting

Slide 66

Slide 66 text

// LESS 1 #header { 2 color: black; 3 4 .navigation { 5 font-size: 12px; 6 } 7 .logo { 8 width: 300px; 9 &:hover { text-decoration: none } 10 } 11 } &-operator

Slide 67

Slide 67 text

{less} and Drupal™

Slide 68

Slide 68 text

The easy way in The performance concious solution The advanced version Three ways to play it

Slide 69

Slide 69 text

The easy way in

Slide 70

Slide 70 text

Automatically compiles .less files in the theme to plain css LESS module

Slide 71

Slide 71 text

Automatically compiles .less files in the theme to plain css Development mode LESS module

Slide 72

Slide 72 text

Automatically compiles .less files in the theme to plain css Development mode mylesstheme.info: 1 ;----- Stylesheets ---------------------------- 2 stylesheets[screen][] = styles/mylesstheme.styles.less 3 stylesheets[screen][] = styles/mylesstheme.typography.less 4 5 ;----- IE specific stylesheets --------------- 6 ie stylesheets[if IE 7][all][] = styles/mylesstheme.ie7.less LESS module

Slide 73

Slide 73 text

Performance concious?

Slide 74

Slide 74 text

From the command line $ lessc styles.less > styles.css Compiles to stdout Compile locally

Slide 75

Slide 75 text

‘The only thing easier is making fun of Internet Explorer’ less.app

Slide 76

Slide 76 text

I’m {more} advanced

Slide 77

Slide 77 text

Compile clientside with less.js

Slide 78

Slide 78 text

1 @height: `document.body.clientHeight`; Access JS enviroment

Slide 79

Slide 79 text

Build on top of css/less compiled serverside, right? Progressive enhancement

Slide 80

Slide 80 text

Yummy extras

Slide 81

Slide 81 text

// LESS 1 .class { 2 filter: ~”progid:DXImageTransform.Microsoft. AlphaImageLoader(src=’image.png’)”; 3 } /* Compiled CSS */ 4 .class { 5 filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(src=’image.png’); 6 } Escaping strings

Slide 82

Slide 82 text

1 #bundle { 2 .button () { 3 display: block; 4 border: 1px solid black; 5 background-color: grey; 6 &:hover { background-color: white } 7 } 8 .tab { ... } 9 .citation { ... } 10 } 11 12 #header a { 13 color: orange; 14 #bundle > .button; 15 } Namespaces

Slide 83

Slide 83 text

Slide 84

Slide 84 text

Embed variables in strings with the @{param} construct 1 @base-url: “http://assets.fnord.com”; 2 background-image: url(“@{base-url}/images/bg.png”); String interpolation

Slide 85

Slide 85 text

1 @var: `”hello”.toUpperCase() + ‘!’`; Becomes 2 @var: “HELLO!”; JS Evaluation

Slide 86

Slide 86 text

Questions?

Slide 87

Slide 87 text

Thank you!

Slide 88

Slide 88 text

{less} documentation: lesscss.org Slides: slideshare.net/woeldiche Less module: drupal.org/project/less less.app: incident57.com/less/ Slides & docs