Δημιουργήστε μια φιλική προς εκτύπωση σελίδα με το Gutenberg.css

Οι σχεδιαστές ιστοσελίδων συχνά ξεχνούν Τυπώνω γιατί φαίνεται σήμερα λιγότερο αναγκαία. Και αυτό μπορεί να ισχύει για ψηφιακές τοποθεσίες όπως το BuzzFeed.

Ωστόσο, το ενημερωτικές ιστοσελίδες είναι ακόμα μια καλή πρακτική να προσφέρετε ένα προσαρμοσμένο φύλλο στυλ εκτύπωσης. Ευτυχώς, δεν χρειάζεται να σχεδιάζετε το δικό σας γιατί Gutenberg είναι εδώ για να βοηθήσει.

Ονομάστηκε μετά από τον εφευρέτη του τυπογραφείου Johannes Gutenberg, αυτή η βιβλιοθήκη CSS είναι μια αυτόνομη πηγή εκτύπωση σχεδίων σελίδας.

Εσείς απλά πρόσθεσε το gutenberg.css αρχείο στο κεφάλι εγγράφων σας και είστε έτοιμοι.

Κάθε φορά που ένας επισκέπτης πηγαίνει να εκτυπώσει τη σελίδα σας πρέπει αυτόματη restyle με βάση τη ρύθμιση εκτύπωσης. Αυτό μπορεί να ρυθμιστεί χρησιμοποιώντας το media = "print" Χαρακτηριστικό HTML.

Ανατρέξτε σε αυτόν τον οδηγό, εάν θέλετε να μάθετε κάτι περισσότερο φύλλα στυλ εκτύπωσης και πώς λειτουργούν.

Το ωραίο πράγμα για το Gutenberg είναι αυτό έρχεται με επιπλέον τάξεις και στυλ πολύ.

Περιηγηθείτε στο φάκελο των θεμάτων και θα βρείτε τρία εναλλακτικά θέματα εκτύπωσης: Βιβλίο, μοντέρνο, και παλιό στυλ. Μπορείτε να κάνετε οποιαδήποτε από αυτές τις Προκαθορισμένο προσθέτοντάς τα πάνω από την προεπιλογή gutenberg.css αρχείο.

Επίσης, μπορείτε στυλ τη σελίδα διαφορετικά για εκτύπωση προσθέτοντας συγκεκριμένες κατηγορίες CSS. Για παράδειγμα, το .χωρίς εκτύπωση τάξη θα απόκρυψη ενός στοιχείου στο στυλ εκτύπωσης.

Ένα άλλο παράδειγμα είναι το προσθήκη διευθύνσεων URL δίπλα στο κείμενο. Ο Gutenberg προσθέτει αυτή τη λειτουργία για να διευκολύνει τους ανθρώπους να βρουν τις διευθύνσεις URL από τη σελίδα σας. Αλλά μπορείτε να προσθέσετε το .μη μεταρρύθμιση τάξη στο στοιχείο αγκύρωσης στο απόκρυψη της διεύθυνσης URL.

Όλα αυτά τα πράγματα καλύπτονται από το repos GitHub και είναι πολύ απλό. Μπορείτε να έχετε Gutenberg εγκατεστημένο σε λιγότερο από 5 λεπτά και ολόκληρος ο ιστότοπός σας θα είναι φιλικός προς την εκτύπωση.

Αυτό είναι μακράν μία από τις πιο απλές και πιο ζεστές βιβλιοθήκες που θα υλοποιηθούν για καλύτερη απόδοση του ιστότοπου. Μπορεί να προσθέσει μερικά επιπλέον KB, αλλά η συνολική εμπειρία θα βελτιωθεί δραστικά.

Αν το περιεχόμενο του ιστότοπού σας μπορεί να είναι πάντα για οποιονδήποτε λόγο τότε το Gutenberg.css είναι ένας απαραίτητος πόρος.