As part of using new functionality, web designers or developers will always want to know how well it works with existing functionality. After all, there is no point trying to sell the need to spend lots of money on licensing a package that does everything you need if it doesn't behave well with other software!
In this exercise we're going to take a look at how you could use LESS in conjunction with other packages, using the Modernizr library as our example.
For this exercise all you will need is your trusty text editor, a photo (preferably in PNG format), and a copy of the elements.less mixin you downloaded earlier in this chapter. It doesn't matter what the subject of the photo is, I will assume for the purpose of this recipe that it is called photo.png and is 200 px by 300 px in size. I've used the spiral staircase image available from http://pixabay.com/en/spiral-staircase-stairs-58328/, and have resized it accordingly.
- Crack open the text editor of your choice, add the following lines of code to a new document, and save it as
test less compatibility.html:<!DOCTYPE html> <html lang="en" dir="ltr" id="ala-modernizr-sample" class="no-js"> <head> <meta charset="utf-8"> <title>My Beautiful Sample Page</title> <link href='http://fonts.googleapis.com/css?family=Devonshire' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="styles.css" media="screen"> <link rel="stylesheet/less" type="text/css" href="compatibility.less"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> </head> <body> <div id="content"> <h1>My Beautiful Sample Page</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend sem id ipsum luctus eu semper quam lacinia. Nunc ut arcu non sapien adipiscing scelerisque non vel quam. Ut porttitor, augue nec suscipit congue, turpis nulla faucibus enim, sit amet consectetur erat enim vitae dolor.</p> <section> <h2>Modernizr</h2> <p>Ut sed arcu at tortor ornare pulvinar vel nec nisl. Cras venenatis tortor turpis, eu pulvinar enim. Aenean eget lorem mi. Aenean malesuada fermentum lobortis. Vestibulum vulputate tortor nisi, elementum tincidunt libero. Fusce et massa id dui tristique mollis eu consequat urna.</p> <img src="photo.png" width="200" height="300" alt="Photo of steps"> </section> <p>This is a random list:</p> <ol> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Aenean congue condimentum risus, id mattis magna tincidunt at.</li> <li>Mauris sollicitudin nunc a nibh tempor ac interdum diam iaculis.</li> <li>Nunc pharetra mauris eget mi congue pellentesque.</li> <li>Ut ac nulla mi, in tincidunt neque.</li> </ol> </div> <footer>This is a test</footer></body> </html> - Create a new blank document, add the following lines of code, and save it as
compatibility.less. Make sure you have your copy ofelements.lessin the same folder as your exercise files:@import "elements.less"; @activelink: #e33a89; @linkcolor: #941350; .boxshadow section img { .box-shadow(0 0 3px #000); } .csstransforms section img { position: relative; top: 20px; .rotation(5deg); } .boxshadow #content { border: none; .box-shadow(3px 3px 6px rgba(0,0,0, .5)); } .borderradius #content { .rounded(12px); } a { &:link { color: @linkcolor; font-weight: bold; } &:visited { color: @linkcolor; font-weight: bold; } &:focus { color: @activelink; text-decoration: none; } &:hover { color: @activelink; text-decoration: none; } } #content h1+p { margin: 20px 0; &:first-line { font-weight: bold; font-variant: small-caps; } } .no-csscolumns ol.features { float: left; margin: 0 0 20px; li { float: left; width: 180px; } } .js section { float: none; position: absolute; right: 40px; top: 40px; p { font-size: 11px; line-height: 16px; } h1 { line-height: 50px; } } section { float: right; text-align: justify; width: 200px; } h2 { margin: 0; height: 70px; text-indent: -9999px; width: 200px; } p, li { font-size: 12px; line-height: 16px; margin: 0 0 30px; padding: 0 30px 0 0; width: 200px; } } - We need to add some more styles, create a new document, add the following lines of code, and save it as
styles.css:body { -webkit-text-stroke:1px transparent; } @media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}} html, body { background: #5a71a0; color: #141414; font: normal 14px/20px Helvetica, Verdana, Arial, sans-serif; margin: 0; padding: 0; text-align: center; } img { vertical-align: bottom; } #content { background: #fafafa; border: 2px outset #666; margin: 20px auto 10px; padding: 40px 40px 20px; text-align: left; width: 500px; } h1 { color: #2e384d; font: 37px/37px 'Devonshire'; margin: 0; text-shadow: #aaa 5px 5px 5px; } ol.features { font-size: 12px; line-height: 18px; list-style: none; margin: 0; padding: 0; } footer { font-size: 11px; font-style: oblique; a { font-style: normal; } } .js #content { padding-right: 280px; position: relative; width: 290px; } .rgba h1 { text-shadow: ) 5px 5px 5px rgba(148,19,80, .3; } @font-face { src: url(Beautiful-ES.ttf); font-family: 'Beautiful'; } .fontface h1 { font: 42px/50px 'Devonshire'; margin: 0; text-shadow: none; } .csscolumns ol.features { columns: 2; -o-columns: 2; -moz-column-count: 2; -webkit-columns: 2; } - If you preview the results in your browser, you will see something like the following screenshot:
In this recipe I've used a demo created by Faruk Ates, which shows how to incorporate Modernizr into your site (if you want to see the original, it's available at http://www.alistapart.com/d/taking-advantage-of-html5-and-css3-with-modernizr/sample-medium.html), and I've reworked it to use LESS to build the CSS dynamically.
If you've not used Modernizr before, then key to Modernizr is its ability to work out if it supports a particular feature, and not the version of the browser being used. The latter is open to being unreliable. It inserts CSS styles which are then used to indicate if a feature is supported; it adds a no- tag to each style if it is not supported in your browser.
In our recipe I've converted a number of styles into LESS equivalents and hived them off to a separate file in our code; keeping them in the same stylesheet as the other CSS styles would have confused Modernizr and LESS. If you look closely at the compiled code in something like Firebug, you will see there are some styles there for features that are not supported, such as no-cssreflections. For those styles that are required, but are not supported, fallback styles have been included in the CSS and/or LESS files. If you want to see the difference, try viewing the same page within Firefox and IE and you will see a real difference!
The beauty of LESS is that it creates standard CSS styles when compiled. This means that it could be used in a variety of environments; if it doesn't work, or the site is too big, when used dynamically, you can always precompile the code using something like Crunch and add the resulting CSS files manually. There is an array of other libraries which could be used with LESS. To whet your appetite, here are a few:
- Yepnope.js (http://www.yepnopejs.com): This is often used with Modernizr; it's a basic way to determine support for a feature in your browser and decide whether to use the normal support or a fallback version.
- Prefixr.com (http://www.prefixr.com): Although there are mixins available to support most of what is offered by this site (such as http://css-tricks.com/snippets/css/useful-css3-less-mixins/), you could still use it to ensure mixins are kept up-to-date with changing styles.
- 320 and Up: This is billed as the tiny screen first responsive boilerplate; this uses LESS mixins to help reduce the style code required within the system. It's available at http://stuffandnonsense.co.uk/projects/320andup/.
- Bootstrap: This is available at https://github.com/twitter/bootstrap; it's a frontend toolkit which contains a number of user interface components and interactions. It uses LESS extensively, principally in the form of mixins that are available for use in the library.
- Respond.js: This polyfill library is available to download from https://github.com/scottjehl/Respond/, and provides CSS3-based media enquiry support for browsers that don't support them by default as part of building responsive sites. You may have to compile your LESS code first before including the
Respond.jslibrary. - Fraction.less: This is a boilerplate system available at http://fractionless.info/; it was based on HTML5 Boilerplate but adds support for LESS while removing some of the bloat from the original version.
- Node.js: We've already touched on this earlier in this chapter briefly; Node.js (available from http://www.nodejs.org), is perfect as part of adding support for LESS and other libraries to text editors such as Sublime Text 2 (http://www.sublimetext.com) or Notepad++ (http://www.notepad-plus-plus.org/).
There are plenty more available online—happy hunting! In the meantime, let's turn our focus to using prebuilt mixin libraries and see how you can use these within your code as part of the next recipe.