Custom Document CSS

StrawBlond allows developers to futher customize the invoice and offer document template with CSS (and paged media).

Take a look at the typeset.sh documentation (our PDF rendering engine) for highly custom design requirements.

Custom Properties

Our template defines a few CSS variables (custom properties) to allow easy modification of base styles.

:root {
    --font-size-sm: 6.4pt;
    --font-size-base: 8pt;
    --font-size-lg: 10pt;
    --font-size-xl: 12.8pt;

    --font-weight-normal: 400;
    --font-weight-bold: 600;

    --letter-spacing: normal;

    --theme-primary: rgb(0 0 0);
    --heading-color: rgb(0 0 0);
    --font-color: rgb(0 0 0);
    --muted-color: rgb(0 0 0 / 0.5);

    --border-color: rgb(0 0 0);
    --border-color-opaque: rgb(0 0 0 / 0.25);
}

CSS Classes

Class	Description
document	The full document wrapper, but without header/footer/logo
document-page-counter	The page counter wrapper
document-info-table	The info table containing properties like due date, issue date
document-top	The full top part of the document (address and info table)
document-address	The address block wrapper
address-sender	The sender address line
address-recipient	The recipient address block
document-number	The document number heading (eg. "RE-4242")
document-title	The main title heading
document-header	The documents header text
document-footer	The documents footer text
document-summary	The document summary (totals, subtotals of sections)
page-label	The page counter label (eg. "Seite")
page-count	The page counter value (eg. "1/2")
line-item	The line item row
line-item-title	The line item title
line-item-description	The line item description
line-item-group	The wrapper around line item groups
line-item-group-title	The line item group title

Custom Fonts

Implement your custom fonts via @font-face the same way you would on your website. Our rendering engine supports OTF, TTF and WOFF files (WOFF is recommended).

Page Counter

Our rendering engine defines two special CSS Counters, page and pages, which can be used to display the current page number and the total number of pages, respectively.

The initial CSS looks like this:

.page-count {
    content: counter(page) "/" counter(pages);
}