Framework Averin.pro

CSS Framework дизайн студии Артемия Аверина

Сетка

Колонки

Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
// две колонки
<div class="is-row">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>

// три колонки
<div class="is-row">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div> 

Ширина

Шаг 5 процентов. От 5 до 100

5
95
10
90
15
85
20
80
25
75
30
70
33/34
67/66
35
65
40
60
45
55
50
50
<div class="is-row">
    <div class="is-col is-10">...</div>
    <div class="is-col is-90">...</div>
</div>
<div class="is-row">
    <div class="is-col is-20">...</div>
    <div class="is-col is-80">...</div>
</div>
<div class="is-row">
    <div class="is-col is-25">...</div>
    <div class="is-col is-75">...</div>
</div>
<div class="is-row">
    <div class="is-col is-30">...</div>
    <div class="is-col is-70">...</div>
</div>
<div class="is-row">
    <div class="is-col is-33">...</div>
    <div class="is-col is-67">...</div>
</div>
<div class="is-row">
    <div class="is-col is-34">...</div>
    <div class="is-col is-66">...</div>
</div>
<div class="is-row">
    <div class="is-col is-35">...</div>
    <div class="is-col is-65">...</div>
</div>
<div class="is-row">
    <div class="is-col is-40">...</div>
    <div class="is-col is-60">...</div>
</div>
<div class="is-row">
    <div class="is-col is-50">...</div>
    <div class="is-col is-50">...</div>
</div> 

Без зазора

Колонка
Колонка
Колонка
40
60
<div class="is-row is-gapless">
    <div class="is-col">...</div>
    <div class="is-col">...</div>
    <div class="is-col">...</div>
</div>

<div class="is-row is-gapless">
    <div class="is-col is-40">...</div>
    <div class="is-col is-60">...</div>
</div> 

Столбцы с одинаковой высотой

1
1
2
3
<div class="is-row">
    <div class="is-col">
        ...
    </div>
    <div class="is-col">
        ...
        ...
        ...
    </div>
</div> 

Порядок столбцов

Вторая колонка
Первая колонка
<div class="is-row">
    <div class="is-col order-2">Будет выдаваться второй по порядку</div>
    <div class="is-col order-1">Будет выдаваться первой по порядку</div>
    <div class="is-col mobile-order-2">Будет выдаваться второй по порядку в мобильной версии</div>
    <div class="is-col mobile-order-1">Будет выдаваться первой по порядку в мобильной версии</div>
</div> 
Внимание! Имеется возможность использовать только 9 порядков.

Строчка

Первая колонка
Вторая колонка
Первая колонка
Вторая колонка
<div class="is-row is-border">
    <div class="is-col order-2">Будет выдаваться второй по порядку</div>
    <div class="is-col order-1">Будет выдаваться первой по порядку</div>
    <div class="is-col mobile-order-2">Будет выдаваться второй по порядку в мобильной версии</div>
    <div class="is-col mobile-order-1">Будет выдаваться первой по порядку в мобильной версии</div>
</div> 
Старт

Типографика
Сетка
Формы
Таблицы
Кнопки
Метки
Пагинация
Крошки
Мобильное меню
Окна
Аниматор
Подсказки
Наверх
Уведомления
Помощники
Плагины
Виджеты

Шаблоны

Редактор WYSIWYG

Новости обновлений

Скачать

4.6 - 18 сентября 2019 года

Старт

Типографика
Сетка
Формы
Таблицы
Кнопки
Метки
Пагинация
Крошки
Мобильное меню
Окна
Аниматор
Подсказки
Наверх
Уведомления
Помощники
Плагины
Виджеты

Шаблоны

Редактор WYSIWYG

Новости обновлений

Скачать

Версия 4.6 - 18 сентября 2019 года