• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Doing More With Less
 

Doing More With Less

on

  • 808 views

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.

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.

Statistics

Views

Total Views
808
Views on SlideShare
808
Embed Views
0

Actions

Likes
1
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

    Doing More With Less Doing More With Less Presentation Transcript

    • 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, C#, C++, MySQL, TransactSQL, Sphinx• Relatively new to “frontend” development CSS, jQuery, LESS, UX, design
    • 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
    • OOCSS Object Oriented CSS• separate structure and skin• separate container and content
    • 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>
    • 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>
    • 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. Add selectors (not a fan of ALL-CAPS)#WHITE-BACKGROUND,.large-white-background,.medium-white-background{ background-color: #fff; border-color: #bbb;}
    • 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
    • LESS• variables • comparitors• mixins • type/unit checking• nesting • color functions• operations • math functions• functions • string embedding• switches • Namespaces• overloads • Javascripting!!!
    • 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: 5px;}#header { .rounded-corners;}
    • LESS: MixinsParametric mixins extend this functionality.rounded-corners (@radius) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners(5px);}
    • 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;}
    • 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 } } }}
    • LESS: Nesting… and Scope@red : red;#header { @red: #BF2E1A; h1 {color: @red; // yields #BF2E1A }}h1 {color: @red; // yields red}
    • LESS: Operations• add, subtract, divide and multiply properties@red: # BF2E1A;@main-margin: 4px;#footer{ color: @red + #001100; margin-left: @main-margin * 3;}
    • 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);
    • 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);
    • 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;}
    • 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);}
    • 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);}
    • 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;}
    • 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) { ... }
    • 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);}
    • LESS: Unit checking• ispixel • ispercentage • isem.mixin (@a) when (ispixel(@a)) {}.mixin (@a) when (isem(@a)) {}.mixin (@a) when (ispercentage(@a)) {}
    • 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
    • LESS: Math Functions ceil floor round percentage
    • LESS: Extract Colour Propertieshue(@color);saturation(@color);lightness(@color);alpha(@color);eg.@old-color:#27BA19;@new-color: hsl(hue(@old-color), 45%, 90%);
    • 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}))"; }
    • 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: }" + !`;
    • LESS Elements• .gradient • .rotation• .bw-gradient • .scale• .bordered • .transition• .drop-shadow • .inner-shadow• .rounded • .box-shadow• .border-radius • .columns• .opacity • .translate• .transition-duration
    • 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>
    • 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
    • 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“>
    • 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!)
    • 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