Έγγραφο συστατικών σχεδιασμού με φράκταλ

Sep 11, 2025

πως να

Φανταστείτε περισσότερο για τα συστήματα σχεδιασμού; Στη συνέχεια, μην χάσετε Senior Ui Engineer Mina markham στο Δημιουργία της Νέας Υόρκης Στις 28 Απριλίου, όπου θα συζητήσει πώς δημιούργησε το Pantsuit, το σύστημα σχεδιασμού που τροφοδοτούσε πολλές από τις εφαρμογές που φιλοξενούνται στο HillaryClinton.com. Και στη δυτική ακτή, στο Δημιουργία του Σαν Φρανσίσκο στις 9 Ιουνίου, Stephanie Rewis Θα μοιραστεί μερικά από τα μαθήματα που έμαθε κατά την κατασκευή του συστήματος σχεδιασμού των πωλήσεων.

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

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

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

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

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

Design systems will be covered at both Generate New York and San Francisco this year — Τα συστήματα σχεδιασμού θα καλύπτονται και τα δύο θα δημιουργήσουν τη Νέα Υόρκη και το Σαν Φρανσίσκο φέτος

Εισάγετε το Fractal

Δημιουργήθηκε από το ClearLeft, Φράκταλ Σας βοηθά να δημιουργήσετε και να τεκμηριώσετε βιβλιοθήκες στοιχείων ιστού και να τα ενσωματώσετε στα έργα σας. Σε αυτό το σεμινάριο θα εξετάσουμε μια πιο προσεκτική ματιά στο πώς λειτουργεί (κατεβάστε μια τελική έκδοση του demo στο εδώ ).

Το Fractal είναι μια μονάδα Node.js που είναι εγκατεστημένη μέσω NPM. Αρχικά θέλετε να εγκαταστήσετε την ενότητα παγκοσμίως, ώστε να μπορείτε να δημιουργήσετε ένα νέο έργο:

npm install --global @frctl/fractal

Με αυτό το πακέτο εγκατεστημένο, δημιουργήστε ένα νέο έργο:

fractal new project-name

Αυτή η εντολή φωτίζει έναν οδηγό εγκατάστασης που σας περπατάει μέσω της διαδικασίας εγκατάστασης. Θα σας ζητήσει τον τίτλο του έργου. τα ονόματα των εξαρτημάτων, τεκμηρίωσης και δημόσιων φακέλων · και αν χρησιμοποιείτε το GIT για τον έλεγχο έκδοσης. Μόλις ολοκληρωθούν οι ερωτήσεις αυτές, το Fractal θα εγκαταστήσει όλες τις απαιτούμενες μονάδες και θα δημιουργήσει μια δομή φακέλων ακριβώς όπως ορίζεται.

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

Περιστρέφοντας το

Τώρα έχετε ένα πλήρως εγκατεστημένο Fractal Project, γυρίστε το βήμα με το φάκελο του έργου CD Έργο-Όνομα και να τρέχετε την εντολή fractal sync. Αυτό ξεκινά έναν τοπικό διακομιστή, παρακολουθεί τα αρχεία για αλλαγές και ξεκινά αυτόματα το Browsersync:

fractal start --sync

Και όπως ακριβώς, έχετε μια παρουσία του Fractal. Ανοίξτε το πρόγραμμα περιήγησης επιλογής και πλοηγηθείτε στο http: // localhost: 3000 Για να δείτε την έναρξη του νέου σας έργου Fractal. Για να αποφύγετε την απαίτηση όλων να εγκαταστήσετε το Fractal σε παγκόσμιο επίπεδο, δημιουργήστε ένα σενάριο στο δικό σας πακέτο.Json που καλεί το φράκταλ δυαδικό.

 "Scripts": {
    "Fractal": "./NODE_Modules/.Bin/WRACTAL START --SYNC"
}

Τώρα μπορείτε να χρησιμοποιήσετε npm τρέχει fractal χωρίς να χρειάζεται να εγκαταστήσετε τίποτα παγκοσμίως.

Προσθέτοντας ένα στοιχείο

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

Ένα από τα καλύτερα πράγματα για το Fractal είναι ότι μπορείτε να οργανώσετε τα στοιχεία σας, ωστόσο, σας αρέσει στο φάκελο Components και αυτόματα θα μιμηθεί αυτόματα ότι η οργάνωση στη πλοήγηση στη βιβλιοθήκη μοτίβων.

Για το πρώτο στοιχείο, θα δημιουργήσουμε ένα νέο κύριο κουμπί μέσα σε ένα Φάκελος κουμπιού . Για να γίνει αυτό, δημιουργήστε με ένα αρχείο προτύπου στο Εξαρτήματα / Κουμπιά / Πρωτεύον-Κουμπί / Κουμπί Πρωτεύουσας . Το Fractal υποστηρίζει τα πρότυπα του τιμονιού έξω από το κουτί, οπότε χρησιμοποιήστε το .hbs επέκταση αρχείου:

  & lt; Κλήση κλάδου = "Πρωτεύο-κουμπί" & GT; {{text}} & lt; / button & gt;

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

Για να δημιουργήσετε το αρχείο δεδομένων, χρησιμοποιήστε το ίδιο όνομα βάσης με το αρχείο του τιμονιού, αλλά με διαφορετικό yml επέκταση. Τώρα το πρωτεύον-κουμπί.config.yml κάθεται μέσα στο Εξαρτήματα / Κουμπιά / Κύρια Κουμπιά Ο φάκελος πρέπει να μοιάζει με αυτό:

 Τίτλος: Πρωταρχικό κουμπί
συμφραζόμενα:
    Κείμενο: κάντε κλικ μου

Όλα αυτά μαζί δημιουργούν το πρώτο σας νέο στοιχείο, το πρωταρχικό κουμπί, ένα μέλος της κατηγορίας του κουμπιού, με το κείμενο: 'CLICK ME'.

Παραλλαγές εξαρτημάτων

Το Fractal υποστηρίζει παραλλαγές του ίδιου συστατικού, επιτρέποντάς μας να εμφανίσουμε το ίδιο συστατικό με διάφορες κατηγορίες ή χαρακτηριστικά τροποποιητή. Ας πούμε λοιπόν ότι θέλαμε να έχουμε τη δυνατότητα να χρησιμοποιήσετε ένα σκοτεινό κουμπί. Θα μπορούσαμε να δημιουργήσουμε ένα νέο αρχείο προτύπου που ονομάζεται Πρωτεύον-κουμπί - Dark.hbs Δίπλα στο αρχικό μας πρότυπο (η διπλή παύλα υποδηλώνει αυτές τις παραλλαγές συνιστωσών). Σε αυτό το πρότυπο θα εφαρμόσουμε έναν τροποποιητή μπορούμε να συνδέσουμε για να επισυνάψετε νέα στυλ.

 & LT; Κλήση κουμπιού = "Πρωτογενής κουμπί" Data-theme = "Dark" & GT; {{text}} & lt; / button & gt;

Τώρα όταν γράφουμε το CSS μας, μπορούμε να συμπεριλάβουμε τον ακόλουθο επιλογέα για να αλλάξουμε αυτό το πρότυπο με τρόπους τροποποίησης.

 .Pripary-button [Data-Theme = "Dark"] {}

Παραλλαγές δεδομένων

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

 Τίτλος: Πρωταρχικό κουμπί
συμφραζόμενα:
    Κείμενο: κάντε κλικ με
Παραλλαγές:
- Όνομα: Λήψη
    συμφραζόμενα:
Κείμενο: Λήψη τώρα
- Όνομα: Εγκατάσταση
    συμφραζόμενα:
Κείμενο: Εγκαταστήστε τώρα

Αυτό θα δημιουργήσει νέες παραλλαγές που ονομάζονται "Λήψη" και 'εγκατάσταση', με διαφορετικό κείμενο που περνάει στο κουμπί. Ένα πιο πρακτικό παράδειγμα μπορεί να είναι εάν χρησιμοποιήσατε αυτό το ίδιο πρωτεύον-button.hbs Πρότυπο σε φράκταλ καθώς και παραγωγή. Σε αυτή την περίπτωση, αντί να δημιουργήσετε ένα ολοκαίνουργιο πρότυπο για το σκοτεινό σας θέμα, θα μπορούσατε να περάσετε την τιμή θεμάτων ως μεταβλητή και να χρησιμοποιήσετε τις παραλλαγές δεδομένων για να εμφανίσετε όλα τα διαφορετικά θέματα κουμπιών.

 & lt; Class Class = "Κουμπί" Πρωτεύο "Theme =" {{theme}} "& gt;

Τίτλος: Πρωταρχικό κουμπί
συμφραζόμενα:
    Κείμενο: κάντε κλικ με
    Θέμα: Φως
Παραλλαγές:
- Όνομα: σκοτεινό θέμα
    συμφραζόμενα:
Κείμενο: κάντε κλικ με
Θέμα: Σκούρο

Χειρισμός άλλων περιουσιακών στοιχείων

Το Fractal θα χειρίζεται επίσης αρχεία εκτός από το σήμα και τα δεδομένα. Οποιαδήποτε CSS, Javascript, εικόνες ή άλλα περιουσιακά στοιχεία που προσθέτετε στον φάκελο Component θα εμφανιστούν στην καρτέλα "Περιουσιακά στοιχεία". Μπορείτε να ορίσετε ένα Readme.md Αρχείο για το στοιχείο, ώστε να μπορείτε να γράψετε σημειώσεις σχετικά με τον τρόπο χρήσης του συστατικού ή συνδέστε με άλλα μέρη της τεκμηρίωσης.

Επόμενα βήματα

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

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

Το Fractal υποστηρίζει επίσης πιο σύνθετες πηγές δεδομένων. Εάν πρέπει να δημιουργήσετε ένα μεγάλο σύνολο δεδομένων για ένα πρότυπο, ή θέλετε να το τραβήξετε από κάποιο API τρίτου μέρους, μπορείτε να χρησιμοποιήσετε component-name.config.js Για να επιστρέψετε ένα αντικείμενο Javascript στη θέση των δεδομένων αρχείων YML.

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

Κάντε κράτηση εισιτηρίων σας Παράγω σήμερα!Σε Νέα Υόρκη Μπορείτε να μάθετε από τη Mina Markham, ο οποίος έχτισε το σύστημα σχεδιασμού για την προεδρική εκστρατεία της Χίλαρι Κλίντον και μέσα Σαν Φρανσίσκο Η Stephanie Rewis θα εξηγήσει πώς μπορείτε να αρχιτέξετε αρχιτέκτονα και να οικοδομήσουμε ένα σύγχρονο πλαίσιο CSS για ένα «ζωντανό σύστημα σχεδιασμού» στην κλίμακα επιχειρήσεων.

Το άρθρο αυτό δημοσιεύθηκε αρχικά στο δίκτυο Net Magazine 285, Αγοράστε το εδώ

Έγγραφο συστατικών σχεδιασμού με φράκταλ

Εισάγετε το Fractal

Περιστρέφοντας το

Προσθέτοντας ένα στοιχείο

Παραλλαγές εξαρτημάτων

Παραλλαγές δεδομένων

Χειρισμός άλλων περιουσιακών στοιχείων

Επόμενα βήματα

πως να - Τα πιο δημοφιλή άρθρα

Πώς να δημιουργήσετε προσομοιώσεις νερού

Δημιουργία και ζωντανή πολυγώνια SVG

Βάλτε σε ένα 3D πλέγμα με το πολυπετάνιο του Zbrushcore

Πώς να σχεδιάσετε μια εμπειρία Chatbot

Πώς να ζωγραφίσει ένα ζόμπι στο Clip Studio Paint

Κύριο εργαλείο μαχαιριού

12 Συμβουλές για ρεαλιστικό φωτισμό 3D

Δημιουργήστε μια τοποθεσία ηλεκτρονικού εμπορίου από το μηδέν

Κατηγορίες