Открытый инструмент для разработки дизайн-системы на основе
комбинаций
простых
сущностей
1.
Тема
Цвета, отступы, размеры, брейкпоинты
2.
Каркас
Обвязка, сетка
3.
Паттерны
Списки, карточки, таблицы, формы и т.д.
4.
Контент
Типографика, бэйджи, аватарки
Browse Music
Discover
Genres
Top Charts
Collabs
Free Music
Stations
Your Music
Favourites
History
Your Playlists
Public Playlist
Purchased
My First Playlist
Music
Best singles of month
What hot this weekend
What hot this weekend
What hot this weekend
What hot this weekend
Remixes
Latest relises
Worry Bout Us | 6:20 | ★ | |
Worry Bout Us | 6:20 | ★ |
Top songs
Worry Bout Us | 6:20 | ★ | |
Worry Bout Us | 6:20 | ★ |
-
24
+
3xl
Aa
Aa
Aа
-
2
∥
8
+
grid ratio
-
4
+
space module
color scheme
Aa
Aa
Aa
Aa
typography styles
Как это работает
Дизайн-система whitepaper помогает сократить количество этапов и участников, для того чтобы сформировать интерфейс готовый к продакшну
Классический процесс
Прототип
Дизайн
HTML & CSS
Фронтенд технология
Готово
Процесс по whitepaper
Дизайн-система
Фронтенд фреймворк
Готово
Ответы на частые вопросы
— Можно ли попробовать в песочнице?
— В любую песочницу можно подключить CSS-файл со всеми собранными стилями дизайн-системы
— Можно ли добавить в готовый проект?
— Можно установить whitepaper как зависимость в проект или подключить файл со всеми стилями на страницу
— Как передавать UI в разработку?
— В виде собранного прототипа вместе с набором используемых блоков
— Можно ли использовать с Реактом?
— Можно использовать с любой технологией, которая умеет оперировать CSS-классами
— Можно ли переопределить блоки?
— Все блоки дизайн-системы можно переопределять и доопределять на уровне проекта
— В чём отличие от Bootstrap?
— Дизайн-система предоставляет весь необходимый набор инструментов, позволяющий реализовать и гибко настроить интерфейсы любого уровня сложности и масштаба
События
Dribbble Meetup, 2018
Санкт-Петербург
Web Standards, 2018
Москва
Контрибьюторы
Вся работа над дизайн-системой ведётся открыто. Всегда есть несколько задач разного уровня сложности, поэтому любой человек может внести свой вклад
GitHubОбучение
Для того, чтобы более уверено чувствовать себя в процессе сборки интерфейсов на whitepaper, мы рекоммендуем:
Документация1. Укрепить ваши знания по вёрстке;
2. Ознакомится с БЭМ-методологией;
3. Понять пост-обработку стилей.
Как начать использовать
Для старта прототипирования с нуля можно установить БЭМ-платформу с предустановленной дизайн-системой и настроенной сборкой. В уже имеющийся проект можно подключить файл со всеми стилями дизайн-системы или установить её как зависимость
cd my-whitepaper-project
npm install
0.0.0.0:8080/
В работающем проекте:
npm install whitepaper-bem
Партнеры и друзья
