• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Do more with {less}
 

Do more with {less}

on

  • 3,553 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,553
Views on SlideShare
3,511
Embed Views
42

Actions

Likes
11
Downloads
119
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

11 of 1 previous next

  • 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/