Documentați sistemele de proiectare cu fractal

Sep 11, 2025

să

Vă place să învățați mai multe despre sistemele de proiectare? Atunci nu ratați inginerul UI senior Mina Markham. la Generați New York. La 28 aprilie, unde va discuta modul în care a creat Pantsuit, sistemul de proiectare care a alimentat multe dintre aplicațiile găzduite pe Hillaryclint.ro. Și pe coasta de vest, la Generați San Francisco. La 9 iunie, Stephanie Rewis. va împărtăși unele dintre lecțiile pe care le-a învățat în timp ce construind sistemul de proiectare a vânzărilor.

Până acum, mulți dintre noi suntem familiarizați Ghiduri de stil. . Dar există o nouă rasă de documentație a sistemului de proiectare care câștigă Steam: biblioteca de model. Diferența majoră dintre cele două este sursa primară a documentației instrumentului.

Documentația unui ghid de stil tinde să provină dintr-un fișier Markdown, astfel încât să arate marcajul Autorul este adesea forțat să copieze și să-l lipite în marcaj. Acest lucru este aproape imposibil să se mențină atunci când montați mai multe componente împreună.

O bibliotecă de model, pe de altă parte, tratează fișierele componente HTML ca cetățeni de primă clasă. Fiecare componentă primește pagina proprie, unde afișează marcajul și redactați HTML direct din fișierul HTML. Acest lucru asigură că fișierele HTML și documentația nu ies niciodată din sincronizare.

Bibliotecile de modele sunt adesea construite folosind un limbaj templator, mai degrabă decât HTML simplu. Șabloanele pot include variabile și alte logice, apoi putem trece în diferite seturi de date, permițând ca variațiile unei componente să fie afișate.

Este posibil să combinați mai multe șabloane pentru a crea afișaje mai complexe sau chiar pagini complete. Aceste fișiere sunt atât de flexibile încât să fi putut fi utilizate chiar și în producție! Orice modificări aduse bibliotecii noastre de modele sunt preluate automat de site-ul nostru, ca toate markup - pentru bibliotecă sau pentru producție - provine dintr-un singur set de șabloane canonice.

Design systems will be covered at both Generate New York and San Francisco this year — Sistemele de proiectare vor fi acoperite la ambele generate din New York și San Francisco în acest an

Introduceți Fractal.

Creat de Clearleft, Fractal. Vă ajută să construiți și să documentați bibliotecile componente web și să le integrați în proiectele dvs. În acest tutorial vom face o privire mai atentă la modul în care funcționează (descărcați o versiune finalizată a demo-ului la Aici ).

Fractal este un modul NODE.JS care este instalat prin NPM. Mai întâi doriți să instalați modulul la nivel global, astfel încât să puteți genera un nou proiect:

npm install --global @frctl/fractal

Cu acest pachet instalat, creați un nou proiect:

fractal new project-name

Această comandă se stinge într-un ghid de instalare care vă deplasați prin procesul de configurare. Vă va cere titlul proiectului; numele componentelor, documentației și folderelor publice; și dacă veți folosi git pentru controlul versiunii. Odată ce aceste întrebări sunt complete, Fractal va instala toate modulele necesare și va configura o structură de dosare exact așa cum este specificat.

Dacă doriți să renunțați la instalarea globală și să creați manual proiectul, instrucțiunile de instalare manuală pot fi găsite la Aici .

Rotind-o

Acum aveți un proiect fractal complet instalat, rotiți-l prin trecerea în dosarul proiectului CD-ul proiectului și rularea comenzii fractale de sincronizare. Aceasta pornește un server local, urmărește fișierele pentru modificări și începe automat browseRSYNC:

fractal start --sync

Și așa, ai o instanță de lucru fractală. Deschideți browserul de alegere și navigați la http: // localhost: 3000 pentru a vedea începutul noului dvs. proiect fractal. Pentru a evita necesitatea ca toată lumea să instaleze Fractal la nivel global, să creeze un script în dvs. pachet.json. Asta cheamă binarul fractal.

 "Scripturi": {
    "Fractal": "./node_module/.bin/fractica start --Sync"
}

Acum puteți utiliza NPM rulează fractal fără a fi nevoie să instalați nimic la nivel global.

Adăugând o componentă

Acum ați început un proiect fractal, este timpul să adăugați unele componente. Fișierele de pornire vin cu o componentă numită "exemplu", dar vom scăpa de asta și vom face unul nou de la zero.

Unul dintre cele mai bune lucruri despre Fractal este că vă puteți organiza componentele, totuși vă place în interiorul dosarului componentelor și va imita automat această organizație din navigarea bibliotecă de model.

Pentru prima componentă, vom crea un nou buton principal în interiorul a Dosarul butonului . Pentru a face acest lucru, creați cu un fișier șablon la Componente / butoane / Buton primar / Button primar.hbs . Fractal suportă șabloanele de ghidare din cutie, astfel încât să utilizați .hbs. Extensia fișierului:

  & Lt; Button Class = "Primar-buton" & gt; {{text}} & lt; / buton & gt;

{{text}} șirul din interiorul butonului este un substituent variabil, iar acest lucru vă permite să reutilizați șablonul, trecând în diferite valori pentru text din fișierul de date.

Pentru a crea fișierul de date, utilizați același nume de bază ca fișierul ghidonului, dar cu un altul YML. extensie. Acum Primar-button.config.yml. stând în interiorul Componente / butoane / butoane primare Dosarul ar trebui să arate astfel:

 Titlu: Buton principal
context:
    Text: Faceți clic pe mine

Toate acestea creează împreună prima dvs. componentă nouă, butonul primar, membru al categoriei butonului, cu textul: "faceți clic pe mine".

Variații ale componentelor

Fractal suportă variațiile aceleiași componente, permițându-ne să afișăm aceeași componentă cu diferite clase sau atribute modificatoare. Deci, hai să spunem că am vrut să avem opțiunea de a folosi un buton tematic întunecat. Am putea crea un nou fișier șablon numit Butonul primar - întuneric.hbs Alături de șablonul nostru original (Double Dash denotă aceste variații ale componentelor). În acest șablon vom aplica un modificator pe care îl putem conecta pentru a atașa noi stiluri.

 Button Class = "Primar-buton" Data-temă = "întuneric" & gt; {{text}} & lt; / buton & gt;

Acum, când ne scriem CSS, putem include următorul selector pentru a modifica acest șablon cu modificarea stilurilor.

. Primul buton [Data-temă = "întuneric"] {}

Variații de date

Așa cum putem defini variații prin crearea mai multor fișiere șablon, putem crea și variații în cadrul datelor noastre. Putem face acest lucru în interiorul Primar-button.config.yml. Fișier prin adăugarea unei variante de variante.

 Titlu: Buton principal
context:
    Text: Faceți clic pe mine
Variante:
- Nume: Descărcați
    context:
Text: Descărcați acum
- Nume: Instalare
    context:
Text: Instalați acum

Aceasta va crea noi variații numite "descărcare" și "instalare", cu un text diferit trecut în buton. Un exemplu mai practic ar putea fi dacă ați folosi același lucru Primar-button.hbs. șablon în fractal, precum și producție. În acest caz, mai degrabă decât crearea unui șablon nou nou pentru tema întunecată, ați putea trece valoarea tematică ca variabilă și utilizați variațiile de date pentru a afișa toate temele diferitelor butoane.

 Button Class = "Primar-buton" Data-temă = "{{tema}}" & gt; {{text}} & lt; / buton & gt;

Titlu: Buton principal
context:
    Text: Faceți clic pe mine
    Tema: Lumină.
Variante:
- Nume: temă întunecată
    context:
Text: Faceți clic pe mine
Tema: întuneric

Manipularea altor active

Fractal va gestiona, de asemenea, alte fișiere decât marcajul și datele. Orice CSS, JavaScript, imagini sau alte active pe care le adăugați în folderul Component vor fi afișate în fila "Active". Puteți specifica o Readme.md. Fișier pentru component, astfel încât să puteți scrie note despre modul în care componenta este utilizată sau legătură cu alte părți ale documentației.

Pasii urmatori

Repetarea exemplului anterior pentru toate componentele dvs. de bază creează un catalog util al blocurilor principale de construcție ale site-ului dvs. Dar puterea reală a unei biblioteci de model vine de la capacitatea de a combina aceste piese împreună. Asigurați-vă că verificați Documentație fractală Pentru a afla cum puteți începe să creați componente mai complexe prin combinarea elementelor atomice mai mici pentru a crea cele mai mari.

Documentul Docs este un loc minunat pentru a pune informații tradiționale de ghidare și note suplimentare. Acest lucru ar putea acoperi lucruri precum documentația de onoare, orientări ale vocii și tonului mărcii dvs., liste de culori și variabile și așa mai departe. Rezultă aceeași navigare bazată pe foldere ca și componente, iar dacă organizați fișierele în dosarele de subiect veți găsi navigarea Documente fractale o briza.

Fractalul susține, de asemenea, surse mai complexe de date. Dacă aveți nevoie să generați un set mare de date pentru un șablon sau doriți să îl trageți de la un anumit API al unei terțe părți, puteți utiliza componenta-name.config.js. Pentru a returna un obiect JavaScript în locul datelor fișierului YML.

În cele din urmă, Fractal vă permite să utilizați un număr de limbi diferite de templare.Asigurați-vă că verificați lista completă în documentația sa.Și mai presus de toate, se distrează!

Rezervați biletele la Genera astăzi!În New York Puteți învăța de la Mina Markham, care a construit sistemul de proiectare pentru campania prezidențială a lui Hillary Clinton și în San Francisco. Stephanie Rewis va explica modul în care puteți arhitect și construi un cadru CSS modern pentru un "sistem de design viu" la scara Enterprise.

Acest articol a fost inițial publicat în revista Net Problema 285, Cumpărați-l aici

Documentați sistemele de proiectare cu fractal

Introduceți Fractal.

Rotind-o

Adăugând o componentă

Variații ale componentelor

Variații de date

Manipularea altor active

Pasii urmatori

să - Cele mai populare articole

Cum să atragă cifre mai realiste

Construiți terenul în Houdini 17

21 moduri de a vă optimiza CSS și accelerați site-ul dvs.

Folosiți butonul de instrumente MARMOSET pentru a prezenta modele în VR

Cum se corectează o compoziție defectuoasă

Cum să sculptați în cinema 4d

Desenați un portret creion al unui câine

Cum de a desena un peisaj cu pasteluri

Categorii