whitepaper

Открытый инструмент для разработки дизайн-системы на основе

комбинаций

простых

сущностей

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

Play

★

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

+

xxxl

Aa

Aа

-

2

∥

8

+

grid ratio

-

4

+

space module

color scheme

Aa

typography styles

Как это работает

Дизайн-система whitepaper помогает сократить количество этапов и участников, для того чтобы сформировать интерфейс готовый к продакшну

Классический процесс

Прототип

Дизайн

HTML & CSS

Фронтенд технология

Готово

Процесс по whitepaper

Дизайн-система

Фронтенд фреймворк

Готово

Ответы на частые вопросы

— Можно ли попробовать в песочнице?

— В любую песочницу можно подключить CSS-файл со всеми собранными стилями дизайн-системы

— Можно ли добавить в готовый проект?

— Можно установить whitepaper как зависимость в проект или подключить файл со всеми стилями на страницу

— Как передавать UI в разработку?

— В виде собранного прототипа вместе с набором используемых блоков

— Можно ли использовать с Реактом?

— Можно использовать с любой технологией, которая умеет оперировать CSS-классами

— Можно ли переопределить блоки?

— Все блоки дизайн-системы можно переопределять и доопределять на уровне проекта

— В чём отличие от Bootstrap?

— Дизайн-система предоставляет весь необходимый набор инструментов, позволяющий реализовать и гибко настроить интерфейсы любого уровня сложности и масштаба

Контрибьюторы

Вся работа над дизайн системой ведётся открыто. Всегда есть несколько задач разного уровня сложности, поэтому любой человек может внести свой вклад

Обучение

Для того, чтобы более уверено чувствовать себя в процессе сборки интерфейсов на whitepaper, мы рекоммендуем:

1. Укрепить ваши знания по вёрстке;

2. Ознакомится с БЭМ-методологией;

3. Понять пост-обработку стилей.

Документация

Как начать использовать

Для старта прототипирования с нуля можно установить БЭМ-платформу с предустановленной дизайн-системой и настроенной сборкой. В уже имеющийся проект можно подключить файл со всеми стилями дизайн-системы или установить её как зависимость

git clone

cd my-whitepaper-project

npm install

0.0.0.0:8080/

В работающем проекте:

npm install whitepaper-bem

Партнеры и друзья