Створення друкованої сторінки з Gutenberg.css

Про веб-дизайнерів часто забувають друк тому що зараз здається набагато менш необхідним. І це може бути вірно для цифрових сайтів, таких як BuzzFeed.

Однак, на інформаційні сайти це все ще хороша практика, яку можна запропонувати користувацька таблиця стилів. На щастя, вам не потрібно створювати свої власні, тому що Гутенберг тут, щоб допомогти.

Названа на честь винахідника друкарської машини Johannes Gutenberg, ця бібліотека CSS є автономним ресурсом для дизайн друкованої сторінки.

Ви просто додайте gutenberg.css файл в голову документа, і ви все налаштовані.

Всякий раз, коли відвідувач відправляється друкувати вашу сторінку, він повинен автоматично повторюється на основі налаштування друку. Це можна встановити за допомогою кнопки media = "print" Атрибут HTML.

Ознайомтеся з цим посібником, якщо ви хочете дізнатися більше про це друкувати таблиці стилів і як вони працюють.

Приємна річ про Гутенберга - це те, що вона поставляється з додатковими класами і стилями теж.

Викопайте папку теми, і ви знайдете три альтернативні теми друку: книги, сучасний, і старий стиль. Ви можете зробити будь-який з цих за замовчуванням додавши їх поверх стандартної gutenberg.css файл.

Також можна стилюйте сторінку по-різному для друку шляхом додавання спеціальних класів CSS. Наприклад .без друку клас буде повністю приховати елемент у стилі друку.

Іншим прикладом є додавання URL-адрес посилання поруч із текстом. Гутенберг додає цю функцію, щоб полегшити користувачам пошук URL-адрес з вашої сторінки. Але можна додати .без переформатування класу на якірний елемент приховати URL-адресу.

Всі ці речі покриті GitHub репо, і це дуже просто. Ви можете мати Гутенберга встановлено менш ніж за 5 хвилин і весь ваш сайт буде друкованим.

Це безумовно, одна з найпростіших і найкрутіших бібліотек для реалізації для кращої продуктивності сайту. Це може додати кілька додаткових КБ, але загальний досвід буде значно покращено.

Якщо вміст вашого сайту може бути надруковані з будь-якої причини тоді Gutenberg.css є незамінним ресурсом.