Документируйте свои проектные системы с фракталом

Sep 15, 2025

Инструкции

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

К настоящему времени многие из нас знакомы с гиды стиля Отказ Но есть новая порода дизайнерской системной документации, набирая пару: библиотека шаблона. Основная разница между ними является основным источником документации инструмента.

Документация руководства стиля имеет тенденцию возникать из файла Markdown, поэтому для отображения разметки автор часто вынужден копировать и вставлять его в разметку. Это почти невозможно поддерживать при установке нескольких компонентов вместе.

Библиотека шаблона, с другой стороны, относится к нашему компоненту HTML-файлы как граждане первого класса. Каждый компонент получает свою собственную страницу, где отображается разметка и отображается HTML непосредственно из файла HTML. Это гарантирует, что файлы HTML и документация никогда не выходят из синхронизации.

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

Можно объединить несколько шаблонов для создания более сложных дисплеев или даже полных страниц. Эти файлы настолько гибки, что они могут даже использоваться в производстве! Любые изменения, внесенные в нашу библиотеку Pattern, автоматически собираются нашим веб-сайтом, так как вся разметка - для библиотеки или для производства - возникает из одного набора канонических шаблонов.

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

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

Создано ClearLeft, Фрактал Помогает вам создать и документировать библиотеки веб-компонентов и интегрировать их в свои проекты. В этом руководстве мы посмотрим, как это работает (загрузите готовую версию демонстрации в здесь ).

Fractal - это модуль Node.js, который устанавливается через NPM. Сначала вы хотите установить модуль глобально, чтобы вы могли создать новый проект:

npm install --global @frctl/fractal

С помощью этого пакета установлено, создайте новый проект:

fractal new project-name

Эта команда загорена руководством по установке, которое проводит вас через процесс установки. Это попросит вас за название проекта; имена компонентов, документации и общедоступные папки; И если вы будете использовать Git для управления версиями. Как только эти вопросы будут завершены, Fractal установит все необходимые модули и устанавливает структуру папки, как указано.

Если вы хотите пропустить глобальную установку и создать проект вручную, инструкции по эксплуатации Install Install можно найти в здесь Отказ

Сверяние его вверх

Теперь у вас есть полностью установленный проект Fractal, разверните его, наступая в папку проекта CD Project-name и запуск команды Fractal Sync. Это запускает локальный сервер, наблюдает за файлами для изменений и автоматически запускает Browsersync:

fractal start --sync

И так же, как у вас есть рабочий экземпляр фрактала. Откройте свой браузер выбора и перейдите к http: // localhost: 3000 Чтобы увидеть начало вашего нового проекта Fractal. Чтобы не требовать всех устанавливать фрактал глобально, создать сценарий в вашем Package.json. Это называет двоичный двоичный.

 «Сценарии»: {
    «Фрактал»: «./NODE_MODULES/.BIN/fractal Start --sync»
}

Теперь вы можете использовать NPM беги фрактал без необходимости устанавливать все глобально.

Добавление компонента

Теперь вы начали проект Fractal, пришло время добавлять некоторые компоненты. Файлы стартера поставляются с компонентом под названием «Пример», но мы собираемся избавиться от этого и сделать новый с нуля.

Одна из лучших вещей о Fractal - это то, что вы можете организовать ваши компоненты, однако вам нравится в папке компонентов, и она автоматически имитирует эту организацию в навигацию библиотеки Pattern.

Для первого компонента мы создадим новую первичную кнопку внутри Кнопка папка Отказ Для этого создать с файлом шаблона в Компоненты / кнопки / первичная кнопка / первичная кнопка. Отказ Фрактал поддерживает шаблоны руль из коробки, поэтому используйте .hbs. расширение файла:

 <Код> & lt; Кнопка класса = "Первичная кнопка" и GT; {{text}};

То {{текст}} Строка внутри тега кнопки - это переменное заполнителем, и это позволяет использовать шаблон, передавая разные значения для текст из файла данных.

Чтобы создать файл данных, используйте одно и то же базовое имя, что и файл руля, но с другим yml. расширение. Теперь Основная кнопка .Config.yml. сидя внутри Компоненты / Кнопки / Первичные кнопки Папка должна выглядеть так:

 Название: первичная кнопка
контекст:
    Текст: Нажмите меня

Все это вместе создает ваш первый новый компонент, первичная кнопка, член категории кнопки с текстом: «Нажмите Me».

Вариации компонентов

Фрактал поддерживает вариации того же компонента, что позволяет нам отображать тот же компонент с различными классами или атрибутами модификатора. Итак, скажем, мы хотели иметь возможность использовать темноту тематическую кнопку. Мы могли бы создать новый файл шаблона Основная кнопка - Dark.hbs Рядом с нашим оригинальным шаблоном (двойная тире обозначает эти вариации компонентов). В этом шаблоне мы применим модификатор, который мы можем подключить к прикреплению новых стилей.

 & lt; Кнопка класса = "Основная кнопка" data-theme = "Dark" & gt; {{Text}} {lt; / button & gt;

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

. PRIMARY-кнопка [Data-Theme = «Dark»] {}

Вариации данных

Так же, как мы можем определить вариации, создав несколько файлов шаблонов, мы также можем создавать вариации в наших данных. Мы можем сделать это внутри Основная кнопка .Config.yml. Файл, добавив массив вариантов.

 Название: первичная кнопка
контекст:
    Текст: нажмите меня
Варианты:
- Имя: скачать
    контекст:
Текст: Скачать сейчас
- Имя: установить
    контекст:
Текст: Установите сейчас

Это создаст новые варианты, названные «Download» и «Установить», с другим текстом, переданным в кнопку. Более практичный пример может быть, если бы вы использовали это же Первичная кнопка Шаблон в фрактал, а также производство. В этом случае, вместо того, чтобы создать совершенно новый шаблон для своей темной темы, вы можете пропустить значение темы в качестве переменной и использовать вариации данных, чтобы показать все темы разных кнопок.

.

Название: первичная кнопка
контекст:
    Текст: нажмите меня
    Тема: свет
Варианты:
- Имя: темная тема
    контекст:
Текст: нажмите меня
Тема: темно

Обработка других активов

Фрактал также будет обрабатывать файлы, отличные от Markup и Data. Любые CSS, JavaScript, изображения или другие активы, которые вы добавляете в папку компонента, будут отображаться на вкладке «Активы». Вы можете указать Readme.md.md Файл для компонента, чтобы вы могли писать заметки о том, как используется компонент, или ссылка на другие части документации.

Следующие шаги

Повторяя предыдущий пример для всех ваших основных компонентов создает полезный каталог основных строительных блоков вашего сайта. Но реальная мощность библиотеки шаблона исходит от умения объединить эти части вместе. Обязательно проверьте Фрактальная документация Чтобы узнать, как вы можете начать создавать более сложные компоненты, сочетая меньшие атомные элементы для создания больших.

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

Фрактал также поддерживает более сложные источники данных. Если вам нужно создать большой набор данных для шаблона, или хотите вытащить его в третьей сторонней API, вы можете использовать Компонент-name.config.js. Чтобы вернуть объект JavaScript вместо данных файла YML.

Наконец, фрактал позволяет использовать несколько различных языков шаблонов.Обязательно проверьте полный список в своей документации.И больше всего, веселиться!

Забронируйте свои билеты в Генерация сегодня!В Нью-Йорк Вы можете узнать у MINA Markham, которые построили систему дизайна для президентской кампании Хиллари Клинтон и в Сан-Франциско Стефани REWIS объяснит, как вы можете архитекторуйте и построить современную структуру CSS для «Системы живой конструкции» в масштабе предприятия.

Эта статья была первоначально опубликована в чистом журнале News 285, Купить это здесь

Документируйте свои проектные системы с фракталом

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

Сверяние его вверх

Добавление компонента

Вариации компонентов

Вариации данных

Обработка других активов

Следующие шаги

Инструкции - Самые популярные статьи

Как нарисовать животных: 15 лучших советов

Как визуализировать реалистичные прозрачные поверхности

Как быстро эскиз руки

Разбросание деревьев с V-Ray

Мастер моста инструмент

Как рисовать фэнтезийные звери

Краска эпическая сцена Нью-Йорка

Руководство по созданию трехмерных текстур

Категории