Doing More With Less

  • 861 views
Uploaded on

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
861
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

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. Doing More With How a meta-language can help youtake control of your stylesheets andhelp improve your style productivity.
  • 2. 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
  • 3. 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
  • 4. OOCSS Object Oriented CSS• separate structure and skin• separate container and content
  • 5. 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>
  • 6. 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>
  • 7. OOCSSUse classes for styling hooks!Use ids for behavioral hooks!
  • 8. 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;}
  • 9. 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
  • 10. LESS• variables • comparitors• mixins • type/unit checking• nesting • color functions• operations • math functions• functions • string embedding• switches • Namespaces• overloads • Javascripting!!!
  • 11. LESS: Variables@maxim-green:#8dc63f;.color-green{ color:@maxim-green;}
  • 12. LESS: Mixins• Gives us inheritance!.rounded-corners{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}#header { .rounded-corners;}
  • 13. LESS: MixinsParametric mixins extend this functionality.rounded-corners (@radius) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners(5px);}
  • 14. 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;}
  • 15. 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 } } }}
  • 16. LESS: Nesting… and Scope@red : red;#header { @red: #BF2E1A; h1 {color: @red; // yields #BF2E1A }}h1 {color: @red; // yields red}
  • 17. LESS: Operations• add, subtract, divide and multiply properties@red: # BF2E1A;@main-margin: 4px;#footer{ color: @red + #001100; margin-left: @main-margin * 3;}
  • 18. 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);
  • 19. 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);
  • 20. 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;}
  • 21. 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);}
  • 22. 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);}
  • 23. 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;}
  • 24. 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) { ... }
  • 25. 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);}
  • 26. LESS: Unit checking• ispixel • ispercentage • isem.mixin (@a) when (ispixel(@a)) {}.mixin (@a) when (isem(@a)) {}.mixin (@a) when (ispercentage(@a)) {}
  • 27. 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
  • 28. LESS: Math Functions ceil floor round percentage
  • 29. LESS: Extract Colour Propertieshue(@color);saturation(@color);lightness(@color);alpha(@color);eg.@old-color:#27BA19;@new-color: hsl(hue(@old-color), 45%, 90%);
  • 30. 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}))"; }
  • 31. 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: }" + !`;
  • 32. LESS Elements• .gradient • .rotation• .bw-gradient • .scale• .bordered • .transition• .drop-shadow • .inner-shadow• .rounded • .box-shadow• .border-radius • .columns• .opacity • .translate• .transition-duration
  • 33. 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>
  • 34. 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
  • 35. 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“>
  • 36. 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!)
  • 37. 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