LESS – an overview of the CSS preprocessor

Written on June 25th, 2013 By Joe Seifi (tags: css, design) 0 comments

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.

Responsive Website Design – Presentation and Demo Project

Written on September 5th, 2012 By Joe Seifi (tags: css, design, responsive) 0 comments

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
https://github.com/joeshub/responsive-web-node-less

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/

How to force CSS background images to print in web browsers

Written on August 6th, 2012 By Joe Seifi (tags: css) 0 comments

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.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>

Here is the background image called in your main css file used in browsers.

.bg {
    background: url("http://fpoimg.com/250x250") top left no-repeat;
    width:250px;
    height: 250px;
}

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.

.bg.print {
    display: list-item;
    list-style-image: url("http://fpoimg.com/250x250");
    list-style-position: inside;
}

Note: You can also use the @media rule instead of importing files if you want to avoid making an extra http request.