0
Doing More With How a meta-language can help youtake control of your stylesheets andhelp improve your style productivity.
David Engel•   UofM grad•   .NET and PHP developer•   Tipping Canoe alumnus•   Experienced “backend” developer       PHP, ...
CSS        Cascading Style Sheets• describes look & formatting of a document  that has been created using markup• separate...
OOCSS          Object Oriented CSS• separate structure and skin• separate container and content
OOCSS#button {                           #box {  width: 100px;                       width: 200px;  height: 25px;         ...
OOCSSbecomes….button {                                 .skin {  width: 100px;                             background: #ccc...
OOCSSUse classes for styling hooks!Use ids for behavioral hooks!
DRY CSS     Don’t Repeat Yourself (Jeremy Clarke)1. Group reusable CSS properties together2. Use logical names for groups3...
DRY CSS          What are we still missing?• Descendent selectors break OOCSS – so what?     (the “OO” part of OOCSS is ga...
LESS•   variables      •   comparitors•   mixins         •   type/unit checking•   nesting        •   color functions•   o...
LESS: Variables@maxim-green:#8dc63f;.color-green{   color:@maxim-green;}
LESS: Mixins• Gives us inheritance!.rounded-corners{  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius...
LESS: MixinsParametric mixins extend this functionality.rounded-corners (@radius) {   border-radius: @radius;   -webkit-bo...
LESS: MixinsParametric mixins can also have default values.rounded-corners (@radius: 5px) {   border-radius: @radius;   -w...
LESS: Nesting    Nesting gives us a kind of namespacing for specificity of                           inheritance#header { ...
LESS: Nesting… and Scope@red : red;#header {      @red: #BF2E1A;      h1 {color: @red;   // yields #BF2E1A      }}h1 {colo...
LESS: Operations• add, subtract, divide and multiply properties@red: # BF2E1A;@main-margin: 4px;#footer{  color: @red + #0...
LESS: FunctionsTake arguments into your mixins….box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {  box-shadow: @x @y @...
LESS: Functions…or use the @arguments variable to take it all!.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {  box-...
LESS: Imperative ProgrammingThis is a kind of switch (note the “all” selector)….color-mixin (dark, @color) {  color: darke...
LESS: Imperative Programming…that we can call like so:@light-switch: light;@dark-switch: dark;.light-class {  .color-mixin...
LESS: Overloads“Arity” for the geeks (and Java and .NET folks).fade-mixin (@a-color) {  color: @a-color;}.fade-mixin (@a-c...
LESS: Guarded mixins• uses “when” and can use “and” “,” and “not”• can also use the keywords “true” and “false”.back-white...
LESS: Guarded mixins• Comparitors can be very useful• Eg. Code reuse between media types@media: mobile;.mixin (@a) when (@...
LESS: Type checking• iscolor           • isstring            • isurl• isnumber          • iskeyword.color-mixin (@a) when ...
LESS: Unit checking• ispixel      • ispercentage • isem.mixin (@a) when (ispixel(@a)) {}.mixin (@a) when (isem(@a)) {}.mix...
LESS: Colour Functionslighten(@color, 10%);     // return a color which is 10% *lighter* than @colordarken(@color, 10%);  ...
LESS: Math Functions       ceil      floor     round   percentage
LESS: Extract Colour Propertieshue(@color);saturation(@color);lightness(@color);alpha(@color);eg.@old-color:#27BA19;@new-c...
LESS: Embedding Strings• For those of you familiar with XSLT or Ruby• Use curly braces to embed the text• Use tilde ~ to e...
LESS: Javascripting!!!• Use backticks to embed your JS in the CSS• Escape strings, embed, interpolate, etc.• I haven’t pla...
LESS Elements•   .gradient              •   .rotation•   .bw-gradient           •   .scale•   .bordered              •   ....
LESS: PrecompilersLESS needs to be pre-compiled into CSS using… • simpless                              • less.app • lessp...
LESS: SIMPLESS•   SimpLESS compiles less into minified css•   works with Twitter bootstrap•   self-updates•   compiles on ...
LESS: SIMPLESSThis is what I do…1. I code my LESSS in a separate project2. I let SimpLESS monitor the local file to   comp...
LESS: Eclipse pluginI personally use the Xtext plugin – here are some               install instructions…   http://www.nor...
Useful links              LESS    http://www.lesscss.org           SimpLESShttp://wearekiss.com/simpless         LessEleme...
Upcoming SlideShare
Loading in...5
×

Doing More With Less

1,030

Published on

This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,030
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Doing More With Less"

  1. 1. Doing More With How a meta-language can help youtake control of your stylesheets andhelp improve your style productivity.
  2. 2. David Engel• UofM grad• .NET and PHP developer• Tipping Canoe alumnus• Experienced “backend” developer PHP, C#, C++, MySQL, TransactSQL, Sphinx• Relatively new to “frontend” development CSS, jQuery, LESS, UX, design
  3. 3. CSS Cascading Style Sheets• describes look & formatting of a document that has been created using markup• separate style and content• avoid specificity by harnessing the cascade
  4. 4. OOCSS Object Oriented CSS• separate structure and skin• separate container and content
  5. 5. OOCSS#button { #box { width: 100px; width: 200px; height: 25px; height: 400px; background: #ccc; background: #ccc; border: 1px solid #333; border: 1px solid #333; border-radius: 5px; border-radius: 5px;} }<a id="button" href="">blah</a><div id="box">blah</div>
  6. 6. OOCSSbecomes….button { .skin { width: 100px; background: #ccc; height: 25px; border: 1px solid #333;} border-radius: 5px;.box { } width: 200px; height: 400px;}<a class="button skin" href="">blah</a><div class="box skin">blah</div>
  7. 7. OOCSSUse classes for styling hooks!Use ids for behavioral hooks!
  8. 8. DRY CSS Don’t Repeat Yourself (Jeremy Clarke)1. Group reusable CSS properties together2. Use logical names for groups3. Add selectors (not a fan of ALL-CAPS)#WHITE-BACKGROUND,.large-white-background,.medium-white-background{ background-color: #fff; border-color: #bbb;}
  9. 9. DRY CSS What are we still missing?• Descendent selectors break OOCSS – so what? (the “OO” part of OOCSS is garbage anyways)• No variables• No mixins• No inheritance
  10. 10. LESS• variables • comparitors• mixins • type/unit checking• nesting • color functions• operations • math functions• functions • string embedding• switches • Namespaces• overloads • Javascripting!!!
  11. 11. LESS: Variables@maxim-green:#8dc63f;.color-green{ color:@maxim-green;}
  12. 12. LESS: Mixins• Gives us inheritance!.rounded-corners{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}#header { .rounded-corners;}
  13. 13. LESS: MixinsParametric mixins extend this functionality.rounded-corners (@radius) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners(5px);}
  14. 14. LESS: MixinsParametric mixins can also have default values.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners;}
  15. 15. LESS: Nesting Nesting gives us a kind of namespacing for specificity of inheritance#header { h1 { font-size: 26px; font-weight: bold; } p{ font-size: 12px; a{ text-decoration: none; &:hover { border-width: 1px } } }}
  16. 16. LESS: Nesting… and Scope@red : red;#header { @red: #BF2E1A; h1 {color: @red; // yields #BF2E1A }}h1 {color: @red; // yields red}
  17. 17. LESS: Operations• add, subtract, divide and multiply properties@red: # BF2E1A;@main-margin: 4px;#footer{ color: @red + #001100; margin-left: @main-margin * 3;}
  18. 18. LESS: FunctionsTake arguments into your mixins….box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @x @y @blur @color; -moz-box-shadow: @x @y @blur @color; -webkit-box-shadow: @x @y @blur @color;}.box-shadow(3px, 7px);
  19. 19. LESS: Functions…or use the @arguments variable to take it all!.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments;}.box-shadow(3px, 7px);
  20. 20. LESS: Imperative ProgrammingThis is a kind of switch (note the “all” selector)….color-mixin (dark, @color) { color: darken(@color, 10%);}.color-mixin (light, @color) { color: lighten(@color, 10%);}.color-mixin (@_, @color) { display: block;}
  21. 21. LESS: Imperative Programming…that we can call like so:@light-switch: light;@dark-switch: dark;.light-class { .color-mixin(@light-switch, #888);}.dark-class { .color-mixin(@dark-switch, #888);}
  22. 22. LESS: Overloads“Arity” for the geeks (and Java and .NET folks).fade-mixin (@a-color) { color: @a-color;}.fade-mixin (@a-color, @b-color) { color: fade(@a-color, @b-color);}#solid-color{ .fade-mixin(blue);}#faded-color{ .fade-mixin(blue, green);}
  23. 23. LESS: Guarded mixins• uses “when” and can use “and” “,” and “not”• can also use the keywords “true” and “false”.back-white{background-color:white;}.back-black{background-color:black;}.back-red{background-color:red;}.mixin (@a) when (@a > 10), (@a < -10){ .back-white;}.mixin (@a) when (@a = 10) and (@a = true){ .back-red;}.mixin (@a) when (@a < 11) and (@a > -11) and not(@a = 10){ .back-black;}
  24. 24. LESS: Guarded mixins• Comparitors can be very useful• Eg. Code reuse between media types@media: mobile;.mixin (@a) when (@media = mobile) { ... }.mixin (@a) when (@media = desktop) { ... }.mixin (@a) when (@media = print) { ... }
  25. 25. LESS: Type checking• iscolor • isstring • isurl• isnumber • iskeyword.color-mixin (@a) when (isnumber(@a)) { color: @a + #001100;}.color-mixin (@a) when (iscolor(@a)) { color: @a}h1{ .color-mixin(red);}h2{ .color-mixin(#842210);}
  26. 26. LESS: Unit checking• ispixel • ispercentage • isem.mixin (@a) when (ispixel(@a)) {}.mixin (@a) when (isem(@a)) {}.mixin (@a) when (ispercentage(@a)) {}
  27. 27. LESS: Colour Functionslighten(@color, 10%); // return a color which is 10% *lighter* than @colordarken(@color, 10%); // return a color which is 10% *darker* than @colorsaturate(@color, 10%); // return a color 10% *more* saturated than @colordesaturate(@color, 10%); // return a color 10% *less* saturated than @colorfadein(@color, 10%); // return a color 10% *less* transparent than @colorfadeout(@color, 10%); // return a color 10% *more* transparent than @colorfade(@color, 50%); // return @color with 50% transparencyspin(@color, 10); // return a color with a 10 degree larger in hue than @colorspin(@color, -10); // return a color with a 10 degree smaller hue than @colormix(@color1, @color2); // return a mix of @color1 and @color2
  28. 28. LESS: Math Functions ceil floor round percentage
  29. 29. LESS: Extract Colour Propertieshue(@color);saturation(@color);lightness(@color);alpha(@color);eg.@old-color:#27BA19;@new-color: hsl(hue(@old-color), 45%, 90%);
  30. 30. LESS: Embedding Strings• For those of you familiar with XSLT or Ruby• Use curly braces to embed the text• Use tilde ~ to escape strings that require quotes @base-url: "http://www.maximinc.com/"; @green-color: #8dc63f; #header{ background: @ green-color url("@{base-url}images/img.png"); } #footer{ filter: ~"alpha(opacity = (@{opacityPercentage}))"; }
  31. 31. LESS: Javascripting!!!• Use backticks to embed your JS in the CSS• Escape strings, embed, interpolate, etc.• I haven’t played with this feature yet, but here’s an untested example: @var1: `"LESS ".toLowerCase()`; @var2: `"ooooooh".toUpperCase() + !`; @var3: ~`"@{var1: }" + "@{var2: }" + !`;
  32. 32. LESS Elements• .gradient • .rotation• .bw-gradient • .scale• .bordered • .transition• .drop-shadow • .inner-shadow• .rounded • .box-shadow• .border-radius • .columns• .opacity • .translate• .transition-duration
  33. 33. LESS: PrecompilersLESS needs to be pre-compiled into CSS using… • simpless • less.app • lessphp • …others ORto compile on the fly while developing use…<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>
  34. 34. LESS: SIMPLESS• SimpLESS compiles less into minified css• works with Twitter bootstrap• self-updates• compiles on the fly (monitored polling)• multi-platform• free• open source
  35. 35. LESS: SIMPLESSThis is what I do…1. I code my LESSS in a separate project2. I let SimpLESS monitor the local file to compile CSS on the fly3. I commit minified CSS to my main project4. I reference the minified CSS using with the SVN version tagged on in my html<link media="screen" href=http://www.example.com/css/style.min.css?1994 type="text/css" rel="stylesheet“>
  36. 36. LESS: Eclipse pluginI personally use the Xtext plugin – here are some install instructions… http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.htmlYou can use the LESS compiler inEclipse, however I manage all my compilationexternally as I also use LESS with .NET andClassic ASP code (yes!)
  37. 37. Useful links LESS http://www.lesscss.org SimpLESShttp://wearekiss.com/simpless LessElements http://lesselements.com Winnipeg PHP http://winnipegphp.com Tipping Canoehttp://www.tippingcanoe.com David Engel davidengel.dev@gmail.com (developed using LESS) http://www.maximinc.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×