Documenta i tuoi sistemi di progettazione con frattale

Sep 14, 2025

Come si fa

Ti piacerebbe imparare di più sui sistemi di progettazione? Quindi non perdere l'ingegnere UI senior Mina Markham. a Genera New York Il 28 aprile, dove discuterà come ha creato Pantsuit, il sistema di progettazione che ha alimentato molte delle applicazioni ospitate su Hillaryclinton.com. E sulla costa occidentale, a Genera San Francisco Il 9 giugno, Stephanie Rewis. condividerà alcune delle lezioni che ha imparato durante la costruzione del sistema di progettazione di Salesforce.

Ormai, molti di noi hanno familiarità con Guide di stile . Ma c'è una nuova razza della documentazione del sistema di progettazione che guadagna il vapore: la biblioteca del modello. La principale differenza tra i due è la fonte primaria della documentazione dello strumento.

La documentazione di una guida di stile tende ad origine da un file di markdown, in modo da mostrare il markup che l'autore è spesso costretto a copiarlo e incollarlo nel markdown. Questo è quasi impossibile da mantenere quando si montano più componenti insieme.

Una biblioteca del modello, d'altra parte, tratta i nostri file HTML componenti come cittadini di prima classe. Ogni componente ottiene la propria pagina, dove visualizza il markup e il rendering HTML direttamente dal file HTML. Ciò garantisce che i file HTML e la documentazione non usciscano mai di sincronizzazione.

Le biblioteche del modello sono spesso costruite utilizzando un linguaggio templation piuttosto che un html semplice. I modelli possono includere variabili e altre logiche, quindi possiamo passare in vari set di dati, consentendo di visualizzare le variazioni di un componente.

È possibile combinare diversi modelli per creare display più complessi o anche pagine complete. Questi file sono così flessibili che potrebbero anche essere utilizzati nella produzione! Eventuali modifiche apportate alla nostra libreria pattern vengono automaticamente raccolte dal nostro sito Web, come tutti i markup - per la biblioteca o per la produzione - origina da un singolo set di modelli canonici.

Design systems will be covered at both Generate New York and San Francisco this year — I sistemi di progettazione saranno coperti sia da Generare New York e San Francisco quest'anno

Entra frattale

Creato da Clearleft, Frattale Aiuta a costruire e documentare le librerie di componenti Web e integrarle nei tuoi progetti. In questo tutorial daremo uno sguardo più da vicino a come funziona (scarica una versione finita della demo a Qui ).

Fractal è un modulo Node.js installato tramite NPM. Per prima cosa si desidera installare il modulo a livello globale in modo da poter generare un nuovo progetto:

npm install --global @frctl/fractal

Con questo pacchetto installato, crea un nuovo progetto:

fractal new project-name

Questo comando ha attivato una guida all'installazione che ti cammina attraverso il processo di configurazione. Ti chiederà il titolo del progetto; I nomi dei componenti, della documentazione e delle cartelle pubbliche; E se utilizzerai Git per il controllo della versione. Una volta completa le domande, frattale installerà tutti i moduli richiesti e impostare una struttura di cartelle proprio come specificato.

Se si desidera saltare l'installazione globale e creare manualmente il progetto, le istruzioni di installazione manuale possono essere trovate a Qui .

Girandolo

Ora hai un progetto frattale completamente installato, tiralo su entrando nella cartella del progetto Nome del progetto CD e eseguendo il comando di sincronizzazione frattale. Questo avvia un server locale, guarda i file per le modifiche e inizia automaticamente BrowserSync:

fractal start --sync

E proprio così, hai un'istanza di lavoro di frattale. Apri il tuo browser di scelta e naviga verso http: // localhost: 3000 per vedere l'inizio del tuo nuovo progetto frattale. Per evitare di richiedere tutti di installare frattale a livello globale, creare uno script nel tuo pacchetto.json. che chiama il binario frattale.

 "Script": {
    "Fractal": "./node_modules/.bin/fractal Start --sync"
}

Ora puoi usare npm run fractal. senza dover installare nulla a livello globale.

Aggiunta di un componente

Ora hai iniziato un progetto frattale, è ora di aggiungere alcuni componenti. I file di avviamento sono dotati di un componente chiamato "Esempio", ma lo sbarazzeremo di questo e ne prendiamo uno nuovo da zero.

Una delle cose migliori su Fractal è che puoi organizzare i tuoi componenti, tuttavia, ti piace all'interno della cartella dei componenti e imiterà automaticamente quell'organizzazione nella navigazione della Biblioteca Pattern.

Per il primo componente, creeremo un nuovo pulsante primario all'interno di a Pulsante cartella . Per farlo, creare con un file modello a Componenti / Pulsanti / Pulsante primario / PRINCIPALE PULSANTE.HBS . Fractal supporta i modelli del manubrio fuori dalla scatola, quindi usa il .hbs. estensione del file:

  & lt; tasto class = "Pulsante primario" e GT; {{text}} & lt; / Button & gt;

Il {{testo}} Stringa all'interno del tag del pulsante è un segnaposto variabile, e questo consente di riutilizzare il modello, passando in valori diversi per testo dal file di dati.

Per creare il file di dati, utilizzare lo stesso nome di base del file del manubrio, ma con un diverso yml. estensione. Ora il Primary-button.config.yml. seduto all'interno del genere Componenti / Pulsanti / Pulsanti primari La cartella dovrebbe assomigliare a questo:

 Titolo: Pulsante primario
contesto:
    Testo: click me

Tutto questo insieme crea il tuo primo nuovo componente, il pulsante principale, un membro della categoria Button, con il testo: "Click me '.

Variazioni dei componenti

Fractal supporta le variazioni dello stesso componente, consentendoci di visualizzare lo stesso componente con varie classi di modificatori o attributi. Quindi diciamo che volevamo avere la possibilità di utilizzare un pulsante tematico oscuro. Potremmo creare un nuovo file modello chiamato Pulsante primario - Dark.hbs Accanto al nostro modello originale (il doppio Dash denota queste variazioni di componenti). In questo modello applicheremo un modificatore che possiamo agganciare a attaccare nuovi stili.

 & lt; button class = "Pulsante primario" Tema dati = "Dark" & GT; {{Text}} & lt; / Button & GT;

Ora, quando scriviamo il nostro CSS, possiamo includere il seguente selettore per modificare questo modello con gli stili di modifica.

. Primary-tasto [DATA-TEME = "DARK"] {}

Variazioni dei dati

Proprio come possiamo definire le variazioni creando più file modello, possiamo anche creare variazioni all'interno dei nostri dati. Possiamo farlo all'interno del Primary-button.config.yml. file aggiungendo un array di varianti.

 Titolo: Pulsante primario
contesto:
    Testo: clicca me
Varianti:
- Nome: download
    contesto:
Testo: scarica ora
- Nome: installazione
    contesto:
Testo: installa ora

Ciò creerà nuove varianti denominate 'download' e 'install', con un testo diverso passato nel pulsante. Un esempio più pratico potrebbe essere se stavi usando lo stesso PARTITO-PROMICATO.HBS. Modello in frattale e produzione. In questo caso, piuttosto che creare un modello nuovo di zecca per il tuo tema oscuro, è possibile superare il valore del tema come variabile e utilizzare le variazioni dei dati per mostrare tutti i diversi temi del pulsante.

 & lt; Button class = "Pulsante primario" Tema dati = "{{tema}}" & gt; {{text}} & lt; / Button & gt;

Titolo: Pulsante primario
contesto:
    Testo: clicca me
    Tema: luce
Varianti:
- Nome: tema scuro
    contesto:
Testo: clicca me
Tema: Dark

Gestire altre risorse

Fractal gestisce anche file diversi da markup e dati. Qualsiasi CSS, JavaScript, immagini o altre attività che si aggiunge alla cartella Component verrà visualizzata nella scheda "Asset". Puoi specificare a Readme.md. File per il componente in modo da poter scrivere note su come viene utilizzato il componente o collegare ad altre parti della documentazione.

Prossimi passi

Ripetendo l'esempio precedente per tutti i tuoi componenti principali crea un utile catalogo dei principali blocchi del tuo sito. Ma il vero potere di una biblioteca del modello viene dalla capacità di combinare insieme questi pezzi. Assicurati di controllare il Documentazione frattale Per imparare come è possibile iniziare a creare componenti più complessi combinando elementi atomici più piccoli per creare quelli più grandi.

La cartella Docs è un ottimo posto per mettere le informazioni di guida in stile tradizionale e le note supplementari. Ciò potrebbe coprire le cose come la documentazione onboarding, le linee guida sulla voce e il tono del tuo marchio, elenchi di colori e variabili, e così via. Segue la stessa navigazione basata su cartelle come componenti, e se organizzi i file all'interno delle cartelle del soggetto troverai la navigazione del Documenti frattali una brezza.

Frattale supporta anche fonti di dati più complesse. Se è necessario generare un ampio set di dati per un modello, o vuoi estrarlo da qualche API di terze parti, è possibile utilizzare componente-name.config.js. Per restituire un oggetto JavaScript al posto dei dati del file YML.

Infine, frattale consente di utilizzare un numero di diverse lingue di modelli.Assicurati di controllare l'elenco completo nella sua documentazione.E soprattutto, divertiti!

Prenota i tuoi biglietti per creare oggi!Nel New York Puoi imparare da Mina Markham, che ha costruito il sistema di progettazione per la campagna presidenziale di Hillary Clinton, e in San Francisco Stephanie Rewis spiegherà come è possibile architetto e costruire un moderno framework CSS per un "sistema di design vivente" in scala aziendale.

Questo articolo è stato originariamente pubblicato in Net Magazine Edizione 285, Compralo qui

Documenta i tuoi sistemi di progettazione con frattale

Entra frattale

Girandolo

Aggiunta di un componente

Variazioni dei componenti

Variazioni dei dati

Gestire altre risorse

Prossimi passi

Come si fa - Articoli più popolari

10 cose che non sapevi che potresti fare con Photoshop

Aggiungi supporto multi-lingua a Angular

Come scansionare una persona in meno di cinque minuti

Come correggere una composizione difettosa

Dipingi una lepre maliziosa in acquerello

Aggiorna le tue trame in Prostanze Designer

Come utilizzare gli strumenti digitali per creare un look disegnato a mano

Crea tramonti sensazionali in Photoshop

Categorie