Skapa en utskriftsvänlig sida med Gutenberg.css

Webbdesigners glömmer ofta skriva ut eftersom det verkar betydligt mindre nödvändigt nuförtiden. Och det kan vara sant för digitala webbplatser som BuzzFeed.

Men på informationswebbplatser Det är fortfarande en bra övning att erbjuda a anpassat utskriftsformat. Tack och lov behöver du inte designa din egen eftersom Gutenberg är här för att hjälpa.

Uppkallad efter uppfinnaren av tryckpressen Johannes Gutenberg är detta CSS-bibliotek en fristående resurs för skriva ut siddesigner.

Du bara Lägg till gutenberg.css fil in i ditt dokumenthuvud, och du är helt upptagen.

När en besökare går för att skriva ut din sida ska det återställ automatiskt baserat på utskriftsinställningen. Detta kan ställas in med media = "print" HTML-attribut.

Kolla in den här guiden om du vill lära dig lite mer om skriva ut stilark och hur de fungerar.

Det trevliga med Gutenberg är det kommer med extra klasser och stilar för.

Gräva i teman mappen och du hittar tre alternativa utskriftstema: bok, modern, och gammal stil. Du kan göra något av dessa standard genom att lägga till dem ovanpå standardvärdet gutenberg.css fil.

Du kan också utforma sidan annorlunda för utskrift genom att lägga till specifika CSS-klasser. Till exempel .icke tryckande klassvilja helt gömma ett element i utskriftsstilen.

Ett annat exempel är Tillägg av länkadresser bredvid texten. Gutenberg lägger till den här funktionen för att underlätta för personer att hitta webbadresserna från din sida. Men du kan lägga till .no-formatera klass på ankarelementet till dölj webbadressen.

Alla dessa saker är täckta på GitHub repo och det är väldigt enkelt. Du kan ha Gutenberg installeras på mindre än 5 minuter och hela din webbplats kommer att vara utskriftsvänlig.

Detta är överlägset en av de enklaste och coolaste biblioteken att genomföra för bättre prestanda på webbplatsen. Det kan lägga till några extra KB, men den övergripande erfarenheten kommer att förbättras drastiskt.

Om innehållet på din webbplats kan vara tryckt av någon anledning då är Gutenberg.css en oumbärlig resurs.