0-60 σε 1,9s

Πώς να οικοδομήσουμε μια ανταποκρινόμενη Tesla Launch Page με Bulmas CSS

Να επιταχυνθεί η εμφάνιση του βιώσιμου σχεδιασμού ιστοσελίδων

Πριν φτάσω στο άρθρο, θέλω απλώς να μοιραστώ ότι κάνω ένα προϊόν και θα ήθελα να συλλέξω κάποια στοιχεία για το πώς θα εξυπηρετούσα καλύτερα τους προγραμματιστές ιστού. Δημιούργησα ένα σύντομο ερωτηματολόγιο για να το ελέγξω πριν ή μετά την ανάγνωση αυτού του άρθρου. Παρακαλώ ελέγξτε το - ευχαριστώ! Και τώρα, πίσω στον προγραμματισμένο προγραμματισμό μας.

Γεια σας στο διαδίκτυο! (Hi Elon!)

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

Bulma ;! Το Bulma είναι ένα πλαίσιο CSS και πνευματικό παιδί των @ jgthms.

Δίδαξα επίσης ένα δωρεάν, πλήρες μάθημα CSS Bulma στο Scrimba.com, όπου κατασκευάζουμε αυτά τα σχέδια ️. Κάντε κλικ εδώ για εγγραφή δωρεάν!

Το Scrimba.com είναι μια πλατφόρμα επόμενης γενιάς για προγραμματιστές front-end για να καταγράφουν και να μοιράζονται τις ιστοσελίδες τους ως διαδραστικές τηλεοπτικές εκπομπές!

Bulma; ¯ \ _ (ツ) _ / ¯

Το Bulma λύνει πολλά προβλήματα - πολλά. Είτε χρειάζεστε ένα οπτικό στοιχείο, είτε θέλετε να κατανοήσετε πώς μπορεί να κωδικοποιηθεί ένα στοιχείο, με τις βέλτιστες πρακτικές και την καλύτερη τεκμηρίωση, η Bulma είναι εδώ για να σας βοηθήσει!

Το Bulma δεν έχει ούτε έκδοση 1.0, και έχει σημαντική υιοθεσία με 150K + λήψεις μηνιαίως και 26K + αστέρια στο GitHub. Σκεφτείτε τη Bulma ως ανταγωνιστή της Bootstrap, παρά το γεγονός ότι είναι * μόνο * CSS. Κοιτάξτε μα, δεν YavaScript!

Πώς λειτουργεί το Bulma;

Το Bulma χρησιμοποιεί αρκετές τεχνικές για να δημιουργήσει μια συνεκτική διεπαφή για προγραμματιστές. Πρέπει να ασχοληθούμε με την περιγραφή του σχεδιασμού του ιστότοπού μας χρησιμοποιώντας σημασιολογικές κλάσεις - όχι στοιχεία - ή με άλλα λόγια, ιδιωματικά πρότυπα.

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

Ταραγμένος? Αρχίστε εδώ για να μάθετε πρώτα τα βασικά στοιχεία του Bulma.

Τι γίνεται με αυτό το σχεδιασμό?;

Θέλετε να μάθετε πώς να δημιουργήσετε αυτό το 3D γραφικό σε HTML και CSS;  Να μου ενημερώσετε!

Αυτός ο σχεδιασμός μπορεί να γίνει καλύτερα κατανοητός ως τρία μέρη:

️Αναγνωστικό υπόβαθρο
️ Components bulm + τροποποιητές
G CSS Grid

Ρίξτε μια ματιά πιο κοντά ... δείτε κάτι; Το φόντο δεν είναι συνεχές! Αυτό δεν είναι λάθος. η ομάδα Tesla βελτιστοποιήθηκε για επιτραπέζιους υπολογιστές, tablet και κινητά. Με αυτό ως βάση μας, θα προσθέσουμε εξαρτήματα Bulma και τροποποιητές, και στη συνέχεια θα χρησιμοποιήσουμε το CSS Grid για να επιτύχουμε τον περίπλοκο σχεδιασμό που ανταποκρίνεται στις προδιαγραφές.

️ Ανταπόκριση υπόβαθρο

Αυτές είναι οι πραγματικές εικόνες φόντου I 𝖕𝖎𝖗𝖆𝖙𝖊𝖉 από το tesla.com! Sooo ... πώς θα οικοδομήσουμε ένα ευαίσθητο υπόβαθρο; Χρησιμοποιώντας ερωτήματα μέσων, obvs! Τα ερωτήματα των μέσων μαζικής επικοινωνίας μας επιτρέπουν, σε ορισμένες περιπτώσεις, να παρακάμψουμε το CSS.

Και τα ερωτήματα των μέσων ενημέρωσης είναι ισχυρά. μπορούμε να αντικαταστήσουμε το CSS ανάλογα με την αναλογία εικόνας του ιστότοπου, την αναλογία διαστάσεων της συσκευής ή απλή και απλή: το πλάτος του ιστότοπου. Ναι - πάμε με αυτό.

Πρώτον, ξεκινάμε με ένα από τα συστατικά του Bulma, .hero, και χρησιμοποιούμε έναν από τους τροποποιητές του, είναι-fullheight, για να δημιουργήσουμε ένα fullscreen τμήμα. Στη συνέχεια, εκχωρούμε διάφορα υπόβαθρα για κοινά πλάτη χρησιμοποιώντας ερωτήματα μέσων:

1337 hax

Μεγάλη - έτσι τώρα η ιστοσελίδα μας ανταλλάσσει υπόβαθρα σε 1024px και 768px. Μερικές φορές, όταν συμβαίνει αυτό, υπάρχει ένα φως του λευκού, έτσι το μαύρο το κρύβει. Και το κέντρο και το κάλυμμα απλά βοηθούν στην ευθυγράμμιση και την εστίαση της εικόνας.

Πιστέψτε το ή όχι, το φόντο είναι συντομογραφία για 8 ιδιότητες CSS:

1. clip κλιπ φόντου
2. χρώμα φόντου
3. εικόνα φόντου
4. αρχική προέλευση
5. Θέση φόντου
6. επανάληψη φόντου
7. μέγεθος φόντου
8. προσκόλληση φόντου

Χρησιμοποιήσαμε -color, -image, -position, and -size!

️ Components bulm + τροποποιητές

Αυτό είναι όπου το Bulma γίνεται ενδιαφέρον. Ποια είναι η πραγματική σελίδα εκκίνησης ;!

Διάλεξε ένα; το κόκκινο χάπι ή το μπλε χάπι;

...

...

...

Το αριστερό είναι αυθεντικό! 9 (; ʘ¿ʘ;) 6 Περιμένετε ... πώς μπορεί η Bulma να είναι τόσο ευέλικτη; Λοιπόν - θυμηθείτε τροποποιητές; Ναι, με αρκετούς τροποποιητές στη διάθεσή μας, μπορούμε να δημιουργήσουμε μια ποικίλη αισθητική, ακόμη και χωρίς να επεξεργαστούμε την πηγή του Bulma.

Τώρα, χωρίς περαιτέρω παραβίαση, παρουσιάζω τη σελίδα εκτόξευσης ως ASCII τέχνη!

Τι γίνεται αν μπορούσαμε να γράψουμε κώδικα όπως αυτό ...

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

Έχετε υπόψη σας, αυτό είναι πολύ λιγότερο δύσκολο από την πραγματική εφαρμογή, δείτε εδώ. Παρακολουθώ τους τροποποιητές και το ξένο HTML για να δείξω πώς λειτουργεί το Bulma. συνδέουμε τα στοιχεία μαζί, ακριβώς όπως το LEGO, αλλά για να σχεδιάσουμε μια ιστοσελίδα!

Και οι τροποποιητές είναι πώς μπορούμε να επιτύχουμε μια αισθητική που μοιάζει με Tesla, παρά το γεγονός ότι η Bulma δεν έχει καμία σχέση με τον Tesla. Σε ολόκληρο τον κώδικα, παρατηρήστε την * εκτεταμένη * χρήση του έχει * και είναι *; αυτό είναι που μας δίνει μια ποικίλη αισθητική.

Μπορείτε να κάνετε κλικ εδώ για να μάθετε περισσότερα σχετικά με τα στοιχεία του Bulma.

G CSS Grid

Χρειαζόμαστε το CSS Grid; Δεν είμαι βέβαιος (> ﹏ <), αλλά βρήκα τον προγραμματισμό του ανταποκρινόμενου σχεδιασμού για τις προδιαγραφές πολύ πιο εύκολο από ό, τι περίμενα χρησιμοποιώντας το πλέγμα από κάποια άλλη τεχνική. Εδώ, λοιπόν, εστιάζουν τα ID αυτά:

Hehehe ... οπότε έχουμε αναγνωριστικά #a μέσω #e, με #a να είναι κάποια μάρκετινγκ, και #e είναι το κουμπί "Reserve Now". Το επιθυμητό αποτέλεσμα είναι ότι στο κινητό αποκρύπτουμε το κουμπί "Reserve Now" κάτω από τα #b, #c και #d.

3 ...

2 ...

1 ...

Εσύ;  Αναμέναμε κάτι * σκληρότερο *

Στην πρώτη διαφάνεια, αντιστοιχίζουμε αναγνωριστικά σε κάθε ένα από τα αναγνωριστικά χρησιμοποιώντας την περιοχή πλέγματος. Στη συνέχεια, επικοινωνούμε με το #grid το * σχήμα * του δικτύου μας χρησιμοποιώντας ASCII τέχνη! Πρόκειται για το προεπιλεγμένο πλέγμα. για επιφάνεια εργασίας και tablet.

Τελευταία - θυμηθείτε τα ερωτήματα των μέσων ενημέρωσης; YAS! Το μόνο που πρέπει να κάνουμε είναι να επικοινωνήσουμε το σχήμα του δικτύου μας για κινητά. Φανταστείτε αυτό ... γράφουμε ένα ερώτημα μέσων για να παρακάμψετε το σχήμα του δικτύου μας για κινητά. ️

Ο πλήρης διαδραστικός κώδικας είναι διαθέσιμος στο μάθημα Bulma εδώ.

Ή ... ΠΩΣ ΘΑ ΠΕΡΙΣΤΡΕΨΕΤΕ; !!;

Θέλετε να μάθετε πώς να δημιουργήσετε αυτό το 3D γραφικό σε HTML και CSS;  Να μου ενημερώσετε!

Ο Nikita Rudenko @ rnkta, ο οποίος είναι νέος στο # 100DaysOfCode (!), Το δημιούργησε μετά την ολοκλήρωση του μαθήματος και το μοιράστηκε μαζί μου! Στην υγειά σας!

Συγχαρητήρια! Ευχαριστώ για την ανάγνωση! 6 (^ ω ^) 9

Τώρα είναι ένας φαινομενικός χρόνος, όπως κανένας άλλος για να μπει στο front-end ανάπτυξη. Με την εισαγωγή προδιαγραφών CSS, όπως το Flexbox και το CSS Grid, και τα πλαίσια όπως το Bulma, η δημιουργία ιστοσελίδων δεν ήταν ποτέ πιο προσιτή!

Όπως αυτό το άρθρο ;! Υπάρχει ένα ακόμη άρθρο ακριβώς όπως αυτό! Κάντε κλικ στο εδώ!