Steps to add a new tab and checklist items to the module.
- Follow the instructions at
https://www.drupal.org/project/launch_checklist/git-instructions →
to get a local copy of the module repository
- Copy and paste an existing file like /inc/section_13_other.inc
- Rename it /inc/section_14_printability.inc
- Add the checklist items. Note, since you are not linking to any Drupal modules, you won't need the handbook_page of each item.
- In launch_checklist.module include your new file at the top and add it to the launch_checklist_checklistapi_checklist_items() at the bottom.
- Install the module on a local website to test
- Make a Merge Request, or a Patch to update the module.
- Change the status of the ticket to NEEDS REVIEW
Hide clutter
We probably don’t want to show the main menu, search box, footer, etc.
You can simply choose to hide it:
header nav, footer {
display: none;
}
Hide or restrict images
You can hide all images, set a max-width with a dimension, or 100% which will stretch to the width of the page.
Hide irrelevant objects
Hide things that make no sense on paper. <video>, <audio>, <object> and <embed>.
Adjusting to the right size
To define page margins, you can use @page rule to simply apply a margin all the way around the page. E.g.:
@page {
margin: 0.5cm;
}
Verify Typography (fonts, headings lists, etc) look reasonable
Use common sense defaults for fonts. Make sure that there is not an excess of white space/line-height between paragraph items.
Verify Header brand is visually pleasing
Make sure that the logo takes up an appropriate amount of space on the page and does not overwhelm the print content. If possible a black and white logo should display to prevent ink wastage.
Set link colors to default text color
Links should be set to the default text color or black.
Set links to display underlines
To provide visible contrast between non-linked content and linked content a url should be underlined
Hide unnecessary links
Where we have links that do not provide context in print (I.e. Anchor links) the link should be hidden. E.g.
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
Print the URL
The URL for a link needs to be visible on the printed page. E.g.
a[href]:after {
content: " (" attr(href) ")";
font-weight: normal;
}
This is a great starting point for checking all these boxes in Drupal 8+
/**
* @file
* Print styling
*/
@media print {
/* Underline all links. */
a:link,
a:visited {
text-decoration: underline !important;
/* Don't underline header. */
&.header__site-link {
text-decoration: none !important;
}
}
#content {
/* Add visible URL after links. */
a[href]:after {
content: " (" attr(href) ")";
font-weight: normal;
font-size: $base-font-size;
display: block;
}
/* Only display useful links. */
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
/* Add visible title after abbreviations. */
abbr[title]:after {
content: " (" attr(title) ")";
}
}
/* Un-float any the content. */
#content {
float: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Turn off any background colors or images. */
body,
#page,
#main,
#content {
color: #000;
background-color: transparent !important;
background-image: none !important;
}
/* Hide sidebars and nav elements. */
#skip-link,
#toolbar,
#navigation,
#footer,
.region-sidebar-first,
.region-sidebar-second,
.breadcrumb,
.tabs,
.action-links,
.pager,
.block--addthis {
visibility: hidden;
display: none;
}
}