bukatchuk ui

Элементы

Сетки

Сетки в две и три колонки и ячейка с рамкой; на узком экране колонки встают в одну.

grid с версии 0.1.0

Примеры

Две колонки

Встречи

Создавайте встречи и приглашайте участников.

Контакты

Список людей, которых вы часто приглашаете.

<div class="grid2">
  <div class="cell"><h3>Встречи</h3><p>Создавайте встречи и приглашайте участников.</p></div>
  <div class="cell cell--dark"><h3>Контакты</h3><p>Список людей, которых вы часто приглашаете.</p></div>
</div>
Три колонки

Запись

Запись встречи хранится 30 дней.

Чат

Переписка доступна всем участникам.

API

Управление встречами из скриптов.

<div class="grid3">
  <div class="cell"><h3>Запись</h3><p>Запись встречи хранится 30 дней.</p></div>
  <div class="cell"><h3>Чат</h3><p>Переписка доступна всем участникам.</p></div>
  <div class="cell cell--safety"><h3>API</h3><p>Управление встречами из скриптов.</p></div>
</div>
Поля формы в две колонки
<div class="grid2 grid2--form">
  <label class="field"><span class="field__label">Имя</span><input class="field__input" name="first" value="Пётр"></label>
  <label class="field"><span class="field__label">Фамилия</span><input class="field__input" name="last" value="Иванов"></label>
</div>

Установка

bukatchuk-ui add grid

Вместе с компонентом установятся: tokens, fonts, base, field.

Файлы

ФайлНазначение
grid.cssстили
example.htmlобразец разметки, в проект не копируется
grid.jinja.htmlвставка для Jinja

Варианты

КлассНазначение
grid2--form
grid2--top
cell--dark
cell--safety

Макрос для Jinja

{#- Сетка; содержимое — блок caller(). cols: 2 | 3; form=True — плотная сетка для полей формы; top=True — выравнивание по верху. -#}
{% macro grid(cols=2, form=False, top=False) -%}
<div class="grid{{ cols }}{% if form %} grid2--form{% endif %}{% if top %} grid2--top{% endif %}">{{ caller() }}</div>
{%- endmacro %}