Your SlideShare is downloading. ×
  • Like
Do more with {less}
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Do more with {less}

  • 3,371 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,371
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
124
Comments
1
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Do more with {less}
  • 2. This session
  • 3. Goal #1:Show you why you shoulduse {less}
  • 4. Goal #2:Teach you {less} in30 minutes
  • 5. There will be code
  • 6. {less} to keep us sane
  • 7. You don’t need notes
  • 8. About meJesper Wøldiche RahkonenDesigner / themer / markup marine*really* likes gridstwitter: woeldiche
  • 9. OverviewWhat What is {less}WhyFeaturesLearn {less}DrupalExtras
  • 10. OverviewWhat What is {less}WhyFeaturesLearn {less}DrupalExtras
  • 11. OverviewWhatWhy Why you should be using {less}FeaturesLearn {less}DrupalExtras
  • 12. OverviewWhatWhyFeatures An overview of the features in {less}Learn {less}DrupalExtras
  • 13. OverviewWhatWhyFeaturesLearn {less} I’ll teach you {less}, hopefullyDrupalExtras
  • 14. OverviewWhatWhyFeaturesLearn {less}Drupal Using {less} in drupalExtras
  • 15. OverviewWhatWhyFeaturesLearn {less}DrupalExtras Yummy extras, if time
  • 16. What is {less}?
  • 17. {less} extends css with newfeatures
  • 18. Compiles into ordinary(but yummy, yummy) CSS
  • 19. A strict superset of CSS
  • 20. Why use {less}?
  • 21. Why?Write less code
  • 22. Why?Write less code,that’s faster to code up
  • 23. Why?Write less code,that’s faster to code up,easier (cheaper) to maintain
  • 24. Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a project
  • 25. Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a projector among several projects
  • 26. And it’s dead-easyto learn, if you alreadyknow CSS- honestly!
  • 27. Feature overview
  • 28. Feature overviewVariables (yay!)
  • 29. Feature overviewVariablesMixins (it’ll make sense, promise)
  • 30. Feature overviewVariablesMixinsNested rules (for prettier code)
  • 31. Feature overviewVariablesMixinsNested rulesOperations (it’s almost like programming)
  • 32. Feature overviewVariablesMixinsNested rulesOperationsColor functions (Want channels with your HSL?)
  • 33. Feature overviewVariablesMixinsNested rulesOperationsColor functions+ more
  • 34. Variables
  • 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. Mixins
  • 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. 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. MixinsAny css class, id og element definition can bemixed in
  • 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. 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. meh...
  • 43. meh...
  • 44. Parametric mixinsNow we’re talking.They should be spelled paramëtric mixinsand have a theme song.
  • 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. 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. 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. 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. Case: Variable griddesignshack.co.uk/articles/css/introducing-the-less-css-grid
  • 50. Case: Style library
  • 51. @import// Import .less1 @import “lib.less”;2 @import “lib2”;// Import without processing3 @import “lib.css”;
  • 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. 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. Operations
  • 55. Any number, colour or valuecan be operated on
  • 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. {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. 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. Colour operations
  • 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. Huh?Colors are first converted to theHSL color-spaceAnd then manipulated at the channel level
  • 62. Nested rules
  • 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. 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. &-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. {less} and Drupal™
  • 67. Three ways to play itThe easy way inThe performance concious solutionThe advanced version
  • 68. The easy way in
  • 69. LESS moduleAutomatically compiles .less files in the theme toplain css
  • 70. LESS moduleAutomatically compiles .less files in the theme toplain cssDevelopment mode
  • 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. Performance concious?
  • 73. Compile locallyFrom the command line$ lessc styles.less > styles.cssCompiles to stdout
  • 74. less.app‘The only thing easier is making fun of InternetExplorer’
  • 75. I’m {more} advanced
  • 76. Compile clientside withless.js
  • 77. Access JS enviroment1 @height: `document.body.clientHeight`;
  • 78. Progressive enhancementBuild on top of css/less compiled serverside,right?
  • 79. Yummy extras
  • 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. 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. 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. String interpolationEmbed variables in strings withthe @{param} construct1 @base-url: “http://assets.fnord.com”;2 background-image: url(“@{base-url}/images/bg.png”);
  • 84. JS Evaluation1 @var: `”hello”.toUpperCase() + ‘!’`;Becomes2 @var: “HELLO!”;
  • 85. Questions?
  • 86. Thank you!
  • 87. Slides & docs{less} documentation: lesscss.orgSlides: slideshare.net/woeldicheLess module: drupal.org/project/lessless.app: incident57.com/less/