Do more with {less}
Upcoming SlideShare
Loading in...5
×
 

Do more with {less}

on

  • 3,710 views

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.

Statistics

Views

Total Views
3,710
Views on SlideShare
3,668
Embed Views
42

Actions

Likes
11
Downloads
121
Comments
1

4 Embeds 42

http://lanyrd.com 19
http://localhost 16
http://www.linkedin.com 5
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Do more with {less} Do more with {less} Presentation Transcript

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