Framework Averin.pro 6.0.0

CSS Framework студии Артемия Аверина
Новости

Старт
Скачать

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

Версия 6.0.0
21 июля 2023 года

Сетка

Колонки

Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
Колонка
// две колонки
<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-10">...</div>
    <div class="is-90">...</div>
</div>
<div class="is-row">
    <div class="is-20">...</div>
    <div class="is-80">...</div>
</div>
<div class="is-row">
    <div class="is-25">...</div>
    <div class="is-75">...</div>
</div>
<div class="is-row">
    <div class="is-30">...</div>
    <div class="is-70">...</div>
</div>
<div class="is-row">
    <div class="is-33">...</div>
    <div class="is-67">...</div>
</div>
<div class="is-row">
    <div class="is-34">...</div>
    <div class="is-66">...</div>
</div>
<div class="is-row">
    <div class="is-35">...</div>
    <div class="is-65">...</div>
</div>
<div class="is-row">
    <div class="is-40">...</div>
    <div class="is-60">...</div>
</div>
<div class="is-row">
    <div class="is-50">...</div>
    <div class="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-40">...</div>
    <div class="is-60">...</div>
</div>

Кирпич

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

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

Без краев

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

<div class="is-row is-padding-0">
    <div class="is-40">...</div>
    <div class="is-60">...</div>
</div>

Стандартные края

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

<div class="is-row is-padding-10">
    <div class="is-40">...</div>
    <div class="is-60">...</div>
</div>

Увеличенные края

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

<div class="is-row is-padding-20">
    <div class="is-40">...</div>
    <div class="is-60">...</div>
</div>

Без отступов вниз

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

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

Стандартные оступы вниз

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

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

Увеличенные отступы вниз

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

<div class="is-row is-margin-20">
    <div class="is-40">...</div>
    <div class="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>