Dokumentuj swoje systemy projektowe Fraktal

Sep 16, 2025

Jak

Czy masz ochotę na więcej nauki na temat systemów projektowych? Więc nie przegap starszego inżyniera UI Mina Markham. w Generować Nowy Jork W dniu 28 kwietnia, gdzie omówi, w jaki sposób stworzyła Pantsuit, system projektowania, który zasilał wiele aplikacji hostowanych na HillaryClinton.com. I na zachodnim wybrzeżu, w Generować San Francisco. 9 czerwca, Stephanie Rewi Podzielą niektóre z lekcji, których nauczyła się, budując system projektowania Salesforce.

Do tej pory wielu z nas znamy prowadnice stylów. . Istnieje jednak nowa rasa dokumentacji projektowej zyskuje parą: biblioteka wzorca. Główną różnicą między dwoma jest głównym źródłem dokumentacji narzędzia.

Dokumentacja przewodnika stylów ma tendencję do pochodzi z pliku Markdown, aby pokazać znacznik, który autor jest często wymuszany do skopiowania i wklejania go w marka. Jest to prawie niemożliwe do utrzymania podczas montażu wielu komponentów razem.

Z drugiej strony biblioteka wzorca traktuje nasze pliki HTML komponentowe jako obywatele pierwszej klasy. Każdy komponent otrzymuje własną stronę, gdzie wyświetla znaczniki i renderowanie HTML bezpośrednio z pliku HTML. Zapewnia to, że pliki HTML i dokumentację nigdy nie wydostają się z synchronizacji.

Biblioteki wzoru są często budowane przy użyciu języka templującego, a nie zwykłego HTML. Szablony mogą obejmować zmienne i inne logiki, możemy przejść w różnych zestawach danych, umożliwiając wymianę wyświetlania komponentu.

Możliwe jest połączenie kilku szablonów, aby utworzyć bardziej złożone wyświetlacze, a nawet pełne strony. Pliki te są tak elastyczne, mogą być nawet używane w produkcji! Wszelkie zmiany wprowadzone do naszej biblioteki wzorcowej są automatycznie odbierane przez naszą stronę internetową, ponieważ wszystkie znaczniki - dla biblioteki lub do produkcji - pochodzi z jednego zestawu szablonów kanonicznych.

Design systems will be covered at both Generate New York and San Francisco this year — Systemy projektowe będą objęte zarówno generują Nowy Jork, jak i San Francisco w tym roku

Wpisz Fractal.

Stworzony przez Clearleft, Fraktal Pomaga zbudować i dokumentować bibliotek komponentów internetowych i zintegrować je do swoich projektów. W tym samouczku przyjrzymy się bliżej, jak to działa (pobierz gotową wersję demo na tutaj ).

Fractal jest modułem node.js zainstalowany przez NPM. Najpierw chcesz zainstalować moduł na całym świecie, aby można było wygenerować nowy projekt:

npm install --global @frctl/fractal

Zainstalowano ten pakiet, utwórz nowy projekt:

fractal new project-name

Polecenie to wystrzeliwuje podręcznik instalacji, który przechodzi przez proces instalacji. Poprosi cię o tytuł projektu; nazwy składników, dokumentacji i folderów publicznych; A jeśli będziesz używany GIT dla kontroli wersji. Po zakończeniu tych pytań Fractal zainstaluje wszystkie wymagane moduły i skonfigurować strukturę folderów, tak jak określono.

Jeśli chcesz pominąć globalną instalację i stwórz projekt ręcznie, instrukcje instalacji ręcznej można znaleźć w tutaj .

Wiruje go

Teraz masz w pełni zainstalowany projekt fraktalny, obróć go, wchodząc do folderu projektu Nazwa projektu CD i prowadzenie komendy synchronizacji fraktali. Uruchamia się z lokalnym serwerem, obserwuje pliki do zmian i automatycznie uruchamia Browsersync:

fractal start --sync

I tak dobrze, masz instancję roboczą Fractal. Otwórz wybór przeglądarki i przejdź do http: // localhost: 3000 Aby zobaczyć początek twojego nowego projektu Fractal. Aby uniknąć wymagania wszystkich do zainstalowania fraktali na całym świecie, utwórz skrypt w swoim pakiet.json. to wywołuje fraktalna binarna.

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

Teraz możesz użyć NPM Run Fractal. bez konieczności instalowania wszystkiego na całym świecie.

Dodanie komponentu.

Teraz zacząłeś projekt fraktalny, nadszedł czas, aby dodać pewne komponenty. Pliki starterowe są wyposażone w komponent o nazwie "przykład", ale pozbycie się tego i zrobimy nowy od podstaw.

Jedną z najlepszych rzeczy na temat Fraktalu jest to, że możesz zorganizować swoje komponenty, jednak lubisz w folderze komponentów, a automatycznie naśladuje tę organizację w nawigacji biblioteki wzoru.

Dla pierwszego komponentu utworzymy nowy podstawowy przycisk wewnątrz Folder . Aby to zrobić, utwórz za pomocą pliku szablonu elementy / przyciski / podstawowy przycisk / podstawowy przycisk.HBS . Fraktal obsługuje szablony kierowców z pudełka, więc użyj .hbs. rozszerzenie pliku:

  & LT; przycisk Class = "Podstawowy przycisk" & GT; {{TEXT}} & LT; / Button & GT;

The. {{tekst}} Ciąg wewnątrz znacznika przycisku jest zmiennym symbolem zastępczym, a to pozwala ponownie użyć szablonu, przechodząc w różnych wartościach tekst z pliku danych.

Aby utworzyć plik danych, użyj tej samej nazwy podstawowej jako pliku kierownicy, ale z innym yml. rozbudowa. Teraz Podstawowy przycisk.Config.yml. siedząc wewnątrz Komponenty / Przyciski / Przyciski podstawowe Folder powinien wyglądać tak:

 Tytuł: Przycisk podstawowy
kontekst:
    Tekst: kliknij mnie

Wszystko to razem tworzy twój pierwszy nowy komponent, przycisk podstawowy, członek kategorii przycisku, z tekstem: "Kliknij mnie".

Warianty składowe

Fraktal obsługuje odmiany tego samego składnika, co pozwala nam wyświetlić ten sam element z różnymi klasami modyfikatorami lub atrybutami. Powiedzmy więc, że chcemy mieć możliwość korzystania z przycisku Mrocznego tematycznego. Możemy utworzyć nowy plik szablonu Podstawowy przycisk - Dark.hbs Oprócz naszego oryginalnego szablonu (podwójna kreska oznacza te odmiany komponentów). W tym szablonie zastosujemy modyfikator, który możemy podłączyć do dołączenia nowych stylów.

 & LT; Class Class = "Przycisk podstawowy" Data-Theme = "Dark" & GT; {{TEXT}} & LT; / Button & GT;

Teraz, gdy piszemy nasze CSS, możemy dołączyć następujący selektor, aby zmienić ten szablon z modyfikującymi stylami.

. Primary - przycisk [Data-Theme = "Dark"] {}

Odmiany danych

Podobnie jak możemy zdefiniować odmiany, tworząc wiele plików szablonów, możemy również tworzyć odmiany w ramach naszych danych. Możemy to zrobić wewnątrz Podstawowy przycisk.Config.yml. Plik, dodając tablicę wariantów.

 Tytuł: Przycisk podstawowy
kontekst:
    Tekst: Kliknij mnie
Warianty:
- Nazwa: Pobierz
    kontekst:
Tekst: Pobierz teraz
- Nazwa: instalacja
    kontekst:
Tekst: Zainstaluj teraz

Spowoduje to utworzenie nowych odmian nazwanych "Pobierz" i "Install", z innym tekstem przeszedł do przycisku. Bardziej praktyczny przykład może być użyty tego samego Podstawowy przycisk.HBS. Szablon w fraktali, a także produkcji. W tym przypadku, zamiast tworzyć zupełnie nowy szablon do swojego tematu, można zdać wartość tematyczną jako zmienną i użyć odmian danych, aby pokazać wszystkie różne motywy przycisków.

 & LT; przycisku Class = "Przycisk podstawowy"-Theme-Theme = "{{THEE}}" & GT; {{TEXT}} & LT; / Button & GT;

Tytuł: Podstawowy przycisk
kontekst:
    Tekst: Kliknij mnie
    Temat: Light.
Warianty:
- Nazwij: Ciemny motyw
    kontekst:
Tekst: Kliknij mnie
Temat: ciemny

Obsługa innych aktywów

Fraktal obsługuje również pliki inne niż znaczniki i dane. Wszelkie CSS, JavaScript, obrazy lub inne aktywa, które dodajesz do folderu Komponent, będą wyświetlane w zakładce "Aktywa". Możesz określić Readme.md. Plik dla komponentu, aby można było napisać notatki dotyczące sposobu stosowania komponentu lub link do innych części dokumentacji.

Następne kroki

Powtarzanie poprzedniego przykładu dla wszystkich podstawowych komponentów tworzy użyteczny katalog głównych bloków konstrukcyjnych witryny. Ale prawdziwa moc biblioteki wzorców pochodzi z możliwości łączenia tych kawałków. Pamiętaj, aby sprawdzić Fraktalna dokumentacja Aby dowiedzieć się, w jaki sposób możesz rozpocząć tworzenie bardziej złożonych elementów, łącząc mniejsze elementy atomowe do tworzenia większych.

Folder Docs jest doskonałym miejscem do umieszczenia w tradycyjnym stylu informacyjnym i uzupełniające notatki. Może to obejmować takie rzeczy jak nabierając dokumentację, wytyczne dotyczące głosu i tonów Twojej marki, listy kolorów i zmiennych i tak dalej. Wynika z tej samej nawigacji opartej na folderze jako komponenty, a jeśli organizujesz pliki w folderach przedmiotów, znajdziesz nawigację Fractal Docs. Bryza.

Fractal obsługuje również bardziej złożone źródła danych. Jeśli chcesz wygenerować duży zestaw danych dla szablonu lub chcesz go wyciągnąć z API niektórych osób trzecich, możesz użyć komponent-name.config.js. Aby przywrócić obiekt JavaScript w miejscu danych plików YML.

Wreszcie Fractal umożliwia korzystanie z wielu różnych języków templatingowych.Pamiętaj, aby sprawdzić pełną listę w swojej dokumentacji.A przede wszystkim baw się dobrze!

Zarezerwuj bilety Generować dzisiaj!W Nowy Jork Możesz się nauczyć od Mina Markham, który zbudował system projektowania do kampanii prezydenckiej Hillary Clinton, aw San Francisco Stephanie Rewis wyjaśni, w jaki sposób możesz architekta i zbudować nowoczesne ramy CSS dla "żywego systemu projektowania" w skali korporacyjnej.

Ten artykuł został pierwotnie opublikowany w netto Emisji Magazine 285, Kupuj tutaj

Dokumentuj swoje systemy projektowe Fraktal

Wpisz Fractal.

Wiruje go

Dodanie komponentu.

Warianty składowe

Odmiany danych

Obsługa innych aktywów

Następne kroki

Jak - Najpopularniejsze artykuły

Jak czyścić pędzle: ostateczny przewodnik

Jak rysować perspektywę

Zbuduj szybki reaktywny blog z svelte i sapper

Zbuduj portal klienta z WordPress

Utwórz stronę Lądowania WebGL 3D

Designer powinowactwo: Jak korzystać z eksportu persona

Utwórz chmury z Fumefx dla 3DS max

Jak dodać wideo do interaktywnych plików PDF

Kategorie