1 / 37

Doing More With

Doing More With. How a meta-language can help you take control of your stylesheets and help improve your style productivity. David Engel. UofM grad .NET and PHP developer Tipping Canoe alumnus Experienced “backend” developer PHP, C#, C++, MySQL, TransactSQL , Sphinx

alka
Download Presentation

Doing More With

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Doing More With How a meta-language can help you take control of your stylesheets and help 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 { width: 100px; height: 25px; background: #ccc; border: 1px solid #333; border-radius: 5px; } #box { width: 200px; height: 400px; background: #ccc; border: 1px solid #333; border-radius: 5px; } <a id="button" href="">blah</a> <div id="box">blah</div>

  6. OOCSS becomes… .button { width: 100px; height: 25px; } .box { width: 200px; height: 400px; } .skin { background: #ccc; border: 1px solid #333; border-radius: 5px; } <a class="button skin" href="">blah</a> <div class="box skin">blah</div>

  7. OOCSS Use classes for styling hooks! Use ids for behavioral hooks!

  8. DRY CSS Don’t Repeat Yourself (Jeremy Clarke) • Group reusable CSS properties together • Use logical names for groups • 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 • mixins • nesting • operations • functions • switches • overloads • comparitors • type/unit checking • color functions • math functions • string embedding • Namespaces • Javascripting!!!

  11. LESS: Variables @maxim-green:#8dc63f; .color-green{ color:@maxim-green; }

  12. LESS: Mixins .rounded-corners{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #header { .rounded-corners; } • Gives us inheritance!

  13. LESS: Mixins .rounded-corners (@radius) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners(5px); } Parametric mixins extend this functionality

  14. LESS: Mixins .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } Parametric mixins can also have default values

  15. LESS: Nesting #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } Nesting gives us a kind of namespacing for specificity of inheritance

  16. LESS: Nesting @red : red; #header { @red: #BF2E1A; h1 {color: @red; // yields #BF2E1A } } h1 {color: @red; // yields red } … and Scope

  17. LESS: Operations @red: # BF2E1A; @main-margin: 4px; #footer{ color: @red + #001100; margin-left: @main-margin * 3; } • add, subtract, divide and multiply properties

  18. LESS: Functions .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); Take arguments into your mixins…

  19. LESS: Functions .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); …or use the @arguments variable to take it all!

  20. LESS: Imperative Programming .color-mixin (dark, @color) { color: darken(@color, 10%); } .color-mixin (light, @color) { color: lighten(@color, 10%); } .color-mixin (@_, @color) { display: block; } This is a kind of switch (note the “all” selector)…

  21. LESS: Imperative Programming @light-switch: light; @dark-switch: dark; .light-class { .color-mixin(@light-switch, #888); } .dark-class { .color-mixin(@dark-switch, #888); } …that we can call like so:

  22. LESS: Overloads .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); } “Arity” for the geeks (and Java and .NET folks)

  23. LESS: Guarded mixins .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;} • uses “when” and can use “and” “,” and “not” • can also use the keywords “true” and “false”

  24. LESS: Guarded mixins @media: mobile; .mixin (@a) when (@media = mobile) { ... } .mixin (@a) when (@media = desktop) { ... } .mixin (@a) when (@media = print) { ... } • Comparitors can be very useful • Eg. Code reuse between media types

  25. LESS: Type checking .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);} • iscolor • isnumber • isstring • iskeyword • isurl

  26. LESS: Unit checking .mixin (@a) when (ispixel(@a)) {} .mixin (@a) when (isem(@a)) {} .mixin (@a) when (ispercentage(@a)) {} • ispixel • ispercentage • isem

  27. LESS: Colour Functions lighten(@color, 10%); // return a color which is 10% *lighter* than @color darken(@color, 10%); // return a color which is 10% *darker* than @color saturate(@color, 10%); // return a color 10% *more* saturated than @color desaturate(@color, 10%); // return a color 10% *less* saturated than @color fadein(@color, 10%); // return a color 10% *less* transparent than @color fadeout(@color, 10%); // return a color 10% *more* transparent than @color fade(@color, 50%); // return @color with 50% transparency spin(@color, 10); // return a color with a 10 degree larger in hue than @color spin(@color, -10); // return a color with a 10 degree smaller hue than @color mix(@color1, @color2); // return a mix of @color1 and @color2

  28. LESS: Math Functions ceil floor round percentage

  29. LESS: Extract Colour Properties hue(@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 • .bw-gradient • .bordered • .drop-shadow • .rounded • .border-radius • .opacity • .transition-duration • .rotation • .scale • .transition • .inner-shadow • .box-shadow • .columns • .translate

  33. LESS: Precompilers LESS needs to be pre-compiled into CSS using… OR to compile on the fly while developing use… • simpless • lessphp • less.app • …others <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: SIMPLESS This is what I do… • I code my LESSS in a separate project • I let SimpLESS monitor the local file to compile CSS on the fly • I commit minified CSS to my main project • 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 plugin I personally use the Xtext plugin – here are some install instructions… http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.html You can use the LESS compiler in Eclipse, however I manage all my compilation externally as I also use LESS with .NET and Classic ASP code (yes!)

  37. Useful links LESS http://www.lesscss.org SimpLESS http://wearekiss.com/simpless LessElements http://lesselements.com Winnipeg PHP http://winnipegphp.com Tipping Canoe http://www.tippingcanoe.com David Engel davidengel.dev@gmail.com (developed using LESS) http://www.maximinc.com

More Related