v
Описание
# Установка, подключение
Установка в проект:
npm i goodt-framework-css --save
npm i less --save-dev
npm i less-loader --save-devПодключение в проекте:
// ваш <enty-point>.js
import 'goodt-framework-css/src/_all.less'Stand-alone сборка:
npm run build# Структура
Описание директории
.src/components/... |
набор компонентов |
_all.less |
точка входа, собирает все части фреймворка воедино |
_helpers.less |
набор вспомогательных примесей |
_params.less |
основные параметры всего фреймворка, используются всеми частями фреймворка |
grid.less |
отзывчивая flex сетка 5%, 1/12, 1/24 |
typography.less |
базовые стили, типографика |
utility.less |
набор вспомогательных классов "утилит" |
# Компоненты
Компонент условно делится на три части
[1] параметры |
параметры, которые использует компонент |
[2] хуки |
встроенные в стили компонента хуки, которые позволяют внедрять кастомный стиль в то или иное правило компонента |
[3] стиль |
стиль компонента, описывающий внешний вид компонента, используя параметры и
хуки |
Пример компонента
components/example.less// [1] параметры, которые использует компонент
@example-font-size: .8rem;
@example-line-height: 1.5;
@example-padding: @spacer3 @spacer4;
@example-color: @color-white;
@example-background: @color-body;
// [2] хук, вызываемый в стиле компонента; позволяет переопределить стиль компонента
.hook-example() {}
// [3] стиль
.example {
position: relative;
display: inline-block;
vertical-align: middle;
padding: @example-padding; // <-- использование параметров [1]
color: @example-color;
font-size: @example-font-size;
line-height: @example-line-height;
background: @example-background;
.hook-example(); // <-- вставка хука [2]
}# Кастомизация
Для кастомизации необходимо импортировать точку входа
_all.less в свой
.less файл, далее можно уже переопределить любой параметр фреймворка в тч элементов
или компонентов; или переопределить стили используя хуки.Пример:
my-theme.less// импорт фреймворка
@import './<путь>/_all.less';
// переопределяем базовые параметры, используемые всеми частями фреймворка из ~ params.less
@font-family: Helvetica, Arial, sans-serif;
@font-family-headings: Helvetica, Arial, sans-serif;
@font-size: 16px;
// переопределяем параметры конкретного компонента ~ components/toast.less
@toast-font-size: 1rem;
// используем хук компонента ~ toast.less
.hook-toast() {
display: inline-flex; // <-- переопределяет "display", который изначально в компоненте "inline-block"
}# Система отступов
В фреймворке реализована система отступов, которая используется для задания
padding и marginОтступы разделены на две группы:
@spacer и @spacer-layout.
Отступы расчитываются от базового значения 16px| название | значение | итог |
|---|---|---|
@spacer1 |
0.125 |
2px |
@spacer2 |
0.25 |
4px |
@spacer3 |
0.5 |
8px |
@spacer4 |
0.75 |
12px |
@spacer5 |
1 |
16px |
@spacer6 |
1.5 |
24px |
@spacer7 |
2 |
32px |
@spacer8 |
2 |
40px |
@spacer9 |
2 |
48px |
@layout-spacer1 |
1 |
16px |
@layout-spacer2 |
1.5 |
24px |
@layout-spacer3 |
2 |
32px |
@layout-spacer4 |
3 |
48px |
@layout-spacer5 |
4 |
64px |
@layout-spacer6 |
6 |
96px |
@layout-spacer7 |
10 |
160px |
# Responsive
Фреймворк позволяет делать отзывчивые (responsive) интерфейсы засчет наличия отзывчивой сетки и
набора утилит и хелперов.
Отзывчивость достигается за счет деления всех разрешений экранов по ширине на условные группы —
Отзывчивость достигается за счет деления всех разрешений экранов по ширине на условные группы —
{viewport}.
Утилиты, css-классы, которые поддерживают работу с режимами отзывчивости помечены
responsive и имеют базовый вид:
.{viewport}-{classname}
// например
.s-text-small
// где
// {viewport} — s
// {classname} — text-smallДля использования групп
{viewport} в кастомных компонентах или классах
используйте less хелпер .media@import './<путь>/_helpers.less'
// пример использования .media хелпера
.my-class {
font-size: 1rem;
}
.media(@viewport-s, .my-class {
font-size: .9rem;
})
# Viewport
Как было сказано выше, все разрешения экранов разбиты по ширине на
{viewport}; ниже показан их список.| less переменная | название {viewport} |
ширина экрана | приоритет |
|---|---|---|---|
| — | — | ∞ | самый низкий |
@viewport-xl |
xl | 0 - 1280px | отменяет default |
@viewport-l |
l | 0 - 1024px | отменяет xl default |
@viewport-m |
m | 0 - 840px | отменяет l xl default |
@viewport-s |
s | 0 - 640px | отменяет m l xl default |
# Css переменные
Ниже приведен список доступных css переменных фреймворка (элемента
:root)
| css переменная | значение |
|---|---|
--viewport-xl | 1280px |
--viewport-l | 1024px |
--viewport-m | 840px |
--viewport-s | 640px |
--ratio-scaling-enabled | false |
--ratio-scaling-viewport-min-width | 1600px |
--container-max-width | 1100px |
--font-family | 'PTRootUIWebRegular',Helvetica,Arial,sans-serif |
--font-family-headings | 'PTRootUIWebRegular',Helvetica,Arial,sans-serif |
--font-size-base | 16px |
--font-size-h1 | 3rem ~ 48px |
--h1-line-height | 3.75rem ~ 60px |
--h1-margin-bottom | 2rem ~ 32px |
--font-size-h2 | 2rem ~ 32px |
--h2-line-height | 2.5rem ~ 40px |
--h2-margin-bottom | 1.5rem ~ 24px |
--font-size-h3 | 1.5rem ~ 24px |
--h3-line-height | 1.875rem ~ 30px |
--h3-margin-bottom | 1rem ~ 16px |
--font-size-h4 | 1.125rem ~ 18px |
--h4-line-height | 1.4375rem ~ 23px |
--h4-margin-bottom | .5rem ~ 8px |
--font-size-xsmaller | .75rem ~ 12px |
--font-size-smaller | .875rem ~ 14px |
--font-size-larger | 1.125rem ~ 18px |
--line-height | 1.5 |
--color-body | #2c2c2c |
--color-link | #1a67fe |
--color-link-dark | #013cb1 |
--color-link-light | #80aafe |
--color-link-focus | rgba(26,103,254,0.3) |
--color-link-hover | #0156fd |
--color-primary | #1a67fe |
--color-primary-dark | #013cb1 |
--color-primary-light | #80aafe |
--color-primary-focus | rgba(26,103,254,0.3) |
--color-primary-hover | #0156fd |
--color-red | #ed5564 |
--color-red-dark | #c71527 |
--color-red-light | #f7b1b8 |
--color-red-focus | rgba(237,85,100,0.3) |
--color-red-hover | #eb3e4f |
--color-green | #0acf83 |
--color-green-dark | #056e45 |
--color-green-light | #49f6b3 |
--color-green-focus | rgba(10,207,131,0.3) |
--color-green-hover | #09b774 |
--color-blue | #5e9dec |
--color-blue-dark | #1868cc |
--color-blue-light | #b9d5f7 |
--color-blue-focus | rgba(94,157,236,0.3) |
--color-blue-hover | #478fe9 |
--color-yellow | #f7c844 |
--color-yellow-dark | #cc9909 |
--color-yellow-light | #fbe5a6 |
--color-yellow-focus | rgba(247,200,68,0.3) |
--color-yellow-hover | #f6c12c |
--color-orange | #ff994d |
--color-orange-dark | #e66200 |
--color-orange-light | #ffd3b3 |
--color-orange-focus | rgba(255,153,77,0.3) |
--color-orange-hover | #ff8a33 |
--color-grey | #999 |
--color-grey-dark | #666 |
--color-grey-light | #dcdcdc |
--color-grey-lighter | #f6f6f6 |
--color-white | #fff |
--color-black | #000 |
--color-muted | #dcdcdc |
--color-disabled | #eee |
--color-disabled-dark | #c8c8c8 |
--color-border | #eee |
--color-highlight | #ffd |
--color-focus | rgba(26,103,254,0.3) |
--color-scrollbar | #ccc |
--border-radius | .25rem ~ 4px |
--border-radius1 | .25rem ~ 4px |
--border-radius2 | .5rem ~ 8px |
--border-radius3 | 1rem ~ 16px |
--border-radius4 | 2rem ~ 32px |
--border-radius5 | 4rem ~ 64px |
--unit | .5rem ~ 8px |
--spacer | 1rem ~ 16px |
--spacer1 | .125rem ~ 2px |
--spacer2 | .25rem ~ 4px |
--spacer3 | .5rem ~ 8px |
--spacer4 | .75rem ~ 12px |
--spacer5 | 1rem ~ 16px |
--spacer6 | 1.5rem ~ 24px |
--spacer7 | 2rem ~ 32px |
--spacer8 | 2.5rem ~ 40px |
--spacer9 | 3rem ~ 48px |
--spacer-layout1 | 1rem ~ 16px |
--spacer-layout2 | 1.5rem ~ 24px |
--spacer-layout3 | 2rem ~ 32px |
--spacer-layout4 | 3rem ~ 48px |
--spacer-layout5 | 4rem ~ 64px |
--spacer-layout6 | 6rem ~ 96px |
--spacer-layout7 | 10rem ~ 160px |
--width-fixed | 8rem ~ 128px |
--width-fixed1 | 8rem ~ 128px |
--width-fixed2 | 16rem ~ 256px |
--width-fixed3 | 24rem ~ 384px |
--width-fixed4 | 32rem ~ 512px |
--width-fixed5 | 40rem ~ 640px |
--width-fixed6 | 48rem ~ 768px |
--width-fixed7 | 56rem ~ 896px |
# Less переменные
Ниже приведен список доступных less переменных фреймворка
core
| переменная | значение |
|---|
components
Типографика
В качестве базовой гарнитуры используется PT Root UI.
Подключение в проекте:
// ваш <enty-point>.js
import 'goodt-framework-css/fonts/regular/pt-root-ui-regular.css';
import 'goodt-framework-css/fonts/bold/pt-root-ui-bold.css';В данном разделе показаны лишь базовые элементы типографики.
Дополнительные возможности по работе с текстом вы найдете в Text утилитах
| код | результат |
|---|---|
<h1> .h1 |
h1 |
<h2> .h2 |
h2 |
<h3> .h3 |
h3 |
<h4> .h4 |
h4 |
.text-large .text-lead |
text-large
|
.text-small |
text-small
|
.text-xsmall |
text-xsmall
|
<p> .p |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, vel. |
<blockquote> |
Lorem ipsum dolor sit amet consectetur. |
<pre> .pre |
Lorem ipsum dolor sit amet consectetur. |
<s> <del> .del |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus,
vel.
|
<sup> .sup |
Lorem ipsum |
<sub> .sub |
Lorem ipsum |
<mark> .mark |
Lorem ipsum |
<code> .code |
Lorem ipsum |
Горизонтальная линия
|
|
|
|
|
|
|
|
|
Списки
- list item
- list item
- list item
- list item
<ul>
<li>list item</li>
<li>list item</li>
<li>list item
<ul>
<li>list item</li>
</ul>
</li>
</ul>- list item
- list item
- list item
- list item
<ol>
<li>list item</li>
<li>list item</li>
<li>list item
<ol>
<li>list item</li>
</ol>
</li>
</ol>Если вам нужен список без стилизации, используйте класс
.unstyled
для элементов <ul>Таблица
# Общее
Фреймворк не изменяет стили элемента
<table>, что позволяет использовать
таблицы с стандартными стилями, наряду с фреймворком.Для применения стилей для таблиц используйте класс
.table# Ширина колонок
| Класс | Описание |
|---|---|
.w-{size} |
может применятся для элементов <th> <td>,
задает ширину столбца; подробнее см. Width
утилиты |
.table-w-auto |
может применятся для элементов <th> <td>,
задает минимальную ширину колонки, подстраиваясь под ширину ее контента; схоже с
тем, как работает утилита .w-auto на других элементах |
# Вертикальное выравнивание
По умолчанию ячейки выравниваются по верхнему краю
top.Для изменения выравнивания, используйте классы
.table-vtop
.table-vmid .table-vbot .table-vbase| Heading | Heading | Heading |
|---|---|---|
| Column Column Column |
Column Column |
Column |
| Heading | Heading | Heading |
|---|---|---|
| Column Column Column |
Column Column |
Column |
| Heading | Heading | Heading |
|---|---|---|
| Column Column Column |
Column Column |
Column |
| Heading | Heading | Heading |
|---|---|---|
| Column Column Column |
Column Column |
Column |
<table class="table table-vtop">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column<br>Column<br>Column</td>
<td>Column<br>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
<table class="table table-vmid">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column<br>Column<br>Column</td>
<td>Column<br>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
<table class="table table-vbot">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column<br>Column<br>Column</td>
<td>Column<br>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
<table class="table table-vbase">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column<br>Column<br>Column</td>
<td>Column<br>Column</td>
<td>Column</td>
</tr>
</tbody>
</table># Границы
Для добавления границ у строк используйте класс
.table-borders| Heading | Heading | Heading |
|---|---|---|
| Column | Column | Column |
| Column | Column | Column |
| Column | Column | Column |
<table class="table table-borders">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</tbody>
</table># Зебра
Для применения стиля "зебра" у строк, используйте класс
.table-zebra
| Heading | Heading | Heading |
|---|---|---|
| Column | Column | Column |
| Column | Column | Column |
| Column | Column | Column |
<table class="table table-zebra">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</tbody>
</table># Подсветка
Для подсветки строка при наведении, используйте класс
.table-hover
| Heading | Heading | Heading |
|---|---|---|
| Column | Column | Column |
| Column | Column | Column |
| Column | Column | Column |
<table class="table table-hover">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</tbody>
</table># Responsive
Специальный режим responsive преобразует столбцы в строки в режиме s.
Для применения этого режима, используйте класс
.table-responsive
| Heading | Heading | Heading |
|---|---|---|
| Column | Column | Column |
| Column | Column | Column |
| Column | Column | Column |
<table class="table table-responsive">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>Сетка
# Строка
Строки задаются классом
.row. По умолчанию, строки задают отступы для колонок
по вертикали и горизонтали.Для отключения отступов используйте
.row-collapse# Колонка
Колонки задаются классом
.col. Колонки должны быть непосредственными дочерними
элементами строки .row.По умолчанию колонки занимают максимально возможную ширину строки, равномерно деля общую
ширину между другими колонками
# Вертикальное выравнивание
По умолчанию колонки занимаю всю высоту строки.
Для выравнивания колонок по вертикали используйте классы
.col-vtop
.col-vmid .col-vbot<div class="row h-100" style="height:100px">
<div class="col">
<div class="bg-green pad-3 h-100"></div>
</div>
<div class="col col-vtop">
<div class="bg-green pad-3 h-100"></div>
</div>
<div class="col col-vmid">
<div class="bg-green pad-3 h-100"></div>
</div>
<div class="col col-vbot">
<div class="bg-green pad-3 h-100"></div>
</div>
</div># Ширина колонок
Класс
.col-auto задает колонку, которая старается занять как можно
меньше места по ширине, подстраиваясь под ее контент (режим shrink)col-auto
col
col-auto
<div class="row color-white text-small text-center">
<div class="col col-auto">
<div class="bg-green pad-3">col-auto</div>
</div>
<div class="col">
<div class="bg-green pad-3">col</div>
</div>
<div class="col col-auto">
<div class="bg-green pad-3">col-auto</div>
</div>
</div>Ширина колонки задется классом
.col-{size}, где
{size} зависит от выбранной системы (см. таблицу ниже).| Система | Описание | {size} |
|---|---|---|
5% |
сетка задается в %, изменяется от 5% - 100% с шагом в 5% (так же включает спец. размеры 33%, 66%) | 5 10 15 ... 100 33
66 |
1/12 |
сетка задается дробью, изменяется от 1/12 - 12/12 с шагом 1/12 | 1-12 2-12 ... 12-12 |
1/24 |
сетка задается дробью, изменяется от 1/24 - 12/24 с шагом 1/24 | 1-24 2-24 ... 24-24 |
Примеры:
col-15
col-25
col-60
<div class="row color-white text-small text-center">
<div class="col col-15">
<div class="bg-green pad-3">col-15</div>
</div>
<div class="col col-25">
<div class="bg-green pad-3">col-25</div>
</div>
<div class="col col-60">
<div class="bg-green pad-3">col-60</div>
</div>
</div>col-2-12
col-4-12
col-6-12
<div class="row color-white text-small text-center">
<div class="col col-2-12">
<div class="bg-green pad-3">col-2-12</div>
</div>
<div class="col col-4-12">
<div class="bg-green pad-3">col-4-12</div>
</div>
<div class="col col-6-12">
<div class="bg-green pad-3">col-6-12</div>
</div>
</div>col-5-24
col-7-24
col-12-24
<div class="row color-white text-small text-center">
<div class="col col-5-24">
<div class="bg-green pad-3">col-5-24</div>
</div>
<div class="col col-7-24">
<div class="bg-green pad-3">col-7-24</div>
</div>
<div class="col col-12-24">
<div class="bg-green pad-3">col-12-24</div>
</div>
</div>responsive
Для работы ширины в различных responsive режимах, используйте класс
.{viewport}-col-{size}.{viewport} |
название viewport |
{size} |
размер колонки, в зависимости от выбранной вами системы |
# Gap колонок
Gap колонок задется классом
.row-gap-{1-9} или .row-gap-l{1-7} (см. таблицу ниже).| Класс | Описание |
|---|---|
.row-gap-{1-9} |
применяет горизонтальный и вертикальный gap размером @spacer{1-9} |
.row-gap-l{1-7} |
применяет горизонтальный и вертикальный gap размером @spacer-layout{1-7} |
<div class="row row-gap-l1">
<div class="col">
<div class="bg-green pad-3"></div>
</div>
<div class="col">
<div class="bg-green pad-3"></div>
</div>
<div class="col col-12-12">
<div class="bg-green pad-3"></div>
</div>
</div>Горизонтальный
Горизонтальный gap колонок задется классом
.row-hgap-{1-9} или .row-hgap-l{1-7} (см. таблицу ниже).| Класс | Описание |
|---|---|
.row-hgap-{1-9} |
применяет gap размером @spacer{1-9} |
.row-hgap-l{1-7} |
применяет gap размером @spacer-layout{1-7} |
Примеры:
<div class="p">
<div class="row row-hgap-3">
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
</div>
</div>
<div class="p">
<div class="row row-hgap-6">
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
</div>
</div>
<div class="p">
<div class="row row-hgap-l4">
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
<div class="col"><div class="bg-green pad-3"></div></div>
</div>
</div>Вертикальный
Вертикальный gap колонок задется классом
.row-vgap-{1-9} или .row-vgap-l{1-7} (см. таблицу ниже).| Класс | Описание |
|---|---|
.row-vgap-{1-9} |
применяет gap размером @spacer{1-9} |
.row-vgap-l{1-7} |
применяет gap размером @spacer-layout{1-7} |
Примеры:
<div class="p">
<div class="row row-vgap-3">
<div class="col col-12-12"><div class="bg-green pad-3"></div></div>
<div class="col col-12-12"><div class="bg-green pad-3"></div></div>
<div class="col col-12-12"><div class="bg-green pad-3"></div></div>
</div>
</div>
<div class="p">
<div class="row row-vgap-6">
<div class="col col-12-12"><div class="bg-orange pad-3"></div></div>
<div class="col col-12-12"><div class="bg-orange pad-3"></div></div>
<div class="col col-12-12"><div class="bg-orange pad-3"></div></div>
</div>
</div>hgap
vgap
<div class="row row-hgap-l2 row-vgap-l2">...</div>
# Отступы колонок
Отступ колонки задается классом
.push-{size}, где
{size} зависит от выбранной системы (см. таблицу ниже).| Система | Описание | {size} |
|---|---|---|
5% |
сетка задается в %, изменяется от 5% - 100% с шагом в 5% (так же включает спец. размеры 33%, 66%) | 5 10 15 ... 100 33
66 |
1/12 |
сетка задается дробью, изменяется от 1/12 - 12/12 с шагом 1/12 | 1-12 2-12 ... 12-12 |
1/24 |
сетка задается дробью, изменяется от 1/24 - 12/24 с шагом 1/24 | 1-24 2-24 ... 24-24 |
Примеры:
push-5
<div class="row color-white text-small text-center">
<div class="col col-25 push-5">
<div class="bg-green pad-3">push-5</div>
</div>
</div>push-5-12
<div class="row color-white text-small text-center">
<div class="col col-4-12 push-5-12">
<div class="bg-green pad-3">push-5-12</div>
</div>
</div>push-14-24
<div class="row color-white text-small text-center">
<div class="col col-5-24 push-14-24">
<div class="bg-green pad-3">push-14-24</div>
</div>
</div>responsive
Для работы отступов в различных responsive режимах, используйте класс
.{viewport}-push-{size}.{viewport} |
название viewport |
{size} |
размер отступа, в зависимости от выбранной вами системы |
# Дочерние сетки
<div class="row">
<div class="col col-25">
<div class="bg-green pad-3 h-100"></div>
</div>
<div class="col">
<div class="bg-green pad-3 h-100">
<div class="row">
<div class="col">
<div class="bg-white pad-3"></div>
</div>
<div class="col">
<div class="bg-white pad-3"></div>
</div>
</div>
</div>
</div>
</div>Компоненты
# Alert
components/alert.lessСтили
Для изменения стиля используйте классы
.alert-success
.alert-warn .alert-errorTitle
Body content
Title
Body content
Title
Body content
<div class="alert alert-success mar-2">
<div class="close"><i class="mdi mdi-close"></i></div>
<div class="alert-body" style="width:400px">
<h4>Title</h4>
<div>Body content</div>
</div>
</div>
<div class="alert alert-warn mar-2">
<div class="close"><i class="mdi mdi-close"></i></div>
<div class="alert-body" style="width:400px">
<h4>Title</h4>
<div>Body content</div>
</div>
</div>
<div class="alert alert-error mar-2">
<div class="close"><i class="mdi mdi-close"></i></div>
<div class="alert-body" style="width:400px">
<h4>Title</h4>
<div>Body content</div>
</div>
</div># Avatar
Размеры
Для изменения размера используйте классы
.avatar-{2-7}примечание
Для закругления краев используйте утилиту
.round (см. Misc утилиты)
AR
<div class="avatar mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-2 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-3 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-4 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-5 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-6 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-7 mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-7 round mar-2"><img src="i/image.jpg"></div>
<div class="avatar avatar-7 round shadow-2 mar-2">AR</div># Badge
Стили
Для изменения стиля кнопки используйте классы
.badge-primary
.badge-success .badge-warn .badge-error
.badge-misc
badge
badge
badge
badge
badge
badge
<div>
<span class="badge mar-2">badge</span>
<span class="badge badge-primary mar-2">badge</span>
<span class="badge badge-success mar-2">badge</span>
<span class="badge badge-warn mar-2">badge</span>
<span class="badge badge-error mar-2">badge</span>
<span class="badge badge-misc mar-2">badge</span>
</div>примечание
Для закругления краев используйте утилиту
.round (см. Misc утилиты)# Breadcrumbs
# Button
Стили
Для изменения стиля кнопки используйте классы
.btn-primary
.btn-success .btn-warn .btn-error
.btn-misc .btn-outline .btn-ghost
.btn-inline<button class="btn btn-primary mar-2">.btn-primary</button>
<button class="btn btn-success mar-2">.btn-success</button>
<button class="btn btn-warn mar-2">.btn-warn</button>
<button class="btn btn-error mar-2">.btn-error</button>
<button class="btn btn-misc mar-2">.btn-misc</button>
<button class="btn btn-outline mar-2">.btn-outline</button>
<button class="btn btn-ghost mar-2">.btn-ghost</button>
<button class="btn btn-inline mar-2">.btn-inline</button>Состояния
Для удобства
.btn имеет спец. классы .hover
.active .focus .disabled, повторяющие состояния
:hover :active :focus :disabled.<button class="btn btn-primary mar-2">normal</button>
<button class="btn btn-primary hover mar-2">hover</button>
<button class="btn btn-primary active mar-2">active</button>
<button class="btn btn-primary focus mar-2">focus</button>
<button class="btn btn-primary disabled mar-2">disabled</button>примечание
Если вы используете для
.btn отличные элементы от
<button>, не забудьте, что для работы :focus состояния,
необходимо указывать атрибут tabindex="0".<div class="p">Используем элемент <code><a></code> для кнопки</div>
<a class="btn btn-primary mar-2">button no focus :(</a>
<a class="btn btn-primary mar-2" tabindex="0">button with focus</a>Размеры
Для задания размера используйте классы
.btn-small и
.btn-largeМногострочная кнопка
Для поддержки автоматической многострочности используйте класс
.btn-wrap<button class="btn btn-primary btn-wrap btn-small mar-2 w-f1">Lorem ipsum dolor sit amet consectetur.</button>
<button class="btn btn-primary btn-wrap mar-2 w-f1">Lorem ipsum dolor sit amet consectetur.</button>
<button class="btn btn-primary btn-wrap btn-large mar-2 w-f1">Lorem ipsum dolor sit amet consectetur.</button>С иконкой
Для использования иконок в кнопках используйте утилиту
.iconКнопка-иконка
Если вам необходима кнопка только с иконкой, исспользуйте класс
.btn-icon (его можно использовать с любым стилем) и утилиту .icon
для иконок.<button class="btn btn-primary btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-success btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-warn btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-error btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-misc btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-outline btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>
<button class="btn btn-ghost btn-icon mar-2">
<div class="icon"><i class="mdi mdi-menu"></i></div>
</button>примечание
Для закругления краев используйте утилиту
.round (см. Misc утилиты)Загрузка
Для состояния "загрузка", исспользуйте класс
.btn-loading (его можно
использовать с любым стилем).<button class="btn btn-primary btn-loading mar-2">button</button>
<button class="btn btn-success btn-loading mar-2">button</button>
<button class="btn btn-warn btn-loading mar-2">button</button>
<button class="btn btn-error btn-loading mar-2">button</button>
<button class="btn btn-misc btn-loading mar-2">button</button>
<button class="btn btn-outline btn-loading mar-2">button</button>
<button class="btn btn-ghost btn-loading mar-2">button</button># Divider
Позиционирование
Для вертикального отображения используйте класс
.divider-vertical
Использование с сеткой
OR
<div class="row">
<div class="col">
<div class="pad-l3 text-right"><button class="btn btn-primary">do this</button>
</div>
</div>
<div class="col col-auto">
<div class="divider divider-vertical">OR</div>
</div>
<div class="col">
<div class="pad-l3"><button class="btn btn-primary">do that</button></div>
</div>
</div># Dropdown
components/dropdown.lessРазмер
Для уменьшения размера меню используйте класс
.dropdown-small
Прокрутка
По умолчанию
Это кол-во можно изменить параметром, заданным в компоненте.
dropdown имеет ограничение в 5 элементов в списке, после которого
появится прокрутка.Это кол-во можно изменить параметром, заданным в компоненте.
Кастомные элементы
dropdown позволяет интегрировать кастомные dom-элементыCustom element
- Option
- Option
- Option
Custom element
<div class="dropdown">
<div class="my-custom-element">
<div class="bg-green color-white pad-3 text-center text-small">Custom element
</div>
</div>
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
<div class="my-custom-element">
<div class="bg-green color-white pad-3 text-center text-small">Custom element
</div>
</div>
</div>Контейнер
В случаях, когда интерфейс нестандартный и список не подходит для реализации
задачи,
dropdown возможно использовать в качестве контейнера для других
компонентов/интерфейсов используя .dropdown-content# Header
components/header.lessПример использования:
username
<div class="header">
<div class="container">
<div class="row row-collapse">
<div class="col col-vmid">
<nav class="nav nav-horizontal d-block">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</nav>
</div>
<div class="col col-auto col-vmid">
<div class="row row-collapse">
<div class="col col-auto">
<div class="avatar round mar-right-3"><img src="i/image.jpg">
</div>
</div>
<div class="col">
<span class="link">username</span>
</div>
</div>
</div>
</div>
</div>
</div># Menu
components/menu.lessРазмер
Для уменьшения размера меню используйте класс
.menu-smallИконки
Для иконок в пунктах меню можно использовать
.icon и
.mdi<div class="menu">
<ul>
<li class="active">
<a href="#">
<span>Active</span>
<div class="icon pull-right"><i class="mdi mdi-chevron-right"></i></div>
</a>
</li>
<li class="disabled">
<a href="#">
<span>Disabled</span>
<div class="icon pull-right"><i class="mdi mdi-chevron-right"></i></div>
</a>
</li>
<li>
<hr>
</li>
<li>
<a href="#">
<span>Item</span>
<div class="icon pull-right"><i class="mdi mdi-chevron-right"></i></div>
</a>
</li>
</ul>
</div>Подменю
Для подменю используйте вложенное меню
<div class="menu">
<ul>
<li>
<a href="#">Submenu</a>
<div class="menu">
<ul>
<li><a href="">Item</a></li>
<li>
<a href="">Submenu</a>
<div class="menu">
<ul>
<li><a href="">Item</a></li>
<li><a href="">Item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#">Item</a></li>
<li>
<hr>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>Для отображения подменю слева используйте класс
.menu-left# Nav
components/nav.less# Offcanvas
components/offcanvas.lessOffcanvas content
Открыть offcanvas
<div id="demo-offcanvas1" class="offcanvas pos-abs">
<div class="offcanvas-overlay" data-close="1"></div>
<div class="offcanvas-content">
<div class="pad-l3">Offcanvas content</div>
</div>
</div>
<div class="d-flex flex-h-center flex-v-center h-100">
<span class="link" data-offcanvas="#demo-offcanvas1">Открыть offcanvas</span>
</div>Используйте класс
.active для открытия offcanvasПозиционирование
Для отображения справа используйте класс
.offcanvas-rightOffcanvas content
Открыть offcanvas
<div id="demo-offcanvas2" class="offcanvas offcanvas-right pos-abs">
<div class="offcanvas-overlay" data-close="1"></div>
<div class="offcanvas-content">
<div class="pad-l3">Offcanvas content</div>
</div>
</div>
<div class="d-flex flex-h-center flex-v-center h-100">
<span class="link" data-offcanvas="#demo-offcanvas2">Открыть offcanvas</span>
</div># Pagination
# Panel
components/panel.lessTitle
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi numquam omnis repellat voluptate, est perferendis tempore quis minus molestias fugit.psum dolor sit amet, consectetur adipisicing elit. Voluptates repudiandae dolorem suscipit dolores quasi dolor, quos voluptas laudantium ipsum corporis.
Button
<div class="panel w-6-12">
<div class="panel-body">
<h3>Title</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi numquam omnis repellat voluptate, est perferendis tempore quis minus molestias fugit.psum dolor sit amet, consectetur adipisicing elit. Voluptates repudiandae dolorem suscipit dolores quasi dolor, quos voluptas laudantium ipsum corporis.
</div>
<div class="panel-footer">
<span class="btn btn-ghost" tabindex="0">Button</span>
</div>
</div># Popup
components/popup.lessTitle
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi numquam omnis repellat voluptate, est perferendis tempore quis minus molestias fugit.psum dolor sit amet, consectetur adipisicing elit. Voluptates repudiandae dolorem suscipit dolores quasi dolor, quos voluptas laudantium ipsum corporis.
Button
<div class="popup">
<div class="popup-dialog w-6-12">
<div class="close">
<i class="mdi mdi-close mdi-24px"></i>
</div>
<div class="popup-dialog-body">
<h3>Title</h3>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi numquam omnis repellat voluptate, est perferendis tempore quis minus molestias fugit.psum dolor sit amet, consectetur adipisicing elit. Voluptates repudiandae dolorem suscipit dolores quasi dolor, quos voluptas laudantium ipsum corporis.
</div>
<div class="popup-dialog-footer">
<span class="btn btn-ghost" tabindex="0">Button</span>
</div>
</div>
</div>Для того, чтобы сделать
popup на всю ширину/высоту окна, используйте
класс .popup-fixed# Preloader
Цвета
Для изменения цвета можно использовать классы
.color-{value} утилит
Размер
Размер прелоадера может быть задан при помощи
.pad-{size}
.pad-l{size} утилит<div class="preloader pad-1"></div>
<div class="preloader pad-2"></div>
<div class="preloader pad-3"></div>
<div class="preloader pad-4"></div>
<div class="preloader pad-5"></div>
<div class="preloader pad-6"></div>
<div class="preloader pad-7"></div>
<div class="preloader pad-l1"></div>
<div class="preloader pad-l2"></div>
<div class="preloader pad-l3"></div>
<div class="preloader pad-l4"></div>
<div class="preloader pad-l5"></div># Shim
components/shim.lessКомпонент
shim можно использовать как "ширму" для других компонентов
или элементовcontent
<div class="shim">
<div class="shim-overlay"></div>
<div class="shim-content d-flex flex-center h-100">
<h3 class="last">content</h3>
</div>
</div>Пример использования с другими компонентами
Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis sunt facilis
voluptatibus eum officia veritatis nam, dolorum rem blanditiis placeat!
content
<div class="panel">
<div class="panel-body">
<h3>Title</h3>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis sunt facilis
voluptatibus eum officia veritatis nam, dolorum rem blanditiis placeat!
</div>
</div>
<div class="shim">
<div class="shim-overlay"></div>
<div class="shim-content d-flex flex-center h-100">
<h3 class="last">content</h3>
</div>
</div>
</div>Цвет
Для изменения цвета
shim-overlay, используйте классы
.bg-{value} утилитcontent
<div class="shim">
<div class="shim-overlay bg-green"></div>
<div class="shim-content d-flex flex-center h-100">
<h3 class="last">content</h3>
</div>
</div>Пример использования совместно с компонентом
preloader# Sidebar
components/sidebar.lessПример использования:
<div class="sidebar">
<nav class="nav pad-l1">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</nav>
</div>Размер
Для уменьшения размера sidebar используйте класс
.sidebar-small
<div class="sidebar sidebar-small">
<nav class="nav">
<ul>
<li><a>
<div class="icon icon-3"><i class="mdi mdi-account mdi-24px"></i>
</div>
</a></li>
<li><a>
<div class="icon icon-3"><i class="mdi mdi-security mdi-24px"></i>
</div>
</a></li>
<li><a>
<div class="icon icon-3"><i class="mdi mdi-star mdi-24px"></i></div>
</a></li>
</ul>
</nav>
</div># Skeleton
components/skeleton.lessПример использования:
Размер
Для изменения размера skeleton используйте классы
.skeleton-small, .skeleton-large<div class="skeleton skeleton-small p"></div>
<div class="skeleton skeleton p"></div>
<div class="skeleton skeleton-large"></div>Пример использования: макет карточки пользователя
<div class="tile p w-6-12">
<div class="tile-body">
<div class="row">
<div class="col col-auto">
<div class="skeleton avatar-4 round"></div>
</div>
<div class="col">
<div class="skeleton skeleton-large p"></div>
<div class="row">
<div class="col col-8-12">
<div class="skeleton skeleton-small"></div>
</div>
<div class="col">
<div class="skeleton skeleton-small"></div>
</div>
</div>
</div>
</div>
</div>
</div># Tabs
components/tabs.lessВыравнивание
Для выравнивания используйте классы
.tabs-center
.tabs-right<ul class="tabs">
<li class="active"><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
</ul>
<ul class="tabs tabs-center">
<li class="active"><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
</ul>
<ul class="tabs tabs-right">
<li class="active"><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">Tab</a></li>
</ul># Tile
components/tile.lessTitle
Some content here
<div class="tile">
<div class="tile-body">
<h3>Title</h3>
<div>Some content here</div>
</div>
</div>Соотношение сторон
Для сохранения соотношений сторон тайлов используйте классы
.tile-1-1 .tile-2-1 .tile-4-3 .tile-16-9
1:1
2:1
4:3
16:9
<div class="row">
<div class="col">
<div class="tile tile-1-1">
<div class="tile-body">
<h3>1:1</h3>
</div>
</div>
</div>
<div class="col">
<div class="tile tile-2-1">
<div class="tile-body">
<h3>2:1</h3>
</div>
</div>
</div>
<div class="col">
<div class="tile tile-4-3">
<div class="tile-body">
<h3>4:3</h3>
</div>
</div>
</div>
<div class="col">
<div class="tile tile-16-9">
<div class="tile-body">
<h3>16:9</h3>
</div>
</div>
</div>
</div># Tooltip
Позиционирование
Для позиционирования используйте классы
.tooltip-top
.tooltip-bot .tooltip-left .tooltip-rightЭлементы формы
Общее
components/form.less
Для стилизации всех элементов формы
input select textarea
фреймворк использует свои классы. Что изолирует стили и позволяет использовать данные элементы
для кастомной стилизации, если это необходимо.
# Input
Состояния
<div class="pad-2"><input class="input" type="text" placeholder="normal"></div>
<div class="pad-2"><input class="input hover" type="text" placeholder="hover"></div>
<div class="pad-2"><input class="input focus" type="text" placeholder="focus"></div>
<div class="pad-2"><input class="input disabled" type="text" placeholder="disabled">
</div>
<div class="pad-2"><input class="input valid" type="text" placeholder="valid"></div>
<div class="pad-2"><input class="input invalid" type="text" placeholder="invalid"></div>Размеры
Для изменения размера
input, используйте классы
.input-small .input-large# Textarea
Для применения стилей
textarea, используйте класс
.textareaСостояния
<div class="pad-2"><textarea class="textarea" placeholder="normal"></textarea></div>
<div class="pad-2"><textarea class="textarea hover" placeholder="hover"></textarea>
</div>
<div class="pad-2"><textarea class="textarea focus" placeholder="focus"></textarea>
</div>
<div class="pad-2"><textarea class="textarea disabled" placeholder="disabled"></textarea></div>
<div class="pad-2"><textarea class="textarea valid" placeholder="valid"></textarea>
</div>
<div class="pad-2"><textarea class="textarea invalid" placeholder="invalid"></textarea>
</div>Размеры
Для изменения размера
textarea, используйте классы
.textarea-small .textarea-large# Select
Для применения стилей
select, используйте класс .select
Состояния
<select class="select">
<option value="">Select option</option>
</select>
<select class="select hover">
<option value="">Select option</option>
</select>
<select class="select focus">
<option value="">Select option</option>
</select>
<select class="select disabled" disabled="">
<option value="">Select option</option>
</select>
<select class="select valid">
<option value="">Select option</option>
</select>
<select class="select invalid">
<option value="">Select option</option>
</select>Размеры
Для изменения размера
select, используйте классы
.select-small .select-large# Checkbox
Состояния
<form class="d-inline-block" autocomplete="off">
<input class="checkbox" type="checkbox"><br>
<input class="checkbox" type="checkbox" indeterminate=""><br>
<input class="checkbox" type="checkbox" checked=""><br>
<input class="checkbox hover" type="checkbox"><br>
<input class="checkbox focus" type="checkbox"><br>
<input class="checkbox disabled" type="checkbox"><br>
<input class="checkbox disabled" type="checkbox" checked=""><br>
<input class="checkbox valid" type="checkbox"><br>
<input class="checkbox invalid" type="checkbox">
</form># Radio
Состояния
<form autocomplete="off">
<input class="radio" type="radio" name="radio"><br>
<input class="radio" type="radio" name="radio-c" checked=""><br>
<input class="radio hover" type="radio" name="radio"><br>
<input class="radio focus" type="radio" name="radio"><br>
<input class="radio disabled" type="radio" name="radio"><br>
<input class="radio disabled" type="radio" name="radio-d" checked=""><br>
<input class="radio valid" type="radio" name="radio"><br>
<input class="radio invalid" type="radio" name="radio">
</form># Switch
Состояния
<form autocomplete="off">
<input class="switch" type="checkbox"><br>
<input class="switch" type="checkbox" checked=""><br>
<input class="switch hover" type="checkbox"><br>
<input class="switch focus" type="checkbox"><br>
<input class="switch disabled" type="checkbox"><br>
<input class="switch disabled" type="checkbox" checked=""><br>
<input class="switch valid" type="checkbox"><br>
<input class="switch invalid" type="checkbox">
</form># Form-label
Используется для подписей к элеметам формы; используйте класс
.form-label
Размеры
Для изменения размера
form-label, используйте классы
.form-label-xsmall .form-label-small
.form-label-largexsmall
small
normal
large
<div class="pad-2">
<div class="form-label form-label-xsmall">xsmall</div>
</div>
<div class="pad-2">
<div class="form-label form-label-small">small</div>
</div>
<div class="pad-2">
<div class="form-label">normal</div>
</div>
<div class="pad-2">
<div class="form-label form-label-large">large</div>
</div>Sticky label
Для стиля sticky
form-label используйте класс form-label-stickyпримечание
Так как
form-label-sticky использует абсолютное позиционирование, вам необходимо использовать контейнер. В качестве контейнера вы можете использовать form-control.label
label
label
label
<div class="form-control">
<input class="input" type="text">
<div class="form-label form-label-xsmall form-label-sticky">label</div>
</div>
<div class="form-control">
<input class="input" type="text">
<div class="form-label form-label-small form-label-sticky">label</div>
</div>
<div class="form-control">
<input class="input" type="text">
<div class="form-label form-label-sticky">label</div>
</div>
<div class="form-control">
<input class="input" type="text">
<div class="form-label form-label-large form-label-sticky">label</div>
</div>Float label
Для стиля float
form-label используйте класс form-label-float. Работает с элементами .input .textareaпримечание
Так как
form-label-float использует абсолютное позиционирование, вам необходимо использовать контейнер. В качестве контейнера вы можете использовать form-control.label
label
label
label
<div class="form-control">
<input class="input" type="text" placeholder="placeholder">
<div class="form-label form-label-xsmall form-label-float">label</div>
</div>
<div class="form-control">
<input class="input" type="text" placeholder="placeholder">
<div class="form-label form-label-small form-label-float">label</div>
</div>
<div class="form-control">
<input class="input" type="text" placeholder="placeholder">
<div class="form-label form-label-float">label</div>
</div>
<div class="form-control">
<input class="input" type="text" placeholder="placeholder">
<div class="form-label form-label-large form-label-float">label</div>
</div># Form-elem
Кастомный элемент формы, повтораяет все состояния элемента формы и позволяет использовать
кастомный dom
Состояния
Custom dom
Custom dom
Custom dom
Custom dom
Custom dom
Custom dom
<div class="pad-2">
<div class="form-elem" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem hover" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem focus" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem disabled" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem valid" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem invalid" tabindex="0">
<div class="d-flex flex-v-center h-100">Custom dom</div>
</div>
</div>Размеры
Для изменения размера
form-elem, используйте классы
.form-elem-small .form-elem-largesmall
normal
large
<div class="pad-2">
<div class="form-elem form-elem-small" tabindex="0">
<div class="d-flex flex-v-center h-100">small</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem" tabindex="0">
<div class="d-flex flex-v-center h-100">normal</div>
</div>
</div>
<div class="pad-2">
<div class="form-elem form-elem-large" tabindex="0">
<div class="d-flex flex-v-center h-100">large</div>
</div>
</div># Form-control
Обётка для элементов формы применяющая
position: relative; display: inline-block;Может быть использована в любых ваших целях.
Можно использоваться для добавления иконок для элементов
input select form-elemИконки
Для добавления иконок в
form-control используйте класс
.form-control-icon-left .form-control-icon-right .form-control-icon-both вместе с утилитой
.icon<div>
<div class="form-control form-control-icon-left mar-2 w-f2">
<input class="input" type="text">
<div class="icon"><i class="mdi mdi-account"></i></div>
</div>
</div>
<div>
<div class="form-control form-control-icon-right mar-2 w-f2">
<input class="input" type="text">
<div class="icon"><i class="mdi mdi-account"></i></div>
</div>
</div>
<div>
<div class="form-control form-control-icon-both mar-2 w-f2">
<div class="icon"><i class="mdi mdi-account"></i></div>
<input class="input" type="text">
<div class="icon"><i class="mdi mdi-account"></i></div>
</div>
</div>Утилиты
Общее
utility.lessУтилиты — набор вспомогальных классов для модификации набора свойств. Утилиты
могут быть использованы с dom-элементами и компонентами.
# Float
Утилиты для работы с
float.| класс | описание | пример |
|---|---|---|
|
responsive
.pull-left.{viewport}-pull-left |
применяет float: left |
lorem ipsum
|
|
responsive
.pull-right.{viewport}-pull-right |
применяет float: right |
lorem ipsum
|
|
responsive
.pull-center.{viewport}-pull-center |
применяет float: none; margin: 0 auto; |
lorem ipsum
|
|
responsive
.pull-none.{viewport}-pull-none |
применяет float: none; margin: 0; |
# Text
Утилиты для работы с текстом.
| класс | описание | пример |
|---|---|---|
.text-h1 |
применяет font-size элемента <h1> |
Text
|
.text-h2 |
применяет font-size элемента <h2> |
Text
|
.text-h3 |
применяет font-size элемента <h3> |
Text
|
.text-h4 |
применяет font-size элемента <h4> |
Text
|
|
responsive
.text-large .text-lead.{viewport}-text-large .{viewport}-text-lead |
применяет @font-size*1.125 |
Text
|
|
responsive
.text-small.{viewport}-text-small |
применяет @font-size*0.875 |
Text
|
|
responsive
.text-xsmall.{viewport}-text-xsmall |
применяет @font-size*0.75 |
Text
|
.text-left |
применяет text-align: left |
Text
|
.text-right |
применяет text-align: right |
Text
|
.text-center |
применяет text-align: center |
Text
|
.text-justify |
применяет text-align: justify |
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
.text-italic |
применяет font-style: italic |
Text
|
.text-bold |
применяет font-weight: bold |
Text
|
.text-normal |
применяет font-weight: normal; font-style: normal |
Text
|
.text-muted |
приглушает текст |
Text
|
.text-truncate |
обрезает длинный текст |
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
.text-upper |
преобразуем текст в большим буквам |
This text was written in a normal case.
|
.text-nowrap nobr |
применяет white-space: nowrap |
|
.break-word |
разрешает перенос текста по словам | |
.lh-1 |
применяет line-height: 1 |
# Color
Утилиты для работы с цветом. Данные утилиты применяют свойство
color
| класс | пример |
|---|---|
.color-black |
text |
.color-body |
text |
.color-primary |
text |
.color-link |
text |
.color-red .color-invalid .color-required |
text |
.color-green .color-valid |
text |
.color-yellow |
text |
.color-orange |
text |
.color-grey |
text |
.color-grey-dark |
text |
.color-grey-light |
text |
.color-grey-lighter |
text |
.color-muted |
text |
.color-white |
text |
.color-disabled |
text |
.color-disabled-dark |
text |
.color-border |
text |
.color-transparent |
text |
.color-inherit |
text |
# Background
Утилиты для работы с цветом. Данные утилиты применяют свойство
background-color| класс | пример |
|---|---|
.bg-black |
|
.bg-body |
|
.bg-primary |
|
.bg-link |
|
.bg-red .bg-invalid .bg-required |
|
.bg-green .bg-valid |
|
.bg-yellow |
|
.bg-orange |
|
.bg-grey |
|
.bg-grey-dark |
|
.bg-grey-light |
|
.bg-grey-lighter |
|
.bg-muted |
|
.bg-white |
|
.bg-disabled |
|
.bg-disabled-dark |
|
.bg-border |
|
.bg-transparent |
|
.bg-inherit |
# Vertical align
Утилиты для работы с вертикальным выравнивание inline элементов. Данные утилиты
применяют свойство
vertical-align| класс | описание |
|---|---|
.v-top |
применяет vertical-align: top |
.v-mid |
применяет vertical-align: middle |
.v-bot |
применяет vertical-align: bottom |
.v-base |
применяет vertical-align: baseline |
.v-inherit |
применяет vertical-align: inherit |
# Padding
Утилиты для работы с отступами элементов. Данные утилиты применяют свойство
padding| класс | описание |
|---|---|
.pad-none |
применяет padding: 0 |
.pad-v-none |
применяет padding-top: 0; padding-bottom: 0; |
.pad-h-none |
применяет padding-left: 0; padding-right: 0; |
.pad-left-none |
применяет padding-left: 0 |
.pad-right-none |
применяет padding-right: 0 |
.pad-top-none |
применяет padding-top: 0 |
.pad-bot-none |
применяет padding-bottom: 0 |
.pad-{1-9} |
применяет padding: @spacer{1-9} |
.pad-v-{1-9} |
применяет padding-top: @spacer{1-9}; padding-bottom: @spacer{1-9} |
.pad-h-{1-9} |
применяет padding-left: @spacer{1-9}; padding-right: @spacer{1-9} |
.pad-left-{1-9} |
применяет padding-left: @spacer{1-9} |
.pad-right-{1-9} |
применяет padding-right: @spacer{1-9} |
.pad-top-{1-9} |
применяет padding-top: @spacer{1-9} |
.pad-bot-{1-9} |
применяет padding-bottom: @spacer{1-9} |
.pad-l{1-7} |
применяет padding: @spacer-layout{1-7} |
.pad-v-l{1-7} |
применяет padding-top: @spacer-layout{1-7}; padding-bottom: @spacer-layout{1-7} |
.pad-h-l{1-7} |
применяет padding-left: @spacer-layout{1-7}; padding-right: @spacer-layout{1-7} |
.pad-left-l{1-7} |
применяет padding-left: @spacer-layout{1-7} |
.pad-right-l{1-7} |
применяет padding-right: @spacer-layout{1-7} |
.pad-top-l{1-7} |
применяет padding-top: @spacer-layout{1-7} |
.pad-bot-l{1-7} |
применяет padding-bottom: @spacer-layout{1-7} |
# Margin
Утилиты для работы с отступами элементов. Данные утилиты применяют свойство
margin
| класс | описание |
|---|---|
.mar-none |
применяет margin: 0 |
.mar-v-none |
применяет margin-top: 0; margin-bottom: 0 |
.mar-h-none |
применяет margin-left: 0; margin-right: 0 |
.mar-left-none |
применяет margin-left: 0 |
.mar-right-none |
применяет margin-right: 0 |
.mar-top-none |
применяет margin-top: 0 |
.mar-bot-none .last .end |
применяет margin-bottom: 0 |
.mar-auto |
применяет margin: auto |
.mar-v-auto |
применяет margin-top: auto; margin-bottom: auto |
.mar-h-auto |
применяет margin-left: auto; margin-right: auto |
.mar-left-auto |
применяет margin-left: auto |
.mar-right-auto |
применяет margin-right: auto |
.mar-top-auto |
применяет margin-top: auto |
.mar-bot-auto |
применяет margin-bottom: auto |
.mar-{1-9} |
применяет margin: @spacer{1-9} |
.mar-v-{1-9} |
применяет margin-top: @spacer{1-9}; margin-bottom: @spacer{1-9} |
.mar-h-{1-9} |
применяет margin-left: @spacer{1-9}; margin-right: @spacer{1-9} |
.mar-left-{1-9} |
применяет margin-left: @spacer{1-9} |
.mar-right-{1-9} |
применяет margin-right: @spacer{1-9} |
.mar-top-{1-9} |
применяет margin-top: @spacer{1-9} |
.mar-bot-{1-9} |
применяет margin-bottom: @spacer{1-9} |
.mar-l{1-7} |
применяет margin: @spacer-layout{1-7} |
.mar-v-l{1-7} |
применяет margin-top: @spacer-layout{1-7}; margin-bottom: @spacer-layout{1-7} |
.mar-h-l{1-7} |
применяет margin-left: @spacer-layout{1-7}; margin-right: @spacer-layout{1-7} |
.mar-left-l{1-7} |
применяет margin-left: @spacer-layout{1-7} |
.mar-right-l{1-7} |
применяет margin-right: @spacer-layout{1-7} |
.mar-top-l{1-7} |
применяет margin-top: @spacer-layout{1-7} |
.mar-bot-l{1-7} |
применяет margin-bottom: @spacer-layout{1-7} |
# Display
Утилиты для работы с свойством
display| класс | описание |
|---|---|
.d-flex |
применяет display: flex |
.d-inline-flex |
применяет display: inline-flex |
.d-inline-block |
применяет display: inline-block |
.d-inline |
применяет display: inline |
.d-block |
применяет display: block |
|
responsive
.show.{viewport}-show |
применяет display: block |
|
responsive
.hide.{viewport}-hide |
применяет display: none |
.invisible |
применяет visibility: hidden |
# Flex
Утилиты для работы с
flex элементами.| класс | описание |
|---|---|
.flex-col |
применяет flex-direction: column, применяется к flex элементу
|
.flex-center |
применяет align-items: center и justify-content: center |
.flex-h-center |
применяет горизонтальное выравнивание дочерних элементов по центру
justify-content: center, применяется к flex элементу |
.flex-h-stretch |
применяет justify-content: stretch |
.flex-h-space-between |
применяет justify-content: space-between |
.flex-h-space-evenly |
применяет justify-content: space-evenly |
.flex-h-space-around |
применяет justify-content: space-around |
.flex-h-start |
применяет justify-content: flex-start |
.flex-h-end |
применяет justify-content: flex-end |
.flex-v-center |
применяет вертикальное выравнивание дочерних элементов по центру
align-items: center, применяется к flex элементу |
.flex-v-stretch |
применяет align-items: stretch |
.flex-v-baseline |
применяет align-items: baseline |
.flex-v-space-between |
применяет align-content: space-between |
.flex-v-space-evenly |
применяет align-content: space-evenly |
.flex-v-space-around |
применяет align-content: space-around |
.flex-v-start |
применяет align-content: flex-start |
.flex-v-end |
применяет align-content: flex-end |
.flex-wrap |
применяет flex-wrap: wrap |
.flex-nowrap |
применяет flex-wrap: nowrap |
.flex-grow |
применяет flex-grow: 1, применяется к дочерним элементам flex
элемента |
.flex-shrink |
применяет flex-shrink: 1, применяется к дочерним элементам
flex элемента |
Пример: выравнять элемент по вертикали и горизонтали по центру
<div class="d-flex flex-center" style="height:150px">
<button class="btn btn-primary">Button</button>
</div>Пример: header, footer фикс размера; content — занимает оставшееся место
# Position
Утилиты для работы с
position.| класс | описание |
|---|---|
.pos-abs |
применяет position: absolute |
.pos-rel |
применяет position: relative |
.pos-fixed |
применяет position: fixed |
.pos-sticky |
применяет position: sticky |
.pos-static |
применяет position: static |
Позиционирование x,y
.pos-right.pos-left.pos-top.pos-bot<div class="pos-abs pos-right">
<div class="demo-fx bg-green pad-5"><code>.pos-right</code></div>
</div>
<div class="pos-abs pos-left">
<div class="demo-fx bg-green pad-5"><code>.pos-left</code></div>
</div>
<div class="pos-abs pos-top">
<div class="demo-fx bg-green pad-5"><code>.pos-top</code></div>
</div>
<div class="pos-abs pos-bot">
<div class="demo-fx bg-green pad-5"><code>.pos-bot</code></div>
</div>.pos-top-left
.pos-top-center
.pos-top-right
.pos-bot-left
.pos-bot-center
.pos-bot-right
.pos-left-center
.pos-right-center
.pos-center
<div class="pos-abs pos-top-left">
<code>.pos-top-left</code>
</div>
<div class="pos-abs pos-top-center">
<code>.pos-top-center</code>
</div>
<div class="pos-abs pos-top-right">
<code>.pos-top-right</code>
</div>
<div class="pos-abs pos-bot-left">
<code>.pos-bot-left</code>
</div>
<div class="pos-abs pos-bot-center">
<code>.pos-bot-center</code>
</div>
<div class="pos-abs pos-bot-right">
<code>.pos-bot-right</code>
</div>
<div class="pos-abs pos-left-center">
<code>.pos-left-center</code>
</div>
<div class="pos-abs pos-right-center">
<code>.pos-right-center</code>
</div>
<div class="pos-abs pos-center">
<code>.pos-center</code>
</div>Позиционирование offset
.pos-offset-left
.pos-offset-right
.pos-offset-top
.pos-offset-bot
×
<div class="demo-fx">
<code class="pos-abs pos-offset-left">.pos-offset-left</code>
<code class="pos-abs pos-offset-right">.pos-offset-right</code>
<code class="pos-abs pos-offset-top">.pos-offset-top</code>
<code class="pos-abs pos-offset-bot">.pos-offset-bot</code>
×
</div># Width
Утилиты для работы с шириной элементов. Данные утилиты применяют свойство
width.
| класс | описание |
|---|---|
|
responsive
.w-{size}.{viewport}-w-{size} |
применяет ширину {size}, которая зависит от выбранной системы (см.
таблицу ниже) |
| Система | Описание | {size} |
|---|---|---|
5% |
сетка задается в %, изменяется от 5% - 100% с шагом в 5% (так же включает спец. размеры 33%, 66%) | 5 10 15 ... 100 33
66 |
1/12 |
сетка задается дробью, изменяется от 1/12 - 12/12 с шагом 1/12 | 1-12 2-12 ... 12-12 |
1/24 |
сетка задается дробью, изменяется от 1/24 - 12/24 с шагом 1/24 | 1-24 2-24 ... 24-24 |
Пример
w-25
w-6-12
w-19-24
Ресайзите окно браузера
| viewport | width |
|---|---|
| * | w-6-12 |
| XL | w-8-12 |
| L | w-10-12 |
| M | w-11-12 |
| S | w-12-12 |
<div class="bg-green pad-2 w-25">w-25</div>
<div class="bg-green pad-2 w-6-12">w-6-12</div>
<div class="bg-green pad-2 w-19-24">w-19-24</div>
<div class="bg-grey-lighter pad-2 w-6-12 xl-w-8-12 l-w-10-12 m-w-11-12 s-w-12-12">
<div class="p">Ресайзите окно браузера</div>
<table class="table w-100">
<thead>
<tr>
<th class="table-w-auto">viewport</th>
<th>width</th>
</tr>
</thead>
<tbody><tr>
<td><mark>*</mark></td>
<td><code>w-6-12</code></td>
</tr>
<tr>
<td><mark>XL</mark></td>
<td><code>w-8-12</code></td>
</tr>
<tr>
<td><mark>L</mark></td>
<td><code>w-10-12</code></td>
</tr>
<tr>
<td><mark>M</mark></td>
<td><code>w-11-12</code></td>
</tr>
<tr>
<td><mark>S</mark></td>
<td><code>w-12-12</code></td>
</tr>
</tbody></table>
</div>Фиксированная ширина
Для задания фиксированной ширины используйте класс
.w-f{size}, где
{size} принимает значения:| {size} | less переменная | ширина (px) |
|---|---|---|
1 |
@width-fixed1 |
128 |
2 |
@width-fixed2 |
256 |
3 |
@width-fixed3 |
384 |
4 |
@width-fixed4 |
512 |
5 |
@width-fixed5 |
640 |
6 |
@width-fixed6 |
768 |
7 |
@width-fixed7 |
896 |
w-f1
w-f2
w-f3
w-f4
w-f5
w-f6
w-f7
<div class="bg-green pad-2 w-f1">w-f1</div>
<div class="bg-green pad-2 w-f2">w-f2</div>
<div class="bg-green pad-2 w-f3">w-f3</div>
<div class="bg-green pad-2 w-f4">w-f4</div>
<div class="bg-green pad-2 w-f5">w-f5</div>
<div class="bg-green pad-2 w-f6">w-f6</div>
<div class="bg-green pad-2 w-f7">w-f7</div>Фиксированная min/max ширина
Для задания фиксированной минимальной или максимальной ширины используйте классы
.min-w-f{size} и .max-w-f{size}, где
{size} принимает значения по аналогии с .w-f{size}# Height
Утилиты для работы с высотой элементов. Данные утилиты применяют свойство
height.
| класс | описание |
|---|---|
.h-auto |
применяет height: auto |
.h-100 |
применяет height: 100% |
.h-100v |
применяет height: 100vh |
Фиксированная min/max высота
Для задания фиксированной минимальной или максимальной высоты используйте классы
.min-h-f{size} и .max-h-f{size}, где
{size} принимает значения по аналогии с .w-f{size}# Layout
Утилиты для вертски.
| класс | описание |
|---|---|
.section |
применяет отступ margin-bottom: @spacer-layout5 |
.block |
применяет отступ margin-bottom: @spacer-layout3 |
.p |
применяет отступ margin-bottom: @spacer-layout1 |
.container |
контейнер 100% ширины (но не более @container-max-width), выровненный по
центру |
.cf .clear |
cleafix хак, для устранения проблем с float элементами |
# Scroll
Утилиты для работы со скролом элементов. Данные утилиты применяют свойство
overflow.| класс | описание |
|---|---|
.scroll-hide .noscroll |
применяет overflow: hidden |
.scroll-x |
применяет overflow-x: auto |
.scroll-y |
применяет overflow-y: auto |
# Events
Утилиты для работы с свойством
pointer-events.| класс | описание |
|---|---|
.events-none |
применяет pointer-events: none |
.events-all |
применяет pointer-events: all |
# Cursor
Утилиты для работы с свойством
cursor.| класс | описание |
|---|---|
.cursor-auto |
применяет cursor: auto |
.cursor-default |
применяет cursor: default |
.cursor-pointer |
применяет cursor: pointer |
.cursor-help |
применяет cursor: help |
# Filter
Утилиты для работы с свойством
filter.| класс | описание | пример |
|---|---|---|
.filter-blur |
применяет filter: blur(5px) |
|
.filter-grayscale |
применяет filter: grayscale(1) |
|
.filter-invert |
применяет filter: invert(1) |
|
# Object
Утилиты для работы с свойством
object-fit.| класс | описание |
|---|---|
.obj-contain |
применяет object-fit: contain |
.obj-cover |
применяет object-fit: cover |
# Misc
Прочие утилиты.
| класс | описание | пример |
|---|---|---|
.thumb .thumbnail |
применяет рамку для предпросмотра | |
.responsive |
задает max-width: 100%; height: auto применимо к <img>
<video> |
|
.round |
полностью закругляет края элемента | |
.radius-none |
убирает закругления краев элемента | |
.radius .radius-{1-5} |
закругляет края элемента, согласно заданным параметрам фреймворка (4px, 8px, 16px, 32px, 64px) | |
.shadow-none |
убирает тень элемента | |
.shadow .shadow-{1-5} |
задает тень элемента, согласно заданным параметрам фреймворка | |
.icon .icon .icon-2 .icon .icon-3 |
спец. flex контейнер для иконок |
|
.close |
close |
|
.link |
ссылка интерактивная (предполагает открытие ui элемента типа popup например) | Lorem ipsum |
.u-select-none .u-select-all .u-select-text |
применяет user-select: none | all | text |
|
.ui-muted |
применяет opacity |
Sample text |
.border-none |
применяет border: none |
Иконки
Фреймворк предполагает использование веб-шрифт MDI для иконок совместно с
.icon
.color-{value} утилитами (см. Color утилиты Misc утилиты).Установка:
npm install @mdi/font --save
npm install @mdi/light-font --saveПодключение:
// ваш <entry-point>.js
import '@mdi/font/css/materialdesignicons.min.css';
import '@mdi/light-font/css/materialdesignicons-light.min.css'Использование:
<div class="icon demo-borders"><i class="mdi mdi-account"></i></div>
<div class="icon icon-2 demo-borders"><i class="mdi mdi-account"></i></div>
<div class="icon icon-3 demo-borders"><i class="mdi mdi-account"></i></div>
<div class="icon demo-borders color-grey"><i class="mdi mdi-account mdi-18px"></i></div>
<div class="icon icon-2 demo-borders color-primary"><i class="mdi mdi-account mdi-24px"></i></div>
<div class="icon icon-3 demo-borders color-green"><i class="mdi mdi-account mdi-36px"></i></div>
<div class="icon icon-3 demo-borders color-red"><i class="mdi mdi-account mdi-48px"></i></div>
<div class="icon demo-borders"><i class="mdi mdi-loading mdi-spin"></i></div>404
Такого раздела пока нет в документации