bafs / gutenberg Goto Github PK

View Code? Open in Web Editor NEW

4.8K 73.0 140.0 266 KB

Modern framework to print the web correctly.

Home Page: https://bafs.github.io/Gutenberg

License: MIT License

JavaScript 7.83% SCSS 92.17%

framework printer css-framework scss-framework scss css printing print print-framework

gutenberg's Introduction

Modern framework to print web pages correctly

How to use

Simply include the right stylesheet(s) in your html and load it only for a printer. Gutenberg.css is the base stylesheet but there are themes available in the themes folder.

Example with Gutenberg and "old style" theme :

<link rel="stylesheet" href="dist/gutenberg.css" media="print">
<link rel="stylesheet" href="dist/themes/oldstyle.css" media="print"> <!-- optional -->

Comparison between standard print (left) and Gutenberg (middle, Modern style and right, Old style)

npm

Gutenberg is available on npm

npm install gutenberg-css

(or yarn add gutenberg-css for yarn users)

CDN

You can also use the unpkg service as a CDN.

<link rel="stylesheet" href="https://unpkg.com/[email protected]" media="print">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/themes/oldstyle.min.css" media="print">

What does the framework do ?

Hide elements

To hide elements to be printed you can simply add the class no-print.

Force break page

Gutenberg provides two ways to break a page, the class break-before will to break before and break-after to break after.

Example:

<!-- The title will be on a new page -->
<h1 class="break-before">My title</h1>

<p class="break-after">I will break after this paragraph</p>
<!-- Break here, the next paragraph will be on a new page -->
<p>I am on a new page</p>

Avoid break inside

To avoid the page to break "inside" an element, you can use the avoid-break-inside class.

Example:

<div class="avoid-break-inside">
  <img src="gutenberg.png" />

  <p>I really don't want this part to be cut</p>
</div>

Not reformat links or acronym

If you do not want to reformat the links, acronym or abbreviation to show the full url or title, you can use the class no-reformat.

Force to print background

To force backgrounds to be printed (can be useful when you "print" a pdf), add this CSS (compatible with Safari and Chrome):

-webkit-print-color-adjust: exact;
        print-color-adjust: exact;

Dev

npm i to install the dependencies
npm run watch to "watch" the scss folder and compile to css
npm run build to compile gutenberg to css

gutenberg's People

Contributors

Stargazers

Watchers

Forkers

ichadhr mongoltolbo pandahisham nogas megna zebbra2014 cuulee phonbopit jpkcom mzler codegorrilla deawx akashyssboddeda rogh64 001101 alexlaforge heirema umarmughal sparkinzy devlato morepozitiva tigran-sn tomm1996 ogregoire chrisquinnr malisetti samliu sadiqmmm harishkumarv mediaeater bit-player szalansky hanyedeleng bythckr xcopyco ejchet designtips fallive devenlu nxr101 sdtm1016 woodchen enterstudio rlugojr dily3825002 driveontestingapp marius92mc techscientist fredericksilva mengyou658 wiertomta ubiratanbraga misrax neuroradiology bradparks greyair frankfang alexxnica irusri ijazhussain786 antonio2306 vinicius-camara diogenespolanco jasonlo-tw nrep synr sangkyunyoon stroebjo yjfintalkdev strarsis jquimera lygntx gdg fstfwd lal55 kiskong tony32769 tbinh41177 espetey smile2049 touchx binarybrain andbmme rnclient blambodhar sarveshpro sidval powerticmkt calderis carldnelson th3ya0vi luciojap kdonaldson cohero rutgerklamer rajeshreddym des-yogi pwfoo stanislavfor gsc0107

gutenberg's Issues

Typo in READ.ME

In the section for page break, "Gutenberg provide to way break page, the class page-break will for to break before and page-break-after to break after." should be "Gutenberg provide two ways break page, the class page-break will for to break before and page-break-after to break after."

Clarity in page-break file names

It would be far clearer if you simply renamed the classes to page-break-before and page-break-after. No explanation needed here.

Add eyeglass support

It would be nice if eyeglass support is added. PR: #16

Inverse of 'no-print'

To make it easier for implementing in a legacy system a 'print-only' class would be super-useful.

Fit to page?

Is there a way to make some content fit to a page? I'm using the page-break-after class but having an issue where sometimes some of the content is too long and it rolls over onto a new page. Is there a way to shrink or cut off the content so that it doesn't create another page?

Strange width on print

@BafS thank you for your package.

Could you look at my problem?

Why is content so narrow there:

I have two-columned page layout, col-sm-3 and col-sm-9. First contains menu and has a class no-print, on the second I've added class print-full-width which has a media print style width: 100% !important; but, no result. How can I fix this?

Editorconfig

I would like to contribute an .editorconfig file to make sure all files share the same formatting.
This would help others with contributing well-formatted changes/additions.
Just need to know the preferences (indention, charset, whitespace handling).

Demos not working

Stylesheets on demo pages produce 404 errors. Other than that, fantastic work!

Image distributed on two pages with Firefox

Firefox 79 may distribute images on two pages (screenshot from print preview of oldstyle.html):

Is this something that can be remedied by the Gutenberg framework?

License being used?

There isn't currently a License file or license attributed with this project, could you please add one?

Fix dependency versions in releases

Hello,

it is generally considered a good idea to fix the dependencies of a public npm package to a specific version by not using any prefix in the projects' package.json. normalize-css 6.0.0 (or when depending on a package vulnerable to security threats, such as a web framework like express to the minor version normalize-css 6.0.x).

If you use the default caret (^) character in your package.json, that means that on each npm update, npm will install the latest minor release in the current project. Many package authors don't take semver too seriously, which could mean that a breaking change might be released in a minor version.

So if (just an example, I never had problems with normalize) the author of normalize-css decides that it'd be fancy to set the default background color of anything in the DOM to lime in version 6.9.0, any CI-Tool would build and deploy that without asking.

Therefore, I'd like to request that little patch to the package.json

Also:
Could you please be so kind to publish gutenberg-css#3.0.1 on npm?
I'd be delighted at using the updates in a project I'm about to launch.

More information:
https://blog.nodejitsu.com/package-dependencies-done-right/
http://stackoverflow.com/questions/25432768/change-npm-default-caret-in-package-json

It should be text-decoration: none;.

Thank you for making web printing less terrible to work with. :)