Documents for Print - overview
Summary of features
Matching the look of a document on screen to how it will look when printed has never been easy, but COLOURcode saves you the hassle of having to try. Optimised for output to A4 portrait (can be altered with a tweak to the stylesheet), the template makes it simple to layout and style your documents, with or without a logo.
At a glance
- Styling documents for printed output couldn't be easier.
- Screen font sizes in pixels are matched to print sizes in points.
- Change the colour of your title blocks with a single CSS class.
Adding a logo
The HTML layout example below shows a logo inside a parent .row that also has a class of .doc-logo-40 assigned.
Provided the image file is large enough, altering this extra class as follows will change the overall width of the image accordingly
(as a percentage of the width of the printed page, which will be larger than the examples shown here):
.row.doc-logo-30.row.doc-logo-40.row.doc-logo-50.row.doc-logo-60To align the logo right, simply assign a class of .pull-right to the image.
To align the logo centrally, assign a class of .center-block to the image.
Pre-styled classnames
This template includes various custom CSS classes (shown below in red) which make it very easy to produce documents for printing that look as good on screen as they will in print. Disable headers and footers in your printer options, minimise the margins, and try it out. CSS print media queries are used to strictly control the font sizes on screen and in print, such that what you see in print should be extremely close to what you see on screen (with A4 paper and subject to your printer margins).
A simplified markup example:
<div class="document">
<div class="row doc-logo-40">
<div class="col-xs-12">
<img alt="" src="/path/to/assets/logo.png">
</div>
</div>
<div class="row doc-address">
<div class="col-xs-8">
<h4>Invoice from:</h4>
<p> ... </p>
</div>
<div class="col-xs-4">
<h4>Invoice to:</h4>
<p> ... </p>
</div>
</div>
<div class="row doc-title doc-title-red">
<div class="col-xs-12">
<hr>
</div>
<div class="col-xs-8">
<h2>Supplier Name</h2>
<h1>INVOICE</h1>
</div>
<div class="col-xs-4 doc-references">
<p> ... </p>
</div>
<div class="col-xs-12">
<hr>
</div>
</div>
<div class="row doc-items">
<div class="col-xs-12">
<table class="table table-condensed"> ... </table>
<h3 class="doc-total">Invoice Total = ... </h3>
</div>
</div>
<div class="row doc-details">
<div class="col-xs-4">
<h4>Supplier's details</h4>
<p> ... </p>
</div>
<div class="col-xs-4">
<h4>Taxation summary</h4>
<p> ... </p>
</div>
<div class="col-xs-4">
<h4>Terms</h4>
<p> ... </p>
</div>
</div>
</div>
COLOURcode document titles
Provided the mark-up guide is followed, the assignment of a single COLOURcode class to the title's parent row will change the colour of the horizontal lines and headers accordingly e.g. .row.doc-title.doc-title-brand1
Supplier Services
STATEMENT OF ACCOUNT
Document No: 12345
Dated: 22 June 2016
Class: blue
Supplier Services
RECEIPT
Document No: 12345
Dated: 22 June 2016
Class: yellow
Supplier Services
INVOICE
Document No: 12345
Dated: 22 June 2016
Class: red
Supplier Services
CREDIT NOTE
Document No: 12345
Dated: 22 June 2016
Class: green
Supplier Services
PROFORMA INVOICE
Document No: 12345
Dated: 22 June 2016
Class: orange
Supplier Services
BOOKING CONFIRMATION
Document No: 12345
Dated: 22 June 2016
Class: purple
Supplier Services
CERTIFICATE
Document No: 12345
Dated: 22 June 2016
Class: gold
Supplier Services
REGISTRATION
Document No: 12345
Dated: 22 June 2016
Class: bronze
Supplier Services
CONFIRMATION
Document No: 12345
Dated: 22 June 2016
Class: silver
Supplier Services
DAILY REPORT
Document No: 12345
Dated: 22 June 2016
Class: grey
Supplier Services
SALES FIGURES
Document No: 12345
Dated: 22 June 2016
Class: brand1
Supplier Services
INDEMNITY FORM
Document No: 12345
Dated: 22 June 2016
Class: brand2