Izveidojiet izdevīgu lapu ar Gutenberg.css

Web dizaineri bieži aizmirst drukāt mūsdienās tas šķiet daudz mazāk nepieciešams. Un tas var attiekties uz tādām digitālajām vietnēm kā BuzzFeed.

Tomēr informatīvās tīmekļa vietnes tas joprojām ir laba prakse piedāvāt a pielāgota drukas stila lapa. Par laimi, jums nav nepieciešams veidot savu, jo Gutenberga ir šeit, lai palīdzētu.

Šī CSS bibliotēka, kas tika nosaukta pēc drukas preses izgudrotāja Johannes Gutenberg, ir savrups resurss drukāt lapu dizainu.

Jūs vienkārši pievienojiet gutenberg.css failu jūsu dokumenta galvā, un jūs visi esat iestatījuši.

Ikreiz, kad apmeklētājs dodas uz lapas izdrukāšanu, tam vajadzētu būt automātiski restyle pamatojoties uz drukas iestatījumu. To var iestatīt, izmantojot media = "print" HTML atribūts.

Pārbaudiet šo rokasgrāmatu, ja vēlaties uzzināt vairāk drukāt stilu un kā viņi strādā.

Jauka lieta par Gutenbergu ir tā nāk ar papildu klasēm un stiliem arī.

Ievietojiet tēmu mapē un atradīsiet trīs alternatīvas drukas tēmas: grāmata, moderns, un vecs stils. Jūs varat veikt jebkuru no šiem noklusējuma pievienojot tos noklusējuma augšpusē gutenberg.css failu.

Jūs varat arī izdrukājiet lapu citādi pievienojot īpašas CSS klases. Piemēram, .bez drukāšanas klases griba pilnībā paslēpt elementu drukas stilā.

Vēl viens piemērs ir saites URL pievienošana blakus tekstam. Gutenbergs pievieno šo funkciju, lai ļautu cilvēkiem vieglāk atrast jūsu lapas URL. Bet jūs varat pievienot .nē - pārformatēt klasi uz enkura elementu slēpt URL.

Visas šīs lietas ir iekļautas GitHub repo, un tas ir ļoti vienkārši. Jums var būt Gutenberga uzstādīts mazāk nekā 5 minūtēs un visa jūsu vietne būs drukāta.

Tas ir līdz šim viena no vienkāršākajām un stilīgākajām bibliotēkām lai uzlabotu vietnes veiktspēju. Tas var pievienot dažus papildu KB, bet kopējā pieredze tiks ievērojami uzlabota.

Ja jūsu vietnes saturs kādreiz varētu būt drukāts jebkāda iemesla dēļ tad Gutenberg.css ir neaizstājams resurss.