I’ve been working on the Enfold theme’s new print.css file the past few days and thought I would put all the resources I’ve used/found/read in one place as well as some notes and thoughts. First the fruits of my googling labor:

• 2011 Article from Smashing Magazine – http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
  • Good article and the first stop on google. Some of it doesn’t quite apply since this is for a re-sale theme and not just for a single site with a specific target audience. Ultimately I think it pointed me down the road I ended up taking of simplicity based on content.
• CSS Tricks post on implementing their own print stylesheet – http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
  • Took the swirl of thoughts that the Smashing Magazine article created and further helped define the path I should go(closely paraphrasing their own list here):
  1. Clear type
  2. Full page width
  3. Let the browser do the heavy lifting
  4. Get rid of web specific fluff – LayerSlider, extra shadows, nav, sidebar, footer
• The Codex! – http://codex.wordpress.org/Styling_for_Print
  • I can’t help but love that the WordPress codex always has at least something. In this case I liked the idea of a print.css specific file instead of adding another media query to one of the other theme css files. I don’t know if this will be how Kriesi wants to include it yet but to me it makes the most sense. If all the theme css files go from media type “screen” to “all” then the print.css file will just remove and refine whats in place. With the browser doing the background removal and overall clean up the print.css can do the other removes and restyles as needed.
• http://davidwalsh.name/css-page-breaks
  • Peter (http://inoplugs.com/) pointed me to this one in our github discussion on it. The theme will either have a page-break element added in or I’ll write/record a tutorial so users can add in page-breaks to their content as needed. At this point I had done a good bit of work on the initial print.css and in testing layouts the theme was printing blogs, pages and most layouts very nicely. Add in your own page breaks and you could use the theme to create your own print layouts.
• Back to CSS Tricks – http://css-tricks.com/almanac/properties/p/page-break/
  • I started using a simple page break element on my dev site and wanted some more info on their use.

Doing so much support can make you feel like there are a hundred different voices that need to be heard on every option, feature and style. So initially, before doing any reading on the topic, I thought we would need to have multiple print files for users to pick from to get the print style they wanted. That was short lived and I’m glad for it. I still need to go through and make sure all of the galleries and shortcodes are cleaned up but the bulk of it is now done.

I would really like to spend some more time on fleshing out print specific styling options within the file itself available as either css snippets or commented css users can uncomment as needed. With the theme already being responsive and using a flexible grid you can actually make a lot of adjustment to the printed file without much fuss. I think a WordPress theme designed specifically for creating printed work could actually work at this point and I’m sure there is either already something out there or there will be in time.

Current gist of the print.css

If anyone