Crea una pagina stampabile con Gutenberg.css

I web designer spesso dimenticano stampare perché sembra molto meno necessario al giorno d'oggi. E questo può essere vero per i siti digitali come BuzzFeed.

Tuttavia, su siti web informativi è ancora una buona pratica offrire un foglio di stampa personalizzato. Per fortuna, non è necessario progettare il tuo perché Gutenberg è qui per aiutare.

Prende il nome dall'inventore della stampa Johannes Gutenberg, questa libreria CSS è una risorsa autonoma per stampare disegni di pagine.

Hai appena Aggiungi il gutenberg.css file nella tua testa del documento, e sei tutto pronto.

Ogni volta che un visitatore va a stampare la tua pagina dovrebbe riposizionare automaticamente in base all'impostazione di stampa. Questo può essere impostato usando i media = "print" Attributo HTML.

Dai un'occhiata a questa guida se vuoi saperne un po 'di più stampare fogli di stile e come funzionano.

La cosa bella di Gutenberg è che viene fornito con classi e stili aggiuntivi pure.

Scava nella cartella dei temi e troverai tre temi di stampa alternativi: libro, moderno, e vecchio stile. Puoi farne uno qualsiasi di questi predefinito aggiungendoli sopra il valore predefinito gutenberg.css file.

Inoltre, puoi stile la pagina in modo diverso per la stampa aggiungendo specifiche classi CSS. Ad esempio il .no-stampa la volontà di classe nascondi completamente un elemento nello stile di stampa.

Un altro esempio è il aggiunta di URL di collegamento accanto al testo. Gutenberg aggiunge questa funzione per rendere più facile per le persone trovare gli URL dalla tua pagina. Ma puoi aggiungere il .no-riformattare classe sull'elemento di ancoraggio a nascondi l'URL.

Tutta questa roba è coperta dal repository GitHub ed è molto semplice. Puoi avere Gutenberg installato in meno di 5 minuti e il tuo intero sito sarà stampabile.

Questo è di gran lunga una delle librerie più semplici e più belle da implementare per migliori prestazioni del sito. Potrebbe aggiungere alcuni KB in più, ma l'esperienza complessiva sarà drasticamente migliorata.

Se il contenuto del tuo sito potrebbe mai essere stampato per qualsiasi motivo allora Gutenberg.css è una risorsa indispensabile.