Do more with {less}

4,704 views

Published on

Subject: An overview of {less} and a crash course in usage, presented at the Drupal Design Camp Berlin 2011.

Note: Licensed All Rights Reserved due to the images taken by others. All text is CC Attribution Share-alike.

Published in: Technology, Education
1 Comment
13 Likes
Statistics
Notes
No Downloads
Views
Total views
4,704
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
151
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

Do more with {less}

  1. 1. Do more with {less}
  2. 2. This session
  3. 3. Goal #1:Show you why you shoulduse {less}
  4. 4. Goal #2:Teach you {less} in30 minutes
  5. 5. There will be code
  6. 6. {less} to keep us sane
  7. 7. You don’t need notes
  8. 8. About meJesper Wøldiche RahkonenDesigner / themer / markup marine*really* likes gridstwitter: woeldiche
  9. 9. OverviewWhat What is {less}WhyFeaturesLearn {less}DrupalExtras
  10. 10. OverviewWhat What is {less}WhyFeaturesLearn {less}DrupalExtras
  11. 11. OverviewWhatWhy Why you should be using {less}FeaturesLearn {less}DrupalExtras
  12. 12. OverviewWhatWhyFeatures An overview of the features in {less}Learn {less}DrupalExtras
  13. 13. OverviewWhatWhyFeaturesLearn {less} I’ll teach you {less}, hopefullyDrupalExtras
  14. 14. OverviewWhatWhyFeaturesLearn {less}Drupal Using {less} in drupalExtras
  15. 15. OverviewWhatWhyFeaturesLearn {less}DrupalExtras Yummy extras, if time
  16. 16. What is {less}?
  17. 17. {less} extends css with newfeatures
  18. 18. Compiles into ordinary(but yummy, yummy) CSS
  19. 19. A strict superset of CSS
  20. 20. Why use {less}?
  21. 21. Why?Write less code
  22. 22. Why?Write less code,that’s faster to code up
  23. 23. Why?Write less code,that’s faster to code up,easier (cheaper) to maintain
  24. 24. Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a project
  25. 25. Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a projector among several projects
  26. 26. And it’s dead-easyto learn, if you alreadyknow CSS- honestly!
  27. 27. Feature overview
  28. 28. Feature overviewVariables (yay!)
  29. 29. Feature overviewVariablesMixins (it’ll make sense, promise)
  30. 30. Feature overviewVariablesMixinsNested rules (for prettier code)
  31. 31. Feature overviewVariablesMixinsNested rulesOperations (it’s almost like programming)
  32. 32. Feature overviewVariablesMixinsNested rulesOperationsColor functions (Want channels with your HSL?)
  33. 33. Feature overviewVariablesMixinsNested rulesOperationsColor functions+ more
  34. 34. Variables
  35. 35. Variables1 // LESS 12 /* Compiled CSS */2 @color: #4D926F; 13 #header {3 14 color: #4D926F;4 #header { 15 }5 color: @color; 166 } 17 h2 {7 18 color: #4D926F;8 h2 { 19 }9 color: @color;10 }11
  36. 36. Mixins
  37. 37. Mixins// LESS1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }56 #menu a {7 color: #111;8 .bordered;9 }10 .post a {11 color: red;12 .bordered;13 }
  38. 38. Mixins/* Compiled CSS */1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }56 #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 }
  39. 39. MixinsAny css class, id og element definition can bemixed in
  40. 40. Case: reusable stylesDefine once. Use multiple time1 .awesome-styling { <awesome css go here> }23 .funky-box {4 .awesome-styling5 }67 .even funkier box {8 .awesome-styling9 <additional superfunky styling>10 }
  41. 41. Case: hard to rememberhacks workarounds1 .obscure-msie-hack {2 <illogical, esoteric code>3 }45 .content-that-works-in-any-other-browser {6 <styling>7 .obscure-msie-hack8 }
  42. 42. meh...
  43. 43. meh...
  44. 44. Parametric mixinsNow we’re talking.They should be spelled paramëtric mixinsand have a theme song.
  45. 45. Paramëtric mixins// LESS1 .rounded-corners (@radius: 5px) {2 -webkit-border-radius: @radius;3 -moz-border-radius: @radius;4 border-radius: @radius;5 }67 #header {8 .rounded-corners;9 }10 #footer {11 .rounded-corners(10px);12 }
  46. 46. Paramëtric mixins/* Compiled CSS */1 #header {2 border-radius: 5px;3 -webkit-border-radius: 5px;4 -moz-border-radius: 5px;5 }67 #footer {8 border-radius: 10px;9 -webkit-border-radius: 10px;10 -moz-border-radius: 10px;11 }
  47. 47. Case: Vendor prefixesDefine once1 .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 thrice9 body { .opacity(0.8) }10 .fancy-box { .opacity(0.4) }11 .see-through-footer { .opacity }
  48. 48. Case: Vendor prefixesDefine once1 .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 thrice9 body { .opacity(0.8) }10 .fancy-box { .opacity(0.4) }11 .see-through-footer { .opacity }
  49. 49. Case: Variable griddesignshack.co.uk/articles/css/introducing-the-less-css-grid
  50. 50. Case: Style library
  51. 51. @import// Import .less1 @import “lib.less”;2 @import “lib2”;// Import without processing3 @import “lib.css”;
  52. 52. A style library// LESS1 // Import libraries 16 form {2 @import “lib-typography”; 17 .lib_form-base3 @import “lib-branding.less”; 18 .lib_form-modern4 @import “lib-form_ui.less”; 19 ... your custom styles5 @import “lib-buttons.less”; 20 }6 217 /* Import base styling */ 22 input[type=text],8 @import “reset.css”; 23 textarea {9 @import “typography.css”; 24 .lib_form-input-modern10 25 ... more custom styles11 /* Apply library styles */ 26 }12 body {13 .lib_ty-base14 .lib_brand-base15 }
  53. 53. A style library/* Compiled CSS */1 <content of reset.css> 14 input[type=text],2 <content of typography.css> 15 textarea {3 16 <styles of lib_form-input-4 /* Apply library styles */ modern>5 body { 17 ... more custom styling6 <styles of lib_ty-base> 18 }7 <styles of lib_brand-base>8 }9 form {10 <styles of lib_form-base>11 <styles of lib_form-modrn>12 ... your custom styles13 }
  54. 54. Operations
  55. 55. Any number, colour or valuecan be operated on
  56. 56. Operations// LESS1 @base: 5%;2 @filler: @base * 2;3 @other: @base + @filler;45 color: #888 / 4;6 background-color: @base-color + #111;7 height: 100% / 2 + @filler;
  57. 57. {less} tells colours from units// LESS1 @var: 1px + 5;23 // You can use brackets4 width: (@var + 5) * 2;56 // Required for compound values7 border: (@width / 11) solid black;/* Compiled CSS */8 width: 22px;9 border: 2px solid black;
  58. 58. Case: Derived styling// LESS1 @fontsize-default: 14px;2 @fontsize-sec: @fontsize-default * 0.8;3 @lineheight: 1.3;45 p {6 font-size: @fontsize-default;7 line-height: @lineheight * @fontsize-default;8 }910 .block p {11 font-size: @fontsize-sec;12 line-height: @lineheight * @fontsize-sec;13 }
  59. 59. Colour operations
  60. 60. Colour operations1 lighten(@color, 10%); // a color 10% *lighter*2 darken(@color, 10%); // a color 10% *darker*34 saturate(@color, 10%); // a color 10% *more* saturated5 desaturate(@color, 10%); // a color 10% *less* saturated67 fadein(@color, 10%); // a color 10% *less* transparent8 fadeout(@color, 10%); // a color 10% *more* transparent910 spin(@color, -10%); // return a color with a 10 degree larger in hue than @color11 spin(@color, 10%); // return a color with a 10 degree smaller hue than @color
  61. 61. Huh?Colors are first converted to theHSL color-spaceAnd then manipulated at the channel level
  62. 62. Nested rules
  63. 63. Nesting/* 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 }
  64. 64. Nesting// LESS1 #header {2 color: black;34 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }
  65. 65. &-operator// LESS1 #header {2 color: black;34 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }
  66. 66. {less} and Drupal™
  67. 67. Three ways to play itThe easy way inThe performance concious solutionThe advanced version
  68. 68. The easy way in
  69. 69. LESS moduleAutomatically compiles .less files in the theme toplain css
  70. 70. LESS moduleAutomatically compiles .less files in the theme toplain cssDevelopment mode
  71. 71. LESS moduleAutomatically compiles .less files in the theme toplain cssDevelopment modemylesstheme.info:1 ;----- Stylesheets ----------------------------2 stylesheets[screen][] = styles/mylesstheme.styles.less3 stylesheets[screen][] = styles/mylesstheme.typography.less45 ;----- IE specific stylesheets ---------------6 ie stylesheets[if IE 7][all][] = styles/mylesstheme.ie7.less
  72. 72. Performance concious?
  73. 73. Compile locallyFrom the command line$ lessc styles.less > styles.cssCompiles to stdout
  74. 74. less.app‘The only thing easier is making fun of InternetExplorer’
  75. 75. I’m {more} advanced
  76. 76. Compile clientside withless.js
  77. 77. Access JS enviroment1 @height: `document.body.clientHeight`;
  78. 78. Progressive enhancementBuild on top of css/less compiled serverside,right?
  79. 79. Yummy extras
  80. 80. Escaping strings// LESS1 .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 }
  81. 81. Namespaces1 #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 }1112 #header a {13 color: orange;14 #bundle > .button;15 }
  82. 82. Namespaces1 #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 }1112 #header a {13 color: orange;14 #bundle > .button;15 }
  83. 83. String interpolationEmbed variables in strings withthe @{param} construct1 @base-url: “http://assets.fnord.com”;2 background-image: url(“@{base-url}/images/bg.png”);
  84. 84. JS Evaluation1 @var: `”hello”.toUpperCase() + ‘!’`;Becomes2 @var: “HELLO!”;
  85. 85. Questions?
  86. 86. Thank you!
  87. 87. Slides & docs{less} documentation: lesscss.orgSlides: slideshare.net/woeldicheLess module: drupal.org/project/lessless.app: incident57.com/less/

×