Създайте страница за печат с Gutenberg.css

Уеб дизайнерите често забравят печат защото изглежда много по-малко необходимо днес. И това може да е вярно за цифрови сайтове като BuzzFeed.

Въпреки това, на информационни уебсайтове все още е добра практика да се предложи персонализиран стил за печат. За щастие, не е нужно да създавате свои собствени, защото Гутенберг е тук, за да помогне.

Наречена на името на изобретателя на печатницата Йоханес Гутенберг, тази библиотека на CSS е самостоятелен ресурс дизайн на печатни страници.

Ти просто добавете gutenberg.css досие в главата на документа и сте готови.

Всеки път, когато посетител отива да отпечата страницата ви трябва автоматично въз основа на настройката за печат. Това може да бъде зададено с помощта на медии = "печат" HTML атрибут.

Вижте това ръководство, ако искате да научите повече за това печат на стилове и как работят.

Хубавото на Гутенберг е това идва с допълнителни класове и стилове също.

Копирайте папката с теми и ще намерите три алтернативни теми за печат: Книга, модерен, и стар стил. Можете да направите някое от тези по подразбиране като ги добавите в горната част на подразбиране gutenberg.css досие.

Също така можете оформете страницата по различен начин за печат чрез добавяне на специфични CSS класове. Например .не-печат клас ще напълно скриете елемент в стила на печат.

Друг пример е добавяне на URL адреси на връзки до текста. Гутенберг добавя тази функция, за да улесни хората да намират URL адресите от вашата страница. Но можете да добавите .не-преобразование клас върху елемента на котвата скриете URL адреса.

Всичко това се покрива от GitHub repo и е много лесно. Можете да имате Гутенберг инсталиран за по-малко от 5 минути и целият ви сайт ще бъде удобен за печат.

Това е далеч една от най-простите и най-готините библиотеки за изпълнение за по-добро представяне на сайта. Тя може да добави няколко допълнителни KB, но цялостното преживяване ще бъде значително подобрено.

Ако съдържанието на сайта ви някога бъде отпечатани по някаква причина тогава Gutenberg.css е незаменим ресурс.