CSS Print Stylesheet Tips & Tricks

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

Coding CSS print stylesheets doesn’t have to be a monumental task. Let’s go through some simple tips and tricks that can save you both time and headaches.

Place styles in a print media query.

Remember, you don’t need to recreate your entire CSS. Most all styles are inherited by the print query, only the differences should be defined.

Make color changes explicit.

Most browsers will automatically reverse colors to save toner ink. This can sometimes cause problems with the quality of the printed page. For best results, make color changes explicit.

Remove unneeded page elements.

Generally, the goal for printed pages isn’t to provide an exact screenshot of what’s seen on the screen. Instead, to provide a well-designed print version of it. Elements like navigation bars and search forms aren’t needed on printed versions, so remove those to save both room and ink.

Set page width & margins.

Make sure your content is getting printed edge to edge by setting the body width to 100% and defining the page margin. I’ve seen some sites that go a little further and provide users some extra space for handwritten notes on the page.

Avoid odd page breaks.

Make sure your content doesn’t get spilt up across multiple pages at odd points. This can sometimes be the biggest headache when creating print stylesheets.

Force background images & colors.

Some pages require background images and colors to appear correctly. You can force these colors to show when printed in color with WebKit browsers (Chrome or Safari) using a separate media query. Unfortunately, at the time of writing this article, there’s no equivalent for Firefox, Opera or Internet Explorer (no big surprise there).

Display link URLs.

Remember, this is a printed version of the page so users have no way to access links without knowing the URL of those links. Providing a reference to the linked URLs tell’s users where those links go to. Take a look at the HTML code below:

Here’s the printed result of the code above:

With the holidays coming around the corner, many people are looking for unique gift ideas < http://www.knowgifts.com > to surprise their loved ones.

One problem with the code above is that both anchor links and linked images will also get expanded. We can fix that with a countermand CSS rule:

Selecting links around images can be more difficult since CSS doesn’t currently allow for selections of elements based on its children. This get’s remedied with the CSS4 parent selector:

CSS4 also makes expanding external links easier:

Provide QR codes for easy URL references.

Using Google’s Chart API, you can provide users a QR code on printed pages. There’s a downside to this approach, because you have to define the URL in the style. If you’re running PHP or another dynamic scripting language, this can be fixed by providing the URL automatically:


Worth-while CSS Print Articles & Tutorials

Check out these other great articles and tutorials regarding CSS printing:

WordPress or Drupal: Compare to learn what’s best for your site!

I recently received a message from a local Austin computer technician, Sergio Garcia. His question is a common one among business owners looking for a quick and easy solution to setup and mange their new sites, which is better, WordPress or Drupal.

Hey I just have a quick question, I fix computers in the South Austin area for a living and it has been time for me to have a website. Nothing too complicated but a good-looking simple and effective page where guests can find my business phone number, map where they can find me, maybe with a slider in the first page with pictures of my work and the office, blog and all that.
I don’t know much but I hear Drupal and WordPress are good options but I do not know which one is better.
Thanks,
Sergio

Do a quick Google search for WordPress or Drupal and you’ll find article after article proclaiming one over another. It’s a never-ending debate that’s been taking place for decades. Years ago, there may have been a right and wrong answer to that question, but with time comes technology and technology is what builds advanced CMS. Since the release of WordPress 3.0 on June 17, 2010 and Drupal 7 on January 5, 2011, the line between which is better has become fuzzy. It’s no longer a question which is best, but which is best for each person site’s needs. I might take some flak for this statement, but I challenge my readers to prove me wrong; There’s nothing a WordPress site can do that a Drupal site can’t and nothing a Drupal site can do that a WordPress site can’t.

Continue reading “WordPress or Drupal: Compare to learn what’s best for your site!”

Introduction to Drupal Preprocess & Process Functions

[dropcap type=”v2″]I[/dropcap]n this post, I’m going to give you an introduction to Drupal’s powerful preprocess and process functions. If you’re not already familiar with these functions, I like to think of them as both a front-enders nightmare and best friend. A nightmare only because it’s Drupal and with everything Drupal, has a steep learning curve. A best friend because, it provides the front-ender more control over the output of rendered code allowing for more efficient, clean, and crisp markup. It does need some basic PHP knowledge, but hopefully after reading this post everything will make sense.

Continue reading “Introduction to Drupal Preprocess & Process Functions”

Quick Code: jQuery Sticky Navigation When User Scrolls

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

jQuery Sticky Navigation Effect

Without further adieu, let’s jump into the code.

The JavaScript

jQuery(function(){
  var menuOffset = jQuery('#site-navigation')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll &gt;= menuOffset) {
      jQuery('#site-navigation').addClass('fixed').css('width',jQuery('#masthead').width());
    } else {
      jQuery('#site-navigation').removeClass('fixed').removeAttr(&quot;width&quot;);
    }
   });
});

Fairly basic jQuery code. It will add a class to the navigation when a user scrolls beyond it. Only thing you’ll need to change here is the navigation selector, #site-navigation. Also, you may want to remove .css('width',jQuery('#masthead').width()). That part of the code is more specific to this site.

The CSS

#site-navigation.fixed{
  position:fixed;
  z-index: 9999;
  top:0;
}

Simple stuff! If you’ve got any questions or need help customizing it to meet your needs feel free to shoot me a line below.

Introduce Yourself to SASS and Compass

So you’re a front-end web developer? If so, you probably spend a good portion of your day writing a lot of CSS. I remember those days of copying and pasting over and over again, racking your brain remembering the various vender prefixes, trying to ensure your website is cross-browser compatible, all while doing your best to write solid and clean CSS code.

Ever heard of SASS and Compass? I’ll walk you through how these two powerful tools will be able to speed up development time by doing the heavy lifting for you.

Sass could be defined as a meta-language on top of CSS that helps developers code more elegant syntax for CSS and implements various features that makes building stylesheets more manageable.

SASS & Compass

If code could have relationships, SASS and Compass are soul mates. When I first learned of SASS and then it’s pimp cousin Compass, I was intrigued. In the first couple of projects I worked on where I used these valuable tools, so many of my frustrations were solved. Like magic, I could set some standard site colors and then easily reuse them throughout my stylesheets all while managing that color from a single variable.

Then I came across something called “mixins“. These are analogous to the way many programming languages like PHP work. They let you write CSS in a DRY (Don’t Repeat Yourself) fashion while creating optimized stylesheets that are easier to read, write and edit than the old-school way. Plus with Compass, you’ll have access to several useful mixins which you can quickly incorporate into pre-built CSS frameworks like HTML5 Boilerplate, Susy and more. Even more, you can use them semantically, rather than litter your markup with presentational class names. This is great when working with Drupal theming where it’s not always quick and easy to change classes on elements.

SASS: Syntactically Awesome Stylesheets

SASSOne of the first things that caught my eye when visiting their site was the quote, SASS makes CSS fun again.

Basically, writing SASS is exactly the same as writing CSS… if you so choose. Using the SCSS syntax makes all of your CSS files SASS-ready. The only thing missing is all the exciting features SASS provides. Alternately you can write using the more terse syntax that can save you keystrokes.

Here’s both syntaxes below:

SCSS

Check out how similar SCSS is to CSS. The only thing different here is some variables. This is the method I prefer.

SASS

Tired of those repetitive curly braces and semicolons? They’ve been replaced with a more strict indentation-aware syntax. This method may allow you to type faster and visually scan easier. Both syntaxes are equally functional, so your choice should be based on preference.

Compiled to CSS

Here’s what the compiled CSS from either of the SASS code blocks above:

Install and Setup SASS & Compass

There’s a ton of great resources out there on the web on how to install and setup SASS and Compass. Their own documentation is a great start and should provide you all the information you’ll need to get up and running.

Compass

CompassCompass is SASS built pimp. Without SASS, Compass would be homeless. At the very least, Compass can run in the background and watch when changes get made to your sassy files so it can then re-compile and save it as a production-ready CSS file. That’s awesome and all, but that’s not even close to what this pimp has to offer. Compass allows you to setup your project structure so you can incorporate various frameworks, including your own if you’re a rebel. Out of the box, figuratively, Compass comes with a large number of utility mixins. That’s a lot of bling already, but mosey on over to GitHub and check out the other awesome goodies that people are working on. 960.gs, Susy, HTML5 Boilerplate and a whole lot more are already waiting for you to play around with. In addition, there’s a number of plugins you can incorporate that were created to perform certain specific tasks in CSS. Fancy Buttons is just one of the many plugins that provides a easy way to add progressively enhanced CSS buttons. Another is Lemonade which allows you to compile all of your .png background images into a nice, tidy sprite file.

Variables

One of my favorite features of SASS is the ability to use variables. Variables you say? Yup. It’s incredible that this isn’t already available is plain ‘ole CSS, because it’s so simple and yet powerful. I did a presentation at my job on using SASS and Compass in a new project we were starting. The first thing I heard about SASS was, “Whoa, now I don’t have to remember hex numbers for all my colors!” Or something similar to that. Here’s an example below using variables and functions to do things like change colors.

$my-red: #b80000;
$my-dark-red: darken($my-red, 10%); // renders as #410101
$my-muted-red: desaturate($my-red, 40%); // renders as $5c1919
$my-transparent-red: transparentize($my-red, 0.5); // renders as rgba(115, 2, 2, 0.5)

It doesn’t stop at colors either. SASS variables can be used to store pretty much any value you’ll need to reuse.

$vertical-margin: 24px;
$horizontal-margin: $vertical-margin * 0.5;
div.container {
  margin: $vertical-margin $horizontal-margin;
}

// Renders as:
div.container P
  margin: 24px 12px;
}

Mixins

Mixins are one of the most powerful features of SASS. Mixins allows coder’s to reuse entire snippets of code and even interject logic while doing it. This gives you reusable and flexible ways to style your markup. You’ll be using mixins everywhere, but let’s start by looking at humble html lists. We use lists in html almost as often as we use div’s. They’re versatile, and therefore are often the best semantic element for a given piece of content, be it a menu, a tag cloud, or upcoming concerts.

Let’s look at the mixin for removing bullets from lists that is included with Compass.

Defining the Mixin

This is where we write the code we want to apply to multiple places. This example happens to be included with Compass but you can easily write your own.

// REMOVE BULLETS FROM A LIST
// Turn off the bullet for an element of a list
@mixin no-bullet {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}
// turns off the bullets for an entire list
// NOTE THAT THIS MIXIN NESTS THE PREVIOUS ONE ON ELEMENTS
@mixin no-bullets {
  list-style: none;
  li {
    @include no-bullet;
  }
}

Including the Mixin

This is how you apply the mixin as you work.

ul.my-list {
  @include no-bullets;
}

Or you can use the shorthand syntax:

ul.my-list
  +no-bullets

Rendered CSS

ul.my-list {
  list-style: none;
}
ul.my-list li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

Mixins are also used when implementing a CSS framework in Compass. My main problem with implementing the increasingly numerous CSS frameworks is that in order to apply the predefined styles you need to use presentational class names in your markup like, span-6. I used to use them anyway in order to gain the other benefits, but it always tasted funny. Mixins are a huge part of overcoming that hurdle. Since mixins can accept arguments we can use them to calculate an element’s width and other properties, and apply those properties to semantic classes. So if your CSS framework has a set of styles that make an element 6 columns wide, set a margin, and float it to the left we can now write a mixin that can be applied to any class. What’s more, we can make that mixin dynamic so that it can calculate that width and margin instead of just dumbly spitting out static declarations. Mixins are part of the reason SASS and Compass make the perfect pair.

Extend

@extend is the new kid on the block, having recently been developed for SASS version 3, and honestly I’ve only recently started to understand it well enough to know when it’s the right tool to reach for. It’s pretty simple to grasp the concept. Sometimes you write a style for an element, and then you want to apply that style to something else, but add a little more to it. For example you might have a call out, and then want to position it on the left or right of the content.

SASS

$horizontal-margin: 18px;
$padding: 6px;
.callout {
  border: 1px solid black;
  padding: $padding;
}

.left-callout {
  @extend .callout;
  float: left;
  margin-right: $horizontal-margin;
}

.right-callout {
  @extend .callout;
  float: right;
  margin-left: $horizontal-margin;
}

Rendered CSS

.callout, .left-callout, .right-callout {
  border: 1px solid black;
  padding: 6px;
}

.left-callout {
  float: left;
  margin-right: 18px;
}

.right-callout {
  float: right;
  margin-left: 18px;
}

Stay Sassy, Austin

SASS and Compass has been added to my arsenal of web development weapons and should be in yours too! Since I’ve started using these two powerful tools, I’ve become spoiled. Give it a try on your next project and you will be too. Here’s to SASS and Compass, the perfect relationship.