Styling and External libraries
(S)CSS
You can style and give life to your documents using CSS. But we provide a bit more than that. The CSS tab can actually contain SCSS code.
One of the (many) perks of SCSS is that you can nest selectors and organize your styles more efficiently. You can also use variable!
$accentColor: #4c84ff;
$lightTextColor: #fff;
h1, h2, h3 {
color: $accentColor;
}
.alertBox {
background: $accentColor;
color: $lightTextColor;
padding: 30px;
li {
list-style-type: upper-roman;
}
}
Modern CSS
Modern CSS like Flexbox or Custom properties can be used freely. Be careful to use it within recent templates! The legacy templates use an old rendering engine that doesn’t handle modern CSS well so if you’re still using them you may want to consider classic alternatives.
Print styles
Print CSS properties can be used to manage te content flow across pages.
Page breaks
You can leverage the page-break-before, page-break-inside and page-break-after CSS properties to indicate how the content should behave. If for instance you want every level 1 heading to be preceded by a page break, you can do so with page-break-before:
h1 {
page-break-before: always;
}
That’s it!
The most frequent values you will use will be the followings:
- auto
- Automatic page-breaks (default)
- always
- Always insert a page-break before the element
- avoid
- Avoid page-break before the element (if possible)
Pro Tip: If you want to be able to control where your page break get inserted, you can define a .pageBreak class that will insert a page break before itself.
.pageBreak {
page-break-before: always;
}
That way you can place a <div> tag with this class everytime you want a page break:
<p>I am a paragraph</p>
<div class="pageBreak"></div>
<p>Hey look I am on another page!</p>
Orphans and widows
Another way you can get a better behavior from your content is by providing hints about how a paragraph should deal with lines that are left alone at the end or beginning of a page.
The orphans property gives the minimum lines that must be left at the end of a page. If a paragraph cannot respect this minimum a page break will be inserted before it.
p {
orphans: 3;
}
In the same spirit, the widows property gives the minimum lines that must be left at the beginning of a page. If a paragraph cannot respect this minimum a page break will be inserted before it.
p {
widows: 3;
}
External libraries
PDFMonkey does not provide any default styling, that way you can define your own ones. This means that you can import any external library available on a CDN for example.
Styling
Say you wanted to import the [Bulma][bulma_doc] library. You can simply use the @import instruction to do so:
@import url('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css');
and then start using classes from Bulma all you want:
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">Primary title</h1>
<h2 class="subtitle">Primary subtitle</h2>
</div>
</div>
</section>
Fonts
External fonts can also be included. PDFMonkey does not provide any specific font by default by you can use Google Fonts for instance. You can use @import for that too:
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
h1 {
font-family: 'Permanent Marker';
}
Icons
Finally if you want to use an icon font, you can do so too.
@import url('https://use.fontawesome.com/releases/v5.11.2/css/all.css');
PDFMonkey