Παρουσιάζοντας το CSS Gridish: Ένα εργαλείο ανοιχτού κώδικα για να βοηθήσετε την ομάδα σας να προσαρμόσει το CSS Grid σήμερα

Σήμερα, είμαι ενθουσιασμένος που εισάγω ένα νέο εργαλείο ανοιχτού κώδικα από την IBM που ονομάζεται CSS Gridish!

Το CSS Gridish παίρνει τις προδιαγραφές σχεδιασμού του πλέγματος του προϊόντος σας και δημιουργεί διάφορους πόρους που μπορεί να χρησιμοποιήσει η ομάδα σας:

  • Ένα αρχείο σκίτσου με πίνακες τέχνης και ρυθμίσεις πλέγματος / διάταξης για τους σχεδιαστές
  • CSS / SCSS χρησιμοποιώντας το CSS Grid με CSS Flexbox backupback για προγραμματιστές
  • Μια επέκταση του Google Chrome για οποιονδήποτε να ελέγξει την ευθυγράμμιση μιας ιστοσελίδας

Ο στόχος είναι να βοηθηθούν οι ομάδες να προσαρμόσουν το CSS Grid νωρίτερα και να επιτρέψουν πιο σύνθετες διατάξεις. Για να δείξετε πόσο ευέλικτο είναι το εργαλείο, δείτε μερικά παραδείγματα πλέγματος από το Bootstrap, το Carbon Design System και το σχεδιασμό υλικού.

Γιατί οι προγραμματιστές της IBM το έκαναν αυτό

Το νέο CSS Grid spec είναι υπέροχο για το σχεδιασμό ιστοσελίδων. Τώρα, οι σχεδιαστές μπορούν να τοποθετήσουν τόση προσοχή στον άξονα y καθώς έχουν τον άξονα x στο παρελθόν. Τα έργα αριστερά και δεξιά αρχίζουν να τεκμηριώνουν τη μετάβασή τους στο CSS Grid.

Πολλές ομάδες της IBM είναι πρόθυμες να χρησιμοποιήσουν το CSS Grid, αλλά αντιμετωπίζουν μερικούς αποκλειστές για να ξεπεράσουν. Το CSS Gridish βοηθάει στην αντιμετώπιση αυτών των αποκλειστών.

Το κορυφαίο στιγμιότυπο οθόνης είναι η φόρτωση σελίδας στο Chrome χρησιμοποιώντας το CSS Grid. Το κάτω screenshot είναι η ίδια σελίδα στο IE 11 χρησιμοποιώντας το CSS Flexbox. (Πηγή)

Συμβατότητα με το πρόγραμμα περιήγησης

Το CSS Grid έχει σήμερα μεγάλη υποστήριξη προγράμματος περιήγησης (~ 75%). Ωστόσο, πολλά προϊόντα εξακολουθούν να πρέπει να εξυπηρετούν τα υπόλοιπα προγράμματα περιήγησης. Για παράδειγμα, το ibm.com εξακολουθεί να λαμβάνει το 10% της κυκλοφορίας του από τον Internet Explorer. Χρειάζεται πολλή επιπλέον εργασία για να υποστηρίξετε αυτά τα παλαιότερα προγράμματα περιήγησης.

Ενώ το CSS Gridish δημιουργεί πάντα το Grid.css που χρησιμοποιεί το CSS Grid, δημιουργεί επίσης ένα αρχείο που ονομάζουμε yourGrid-legacy.css. Αυτό το αρχείο κληρονομιών εξακολουθεί να εξυπηρετεί μόνο το CSS Grid code εάν το υποστηρίζει ένα πρόγραμμα περιήγησης. Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει το πλέγμα CSS, ο χρήστης αποκτά πρόσβαση σε ένα εφεδρικό flexbox. Προσθέστε τις επιπλέον κλάσεις για τοGrid-legacy.css και προσθέσατε συμβατότητα προς τα πίσω!

Τι κάνεις αν δεν χρειάζεται πια να υποστηρίζεις παλαιότερους φυλλομετρητές; Το μόνο που χρειάζεται είναι μια αλλαγή στο YourGrid.css για να ξυρίσετε τα πολύτιμα kilobytes από την εμπειρία.

Σχεδίαση και κώδικας γεφύρωσης

Έχουν προκύψει εξαιρετικά εργαλεία που δημιουργούν μια ενιαία πηγή αλήθειας για το σχεδιασμό και τον κώδικα όπως το React Sketchapp και η Lona. Αυτά τα εργαλεία εξασφαλίζουν ότι οι σχεδιαστές και οι προγραμματιστές κάνουν με τα ίδια στοιχεία.

Χρησιμοποιήστε την επέκταση Chrome για το CSS Gridish για να ελέγξετε τις ιστοσελίδες με τις ίδιες ρυθμίσεις πλέγματος και διάταξης στους πίνακες γραφικών Sketch.

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

Επιπλέον, είναι εύκολο να χαθούν τα στοιχεία του σχεδιασμού κατά τη μετάβαση στην ανάπτυξη. Γι 'αυτό δημιουργήσαμε μια επέκταση του Google Chrome για να εξετάσουμε την κωδικοποιημένη εργασία σας. Η επέκταση του Chrome μπορεί να ρυθμιστεί στο αρχείο ρυθμίσεων πλέγματος της ομάδας σας για να δείτε το ίδιο πλέγμα και διάταξη από το αρχείο σκίτσων με τις ίδιες συντομεύσεις (CTRL + G και CTRL + L). Οι προγραμματιστές απολαμβάνουν τη χρήση της επέκτασης με το αρχείο σκίτσων που εφαρμόζουν ανοιχτά. Οι σχεδιαστές αγαπούν την ανασκόπηση των κωδικοποιημένων ιστοσελίδων μαζί τους.

Σεβασμός της όλης σελίδας

Χρησιμοποιώντας το CSS Grid, ένας προγραμματιστής μπορεί να ακολουθήσει το σχεδιασμό του πλέγματος όταν ξεκινά από το πρώτο στρώμα HTML. Αλλά τα πράγματα γίνονται πιο δύσκολα όταν ο κύριος του έργου πρέπει να εργαστεί μέσα σε διαφορετικά τμήματα και άλλους κόμβους. Αυτό οφείλεται στο γεγονός ότι η εμφάνιση: το subgrid εξακολουθεί να κερδίζει την υποστήριξη του προγράμματος περιήγησης.

Το CSS Gridish λειτουργεί γύρω από αυτό βασιζόμενο σε μονάδες πλάτους προβολής αντί για μονάδες σχετικού ποσοστού. Μπορείτε να ενσωματώσετε τόσα πολλά στοιχεία του πλέγματος σας στο δίκτυο, αλλά να τηρείτε τις στήλες και τις γραμμές της σελίδας. Το μόνο μειονέκτημα που έχουμε βρει σε αυτό είναι ότι τα προγράμματα περιήγησης αντιμετωπίζουν τη μονάδα vw διαφορετικά με τις κύλινδροι κύλισης. Αυτό μπορεί να παρακαμφθεί με περιθώριο στο πλέγμα σας.

Πως δουλεύει

Η μόνη ανάγκη εισόδου του CSS Gridish είναι ένα αρχείο json που ονομάζεται css-gridish.json. Το αρχείο αποδέχεται τις προδιαγραφές σχεδιασμού πλέγματος και τις επιλογές για το πού / πώς αποθηκεύονται τα αρχεία που εκπέμπονται. Προς το παρόν, το CSS Gridish κάνει μερικές υποθέσεις σχετικά με το σχεδιασμό του δικτύου σας:

  • Τα εξωτερικά υδρορροές είναι το ήμισυ του μεγέθους των εσωτερικών υδρορροών
  • Οι κύριες στήλες σας είναι υγρές αντί για σταθερά πλάτη

Συμβουλή: Για καλύτερα αποτελέσματα στο Σκίτσο, σας συνιστούμε να κάνετε τα σημεία διακοπής, το περιθώριο και το υδρορροή διαιρούμενο με το ύψος της γραμμής.

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

Στη συνέχεια, το CSS Gridish τρέχει σε μια γραμμή εντολών με μόνο npx css-gridish. Στη συνέχεια, θα πρέπει να δείτε ένα φάκελο με όλα τα αρχεία για την ομάδα σας να χρησιμοποιήσει το πλέγμα σας! Το μεγάλο πράγμα για το CSS Gridish είναι ότι το καθιστά αρκετά εύκολο για τους χρήστες του CSS Grid για πρώτη φορά. Αφού οι χρήστες μάθουν τις κατηγορίες που αναφέρονται λεπτομερώς στην τεκμηρίωση, συνήθως χρησιμοποιούν μόνο δύο κανόνες:

.myElement {
    πλέγμα-στήλη: 1 / span 4; // Πάνω από τέσσερις στήλες από την πρώτη σειρά
    πλέγμα γραμμής: 4 / span 8; // Πέταγμα οκτώ σειρές από την τέταρτη σειρά
}}

Ο εφεδρικός κώδικας flexbox λειτουργεί παρόμοια με τα περισσότερα πλαίσια πλέγματος με αναγνωρίσιμη ονομασία κατηγορίας BEM.

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

Το ένα gotcha όταν χρησιμοποιείτε το CSS Gridish κώδικα είναι ότι δεν χρησιμοποιούμε την ιδιότητα χάσματος του CSS Grid για υδρορροές. Αντ 'αυτού, υπάρχουν τάξεις padding που είναι μισό μέγεθος υδρορροής που εφαρμόζετε για να σέβεστε την υδρορροή. Αυτό οφείλεται στην αδυναμία να αγνοήσουμε τα κενά για καταστάσεις όπως τα χρώματα φόντου και τα μέσα πλήρους μεγέθους. Ας ελπίσουμε ότι η επόμενη έκδοση του CSS Grid spec θα το λύσει αυτό.

Το μέλλον

Το CSS Gridish στοχεύει να αποκτήσει περισσότερα προϊόντα για να υιοθετήσει το CSS Grid νωρίτερα και να κάνει τη μετάβαση ευκολότερη για τους χρήστες και τις ομάδες.

Μακροπρόθεσμα, ελπίζουμε ότι αυτό ενθαρρύνει μια ιδέα που ονομάζεται δισδιάστατη βιβλιοθήκη συστατικών στοιχείων. Η βιομηχανία είχε μια ισχυρή εποχή βιβλιοθηκών συνιστωσών που πληρώνουν το πλάτος που χρησιμοποιούν οι χρήστες σε ένα στοιχείο. Τώρα με το CSS Grid μπορούμε να δημιουργήσουμε εξαρτήματα που συμπληρώνουν το ύψος στο οποίο είναι τοποθετημένα. Αυτό παρέχει περισσότερες δημιουργικές δυνατότητες σε όσους σχεδιάζουν ένα σχέδιο σύστημα και μεγαλύτερη ευελιξία στις ομάδες που την χρησιμοποιούν.

Εν τω μεταξύ, χρησιμοποιήστε και συμβάλλετε πίσω στο CSS Gridish. Υπάρχει πολύ περισσότερη δουλειά!

Αν σας βοηθά, αφήστε το CSS Gridish ένα αστέρι!

Ο James Y Rauhut (@seejamescode) είναι ένας σχεδιαστής της ATX που εργάζεται για το IBM Design. Του αρέσει να κωδικοποιεί, να ερευνά και να δοκιμάζει το καλύτερο για τον Θεό. Το παραπάνω άρθρο είναι προσωπικό και δεν αντιπροσωπεύει απαραίτητα θέσεις, στρατηγικές ή απόψεις της IBM.

Ειδικές ευχαριστίες στον Hayley Hughes για το δισκογραφικό λογότυπο. Επίσης, οι ακόλουθοι ήταν μια μεγάλη βοήθεια στο ίδιο το έργο: οι Trevor Wong, Daniel Kuehn, Seth Johnson, Chiu-Ping Chiu, Jen Downs, Josh Black, Jessica Tremblay, Maranda Bodas, Wonil Suh, Quincy Larson, @IBM κοινότητα