Designing in the Browser (for PDF)

Nov 2015

I’m not the first person to feel out of their depths when designing in traditional design software whilst finding themselves perfectly at home designing in browser. This disparity becomes troublesome when tasked with designing for anything other then the web. Thankfully there’s a number of great tools available (on NPM namely) to help supercharge designing in the browser to help bridge these gaps.

I loved the thought of being able to design using Sass as if I were designing a standard web page and then export to PDF using a javascript task runner. This process was actually brought to life thanks to two NPM packages in particular: gulp-replace and html-pdf.

Integrating these tools into an existing gulp workflow is trivial and bounds of fun to use.

Conceptual workflow

You can begin by building a website like normal and writing Sass or CSS exactly how you always have. Yeoman’s generator works brilliantly here. You can use external style sheets just fine as Gulp injects these minified styles inline at build-time.

One thing I did for an A4 PDF destination is add these styles to my page’s over-arching wrapper or container to emulate the dimensions of A4 as best as possible:

{% highlight css %} .container { width: 210mm; } {% endhighlight %}

One you’ve built your app as your wish, it’s time to append some gulp tasks to inject the minified CSS inline and to export to PDF.

Caveats

There are a few caveats when exporting a web page to PDF using the methodology described in this blogpost (I’m sure there might be others, too):

  • You should be mindful that you need to use the media=“all” attribute in your style sheets to target ‘print’
  • The html-pdf module requires that the CSS is inline, hence the need for gulp-replace

Check out my working demo for a full practical implementation.