Дата блоки

Дата блоки - это вариант разметки форм в системе BOX, при которых выводится значение элемента с возможностью его редактирования.
Он позволяет выводить форму в табличном виде. Слева название элемента формы, справа - результат.
Для редактирования информации пользователь может нажать на соответствующую иконку или само поле, послк чего, в появившемся поле ввода он может отредактировать нужные данные и сохранить их при помощи иконок\кнопок этого поля.
По умолчанию поле заголовка занимает 30% области, при использовании модификатора ширина заголовка становится 200px.
Для отображения дополнительно текста необходимо использовать

<div class="data-view">
    <div class="el-caption static">
        Example caption
        <span class="light">example description</span>
    </div>
    <div class="el-value">
        Example value
        <a class="ob-link-edit" href="#"></a>
    </div>
</div>

Группировка дата блоков

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

<div class="ob-block-details">
    <div class="single-wrap">
        <div class="ob-data-element js-data-element">
            <div class="data-view">
                <div class="el-caption static">
                    Example caption
                </div>
                <div class="el-value">
                    Example value
                    <a class="ob-link-edit" href="#"></a>
                </div>
            </div>

            <div class="data-edit" style="display: none;">
                <a class="ob-link-delete" href="#"></a>
                <a class="ob-link-accept" href="#"></a>
                <select class="chzn-select">
                    <option value="">Example value 1</option>
                    <option value="">Example value 2</option>
                    <option value="">Example value 3</option>
                </select>
            </div>
        </div>

        <div class="ob-data-element js-data-element">
            <div class="data-view">
                <div class="el-caption static">
                    Example caption
                </div>
                <div class="el-value">
                    Example value
                    <a class="ob-link-edit" href="#"></a>
                </div>
            </div>

            <div class="data-edit" style="display: none;">
                <a class="ob-link-delete" href="#"></a>
                <a class="ob-link-accept" href="#"></a>
                <input type="text" value="Example value">
            </div>
        </div>

        <div class="ob-data-element js-data-element">
            <div class="data-view">
                <div class="el-caption static">
                    Example caption
                </div>
                <div class="el-value">
                    Example value
                    <a class="ob-link-edit" href="#"></a>
                </div>
            </div>

            <div class="data-edit" style="display: none;">
                <a class="ob-link-delete" href="#"></a>
                <a class="ob-link-accept" href="#"></a>
                <textarea>Example value</textarea>
            </div>
        </div>
    </div>
</div>

"Умная" групировка дата блоков

"Умная" группировка позволяет группировать дата блоки с учетом размера экрана, создавая колоночную структуру.
Для этого необходимо вместо обвертки single-wrap использовать
Блок ob-data-emptyнеобходим для компенсации свободного места в некратных колонках.

<div class="ob-block-details">
    <div class="flex-wrap">
        ...

        <div class="ob-data-empty"></div>
        <div class="ob-data-empty"></div>
        <div class="ob-data-empty"></div>
    </div>
</div>