Документуйте свої системи дизайну з фракталом

Sep 12, 2025

Як

Ви любите дізнатись більше про проектні системи? Тоді не пропустіть старший інженер-інтерфейс Міна Мархем на Генерувати Нью-Йорк 28 квітня, де вона обговорить, як вона створила штансування, систему дизайну, яка живила багатьом додаткам, розміщеним на HillaryClinton.com. І на західному узбережжі, в Генерувати Сан-Франциско 9 червня, Стефані Ревіс поділять деякі уроки, які вона дізналася під час побудови системи дизайну продажу.

На сьогоднішній день багато хто з нас знайомі Стильні посібники . Але є нова порода дизайнерської системи документації, що отримує пару: бібліотека шаблонів. Основна різниця між двома є основним джерелом документації інструменту.

Документація посібника стилю має тенденцію, щоб походить від файлу маркування, тому, щоб показати, що автор часто змушений копіювати та вставляти його в марку. Це майже неможливо підтримувати при встановленні кількох компонентів.

З іншого боку, бібліотека візерунків, з іншого боку, лікує наші компоненти HTML-файлів як першого класу громадяни. Кожен компонент отримує свою власну сторінку, де він відображає розмітку та надану HTML безпосередньо з файлу HTML. Це забезпечує HTML-файли та документацію, яку ніколи не виходили з синхронізації.

Бібліотеки шаблонів часто будуються, використовуючи шаблонну мову, а не простий HTML. Шаблони можуть включати змінні та іншу логіку, потім ми можемо пройти в різних наборах даних, що дозволяють відображати варіації компонента, який буде відображатися.

Можна об'єднати кілька шаблонів для створення більш складних дисплеїв або навіть повних сторінок. Ці файли настільки гнучкі вони могли навіть бути використані у виробництві! Будь-які зміни, внесені до нашої бібліотеки шаблонів, автоматично підбираються нашим веб-сайтом, оскільки вся оцінка - для бібліотеки або для виробництва - походить від одного набору канонічних шаблонів.

Design systems will be covered at both Generate New York and San Francisco this year — Системи дизайну будуть охоплені як генерувати Нью-Йорк, так і Сан-Франциско цього року

Вводити фрактал

Створені очищенням, Фрактальний допомагає вам будувати та документувати бібліотеки веб-компонентів та інтегрувати їх у ваші проекти. У цьому підручнику ми будемо ближче подивитися, як це працює (завантажте готову версію демонстрації тут ).

Фрактал - це модуль Node.js, який встановлюється через NPM. Спочатку ви хочете встановити модуль у всьому світі, тому ви можете створити новий проект:

npm install --global @frctl/fractal

За допомогою цього пакета встановлено, створіть новий проект:

fractal new project-name

Ця команда випускає посібник з інсталяції, який проходить через процес налаштування. Це запитає вас про назву проекту; назви компонентів, документації та громадських папок; І якщо ви будете використовувати Git для керування версіями. Після завершення ці питання, фрактал встановить всі необхідні модулі та встановити структуру папки, як зазначено.

Якщо ви хочете пропустити глобальну установку та створити проект вручну, інструкції з ручного встановлення можна знайти на тут .

Обертатися

Тепер у вас є повністю встановлений фрактальний проект, обернувши його, поступаючись у папку проекту CD проект-назва і керування командою фрактальної синхронізації. Це запускає локальний сервер, переглядає файли для змін та автоматично запускає браузеринг:

fractal start --sync

І так само, у вас є робочий екземпляр фрактала. Відкрийте свій браузер вибору та перейдіть до http: // localhost: 3000 Щоб переглянути початок вашого нового фрактального проекту. Щоб уникнути потреби всіх, щоб встановити фрактал у всьому світі, створіть скрипт у вашому package.json що викликає фрактальну бінарну.

 "Сценарії": {
    "Фрактал": "./node_modules/.bin/fractal Start --sync"
}

Тепер ви можете використовувати NPM Run Fractal без необхідності встановлювати нічого глобально.

Додавання компонента

Тепер ви розпочали фрактальний проект, настав час додати деякі компоненти. Початкові файли приходять з компонентом, що називається "Приклад", але ми збираємося позбутися цього і зробити новий з нуля.

Одне з кращих речей про фрактал полягає в тому, що ви можете організувати свої компоненти, однак вам подобається всередині папки компонентів, і він автоматично імітує цю організацію в навігації бібліотеки шаблонів.

Для першого компонента ми створимо нову основну кнопку всередині Кнопка папки . Для цього створіть з файлом шаблону Компоненти / кнопки / первинна кнопка / первинна кнопка . Фрактал підтримує шаблони Handerbar з коробки, тому використовуйте .hbs Розширення файлу:


    & lt; кнопка class = "первинна кнопка" & gt; {{text}} & lt; / button & gt;

Точний {{text}} Рядок всередині кнопки - це змінне заповнювач, і це дозволяє повторно використовувати шаблон, що проходить у різних значеннях для текст з файлу даних.

Щоб створити файл даних, скористайтеся такою ж базою, як файл HandleBar, але з іншим yml розширення. Зараз первинна кнопка.config.yml сидячи всередині Компоненти / кнопки / первинні кнопки Папка повинна виглядати так:

 Назва: первинна кнопка
Контекст:
    Текст: натисніть мене

Все це разом створює ваш перший новий компонент, первинну кнопку, член категорії кнопки, з текстом: "Натисніть" Я ".

Компонентні варіації

Фрактал підтримує варіації того ж компонента, що дозволяє нам відображати той же компонент з різними класами модифікатора або атрибутами. Так що скажемо, що ми хотіли мати можливість використання темної тематичної кнопки. Ми могли б створити новий файл шаблону Первинна кнопка - Dark.hbs Поряд з нашим оригінальним шаблоном (подвійна дефіс позначає ці компоненти варіанти). У цьому шаблоні ми застосуємо модифікатор, який ми можемо прикріпити, щоб прикріпити нові стилі.

 & lt; кнопка Class = "первинна кнопка" Data-theme = "dark" & gt; {{text}} & lt; / button & gt;

Тепер, коли ми пишемо наші CSS, ми можемо включити наступний селектор, щоб змінити цей шаблон з модифікацією стилів.

 .primary-кнопка [data-theme = "dark"] {}

Варіанти даних

Так само, як ми можемо визначити варіації, створюючи кілька файлів шаблону, ми також можемо створювати варіанти в наших даних. Ми можемо зробити це всередині первинна кнопка.config.yml Файл, додавши масив варіантів.

 Назва: первинна кнопка
Контекст:
    Текст: натисніть мене
Варіанти:
- Назва: Завантажити
    Контекст:
Текст: Завантажити зараз
- Назва: Встановлення
    Контекст:
Текст: Встановіть зараз

Це створить нові варіації, названі "Завантажити" та "Встановити", з різним текстом перейшов у кнопку. Більш практичним прикладом може бути, якщо ви використовували те ж саме первинна кнопка Шаблон у фракталі, а також виробництво. У цьому випадку, а не створювати новий шаблон для вашої темної теми, ви можете пройти значення теми як змінну та використовувати варіанти даних, щоб показати всі різні теми.

 & lt; Кнопка Class = "Первинна кнопка" Data-theme = "{{theme}}" & gt; {{text}} & lt; / button & gt;

Назва: первинна кнопка
Контекст:
    Текст: натисніть мене
    Тема: Світло
Варіанти:
- Назва: темна тема
    Контекст:
Текст: натисніть мене
Тема: Темна

Обробка інших активів

Фрактал також буде обробляти файли, крім розмітки та даних. Будь-який CSS, JavaScript, зображення або інші активи, які ви додаєте до папки компонентів, будуть відображатися у вкладці "Аналіти". Ви можете вказати a Readme.md Файл для компонента, щоб ви могли писати нотатки про те, як використовується компонент, або посилання на інші частини документації.

Наступні кроки

Повторюючи попередній приклад для всіх ваших основних компонентів, створює корисний каталог основних будівельних блоків вашого сайту. Але реальна сила бібліотеки шаблонів походить від здатності об'єднати ці частини разом. Обов'язково перевірте Фрактальна документація Щоб дізнатись, як ви можете створити більш складні компоненти, поєднуючи менші атомні елементи для створення більших.

Папка Docs - це чудове місце, щоб покласти традиційний стиль керівництва та додаткові нотатки. Це може охоплювати такі речі, як на борту документації, керівні принципи вашого бренда та тонусу, списки кольорів та змінних, тощо. Це випливає з тієї ж навігації на основі папки, як компоненти, і якщо ви організуєте свої файли в тематичних папках, ви знайдете навігацію Фрактальні документи вітер.

Фрактал також підтримує більш складні джерела даних. Якщо вам потрібно створити великий набір даних для шаблону, або хочете витягнути його з третьої сторони API, ви можете використовувати Компонент-name.config.js Щоб повернути об'єкт JavaScript замість даних YML-файлів.

Нарешті, фрактал дозволяє використовувати ряд різних мов шаблону.Обов'язково перевірте повний список у своїй документації.І найбільше весело!

Забронювати квитки на Генерувати Сьогодні!В Нью-Йорк Ви можете дізнатись з Mina Markham, який побудував конструкторську систему для президентської кампанії Хілларі Клінтона, а в Росії Сан Франциско Стефані Ревіс пояснить, як ви можете архітектор і побудувати сучасні рамки CSS для "Living Design System" на масштабі підприємства.

Ця стаття була опублікована в чистому журналі 285, купити його тут

Документуйте свої системи дизайну з фракталом

Вводити фрактал

Обертатися

Додавання компонента

Компонентні варіації

Варіанти даних

Обробка інших активів

Наступні кроки

Як - Найпопулярніші статті

Як створити місцевий розвиток

Використовуйте негативний простір, щоб зробити кращі руки

Як створити блискучі очі в масляній фарбі

Створіть вітальний інтер'єр за допомогою лінійного мистецтва

Дизайн реактивний сайт з розміром на основі EM

Побудувати додатки, які працюють в автономному режимі

Як побудувати світи для кіно

Секрети виконання короткого дизайну

Категорії