less is better

61
LESS IS BETTER Curtis McHale @curtismchale - curtismchale.ca - wpthemetutorial.com Friday, 15 March, 13

Upload: curtis-mchale

Post on 18-Jan-2015

590 views

Category:

Documents


0 download

DESCRIPTION

Presentation for WordPress Vancouver meetup on LESS.

TRANSCRIPT

Page 1: Less is better

LESS IS BETTERCurtis McHale

@curtismchale - curtismchale.ca - wpthemetutorial.com

Friday, 15 March, 13

Page 2: Less is better

What is LESS

Friday, 15 March, 13

Page 3: Less is better

What is LESS

Different way to write plain old CSS

Friday, 15 March, 13

Page 4: Less is better

One Example

Friday, 15 March, 13

Page 5: Less is better

One Example

Friday, 15 March, 13

Page 6: Less is better

One Example

Friday, 15 March, 13

Page 7: Less is better

BUT WHY????

Friday, 15 March, 13

Page 8: Less is better

WHY

Friday, 15 March, 13

Page 9: Less is better

WHY

File separation

Friday, 15 March, 13

Page 10: Less is better

WHY

File separation

widgets.less

Friday, 15 March, 13

Page 11: Less is better

WHY

File separation

widgets.less

forms.less

Friday, 15 March, 13

Page 12: Less is better

WHY

File separation

widgets.less

forms.less

layout.less

Friday, 15 March, 13

Page 13: Less is better

WHY

File separation

widgets.less

forms.less

layout.less

and still serve 1 file to the browser

Friday, 15 March, 13

Page 14: Less is better

Save Time

Friday, 15 March, 13

Page 15: Less is better

Save Time

Allows for variables

Friday, 15 March, 13

Page 16: Less is better

Save Time

Allows for variables

Friday, 15 March, 13

Page 17: Less is better

Save Time

Friday, 15 March, 13

Page 18: Less is better

Save Time

Mixins

Friday, 15 March, 13

Page 19: Less is better

Save Time

Mixins

Friday, 15 March, 13

Page 20: Less is better

Save Time

Mixins

Friday, 15 March, 13

Page 21: Less is better

Save Time

Friday, 15 March, 13

Page 22: Less is better

Save Time

Nested Rules

Friday, 15 March, 13

Page 23: Less is better

Save Time

Nested Rules

Friday, 15 March, 13

Page 24: Less is better

Save Time

Nested Rules

Friday, 15 March, 13

Page 25: Less is better

Save Time

Friday, 15 March, 13

Page 26: Less is better

Save Time

Functions and Operations

Friday, 15 March, 13

Page 27: Less is better

Save Browser Time

Friday, 15 March, 13

Page 28: Less is better

Save Browser Time

Compile and Serve Minified Files

Friday, 15 March, 13

Page 29: Less is better

Save Browser Time

Compile and Serve Minified Files

Friday, 15 March, 13

Page 30: Less is better

Save Browser Time

Compile and Serve Minified Files

http://curtismchale.ca saves 3kb minified

Friday, 15 March, 13

Page 31: Less is better

Save Browser Time

Compile and Serve Minified Files

http://curtismchale.ca saves 3kb minified

translates to 300mb for 100,000 visitors

Friday, 15 March, 13

Page 32: Less is better

Some Issues

Friday, 15 March, 13

Page 33: Less is better

Some Issues

Friday, 15 March, 13

Page 34: Less is better

Some Issues

Friday, 15 March, 13

Page 35: Less is better

Some Issues

Friday, 15 March, 13

Page 36: Less is better

Some Issues

Friday, 15 March, 13

Page 37: Less is better

Some Issues

Friday, 15 March, 13

Page 38: Less is better

Over Nesting

Friday, 15 March, 13

Page 39: Less is better

Over Nesting

Friday, 15 March, 13

Page 40: Less is better

Over Nesting

Friday, 15 March, 13

Page 41: Less is better

Over Nesting

Friday, 15 March, 13

Page 42: Less is better

Over Nesting

Friday, 15 March, 13

Page 43: Less is better

Over Nesting

Friday, 15 March, 13

Page 44: Less is better

Nesting Best Practices

Friday, 15 March, 13

Page 45: Less is better

Comment Please

Friday, 15 March, 13

Page 46: Less is better

Comment Please

Friday, 15 March, 13

Page 47: Less is better

Comment Please

Friday, 15 March, 13

Page 48: Less is better

Comment Please

Friday, 15 March, 13

Page 49: Less is better

COMPILING

Friday, 15 March, 13

Page 50: Less is better

With Javascript

Friday, 15 March, 13

Page 51: Less is better

With Javascript

Friday, 15 March, 13

Page 52: Less is better

With Javascript

Friday, 15 March, 13

Page 53: Less is better

During Development

Friday, 15 March, 13

Page 54: Less is better

During Development

Friday, 15 March, 13

Page 55: Less is better

During Development

Friday, 15 March, 13

Page 56: Less is better

During Development

Friday, 15 March, 13

Page 57: Less is better

THEME EXAMPLES

Friday, 15 March, 13

Page 58: Less is better

var.less

Friday, 15 March, 13

Page 59: Less is better

layout.less

Friday, 15 March, 13

Page 60: Less is better

layout.less

Friday, 15 March, 13

Page 61: Less is better

LESS IS BETTERCurtis McHale

@curtismchale - curtismchale.ca - wpthemetutorial.com

Friday, 15 March, 13