Here is a presentation I did that is an overview of the LESS preprocessor. If you’ve been thinking about using a CSS preprocessor and are curios about how LESS works, this is worth a look. It goes over the basic features of LESS including code samples. This talk does not cover Sass nor Stylus which are the other 2 CSS preprocessors out there.
You can also view this presentaion on SlideShare.
I’m sharing the slides from my talk at South Bay Mobile User Group this week hosted at Honda on Responsive Web Design.
Responsive Websites on SlideShare. A quick introduction to developing responsive websites including best practices, testing tools, and a sample project by Joe Seifi
You can also download and play with the code for this presentation on Github at
The sample code uses LESS to make calculations easier in flexible layouts.
You can start the app with Node.js very simply. From the root folder just run > node app.js and browse to http://localhost:3000
For a more detailed step by step approach, go to http://localhost:3000/html/
Here’s a trick you can use when you want the printed version of a webpage to include the background images you have in your CSS.
First of all you’ll want to have a specific print css file that targets the print media type. You can easily create one and include it within the head.
Then you will override the container which hosts your background image in the print style file and change the display style of the element to list-item and attach the background image here again as a list-style-image. To make sure you don’t need to deal with margin or padding issues, you’ll also place the image inside your mock list.
I’ve tested and verified this method in the latest versions of Safari, Chrome, Internet Explorer, and FireFox. Please let me know if you find any inconsistencies during your testing.
Here’s the sample code:
Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<div class="bg print"></div>
Here is the background image called in your main css file used in browsers.
background: url("http://fpoimg.com/250x250") top left no-repeat;
And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.
Note: You can also use the @media rule instead of importing files if you want to avoid making an extra http request.