Maak een afdrukvriendelijke pagina met Gutenberg.css

Webontwerpers vergeten vaak afdrukken omdat het tegenwoordig veel minder nodig lijkt. En dit kan waar zijn voor digitale sites zoals BuzzFeed.

Echter, op informatieve websites het is nog steeds een goede gewoonte om een aangepaste print stylesheet. Gelukkig hoef je je eigen ontwerp niet te ontwerpen omdat Gutenberg is hier om te helpen.

Vernoemd naar de uitvinder van de drukpers Johannes Gutenberg, is deze CSS-bibliotheek een stand-alone bron voor print pagina ontwerpen.

Jij gewoon voeg het toe gutenberg.css het dossier in je documentkop en je bent helemaal klaar.

Wanneer een bezoeker uw pagina gaat afdrukken, zou dat moeten automatisch restylen op basis van de afdrukinstelling. Dit kan worden ingesteld met behulp van de media = "print" HTML-kenmerk.

Bekijk deze gids als u hier wat meer over wilt leren print stylesheets en hoe ze werken.

Het leuke aan Gutenberg is dat het dat is wordt geleverd met extra klassen en stijlen te.

Duik in de themamap en je zult vinden drie alternatieve printthema's: boek, modern, en oude stijl. U kunt een van deze maken de standaard door ze bovenop de standaardwaarde toe te voegen gutenberg.css het dossier.

Ook kunt u style de pagina anders om af te drukken door specifieke CSS-klassen toe te voegen. Bijvoorbeeld de .no-afdruk klasse zal verberg een element volledig in de afdrukstijl.

Een ander voorbeeld is de toevoeging van link-URL's naast de tekst. Gutenberg voegt deze functie toe om het mensen gemakkelijker te maken om de URL's van uw pagina te vinden. Maar u kunt de .no-formatteren klasse op het ankerelement verberg de URL.

Al deze dingen worden behandeld op de GitHub repo en het is heel eenvoudig. Je kunt Gutenberg hebben geïnstalleerd in minder dan 5 minuten en uw hele site zal printvriendelijk zijn.

Dit is veruit een van de eenvoudigste en coolste bibliotheken om te implementeren voor betere siteprestaties. Het kan een paar extra KB's toevoegen, maar de algehele ervaring zal drastisch worden verbeterd.

Als de inhoud van uw site ooit zou kunnen zijn afgedrukt om welke reden dan ook dan is Gutenberg.css een onmisbare hulpbron.