@@include('_include/page_head.html')
Стартовое состояние проекта содержит ряд блоков и глобальных стилей, описанных и показанных в этом файле. Если некоторые блоки не работают, значит импорт их стилей отключен в файле диспетчера подключений (такие блоки не используются на этом проекте).
Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
div class="p"
. Это единственный класс в этом разделе. Оставлен, ввиду своей микроскопичности. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
<div class="p">...</div>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
<a> |
ссылка |
<strong> |
действительно значимый текст |
<b> |
просто выделенный текст, лид |
<i> |
иностранное слово или термин |
<em> |
эмфатическое ударение |
<s> |
|
<del> |
|
<ins> |
изменение, внесённое в документ (добавление) |
<mark> |
акцент маркерным выделением |
<small> |
малозначимый текст |
<abbr> |
АББРЕВИАТУРА |
<kbd> |
Ctrl + C |
<sup> |
23 |
<sub> |
H2O |
<code> |
code |
Тег address
представляет контактную информацию для ближайшего элемента-предка article
или body
. Если это элемент body
, то контактная информация применяется ко всему документу целиком. Тег обязан не использоваться для предоставления произвольного адреса (например, почтовых адресов), если эти адреса не являются реальной контактной информацией. Подробнее
<address>
<strong>Имя Фамилия</strong>
<br>
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
<a href="mailto:imya@mail.com">imya@mail.com</a>
</address>
Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
<blockquote>
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer>
</blockquote>
Смотри так же БЭМ-блок для кода.
// Блочный код с тегом переноса строки
// Вторая строка
<pre>// Блочный код с тегом переноса строки<br>// Вторая строка</pre>
// Блочный код с введённым переносом строки и табуляцией перед строками // Вторая строка
<pre>
// Блочный код с введённым переносом строки и табуляцией перед строками
// Вторая строка
</pre>
dl
представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.
<dl class="dl-horizontal">
<dt>Ассоциативный список</dt>
<dd><code>dl</code> представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.</dd>
<dt>Второй термин</dt>
<dd>Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.</dd>
<dd>Второе определение подряд.</dd>
<dt>Конституционально-эзотерический концептуализм</dt>
<dd>Некое определение многословного термина.</dd>
</dl>
Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer>Emmet</footer>
</blockquote>
Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
<blockquote class="blockquote-right">
<p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
<footer><cite>Emmet</cite></footer>
</blockquote>
Если используются ol
или ul
, пунктам списка можно не давать классов. При использовании других тегов (см. пример кода) нужны классы у элементов.
<ol class="list-nums">
<li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
<li>Проектах за вопрос курсивных.
<ul class="list-nums">
<li>Одна послушавшись дал, большого.</li>
<li>Далеко-далеко за словесными горами.</li>
</ul>
</li>
<li>Далеко-далеко за словесными горами.</li>
</ol>
<div class="list-nums">
<div class="list-nums__item">Далеко-далеко за словесными горами.</div>
...
</div>
Подсветка маркера пункта модификатором элемента .list-nums__item.list-nums__item--main
(отдельный LESS-файл)
<ol class="list-nums">
<li>Далеко-далеко за словесными горами.</li>
<li class="list-nums__item list-nums__item--main">Проектах за вопрос курсивных.</li>
</ol>
Подсветка всех маркеров списка модификатором блока .list-nums.list-nums--main
(отдельный LESS-файл). Распространяется только на тот список, которому дан модификатор.
<ol class="list-nums list-nums--main">
<li>Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами. Далеко-далеко за словесными горами.</li>
<li>Проектах за вопрос курсивных.
<ul class="list-nums">
<li>Одна послушавшись дал, большого.</li>
<li>Далеко-далеко за словесными горами.</li>
</ul>
</li>
<li>Далеко-далеко за словесными горами.</li>
</ol>
<ul class="list-bullet">
<li>Далеко-далеко за словесными горами.</li>
<li>Одна послушавшись дал, большого.</li>
<li>Проектах за вопрос курсивных.</li>
<li>Власти, она себя за?
<ul>
<li>Одна послушавшись дал, большого.</li>
<li>Далеко-далеко за словесными горами.</li>
</ul>
</li>
<li>Решила алфавит, назад маленький.</li>
</ul>
Классов, вроде .test-accent
(увеличенный текст), .test-secondary
(уменьшенный текст), .test-muted
(«приглушенный» текст), .align-center
(выравнивание текста по центру), .bg-primary
(заданный цвет фона) и т.п. тут не будет. Это не фреймворк, это стартовая библиотека блоков. Предполагается, что пользователь в состоянии прицельно применить любую стилизацию по семантическому классу уровня блока/элемента/модификатора.
<img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">
<img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt="">
<a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
<a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
<a href=""><img class="thumb" src="img/TEMP-DavidBlaine.jpg" width="120" alt=""></a>
Имя | Поросёнок |
---|---|
Фамилия | Пётр |
Отчество | Баракович |
Имя | Фамилия | Отчество |
---|---|---|
Поросёнок | Пётр | Баракович |
<table>
<caption>Таблица 1</caption>
<tr>
<th>Имя</th>
<td>Поросёнок</td>
</tr>
<tr>
<th>Фамилия</th>
<td>Пётр</td>
</tr>
<tr>
<th>Отчество</th>
<td>Баракович</td>
</tr>
</table>
<table>
<caption>Таблица 2</caption>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Отчество</th>
</tr>
<tr>
<td>Поросёнок</td>
<td>Пётр</td>
<td>Баракович</td>
</tr>
</table>
Тут и ниже во всех примерах (хоть сколько-нибудь широких таблиц) в демонстрации использована обертка для адаптивности с горизонтальной прокруткой.
Имя | Фамилия | Мыло | Статус | Политическая ориентация |
---|---|---|---|---|
Иннокентий | Барлаухенштицкен-Ламанческий | Хозяйственное | Администратор | «ВСЕГДА!» |
Васисуалий | Пылепневмомешковыколачивателев | Душистое | Юзверь | Нижняя |
<table class="table">
<caption>Таблица как БЭМ-блок, нет прописанных thead, tbody, tfoot</caption>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
<tr>
<td>....</td>
</tr>
</table>
Имя | Фамилия | Мыло | Статус | Политическая ориентация |
---|---|---|---|---|
Иннокентий | Барлаухенштицкен-Ламанческий | Хозяйственное | Администратор | «ВСЕГДА!» |
Васисуалий | Пылепневмомешковыколачивателев | Душистое | Юзверь | Нижняя |
Ктулху | Втанк | ktulkhu@ad.ru | Патриарх | Яизм |
Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи. |
<table class="table">
<caption>Таблица как БЭМ-блок, есть thead, tbody, tfoot и у них есть классы</caption>
<thead class="table__header">
<tr>
<th>...</th>
</tr>
</thead>
<tbody class="table__body">
<tr>
<td>...</td>
</tr>
</tbody>
<tfoot class="table__footer">
<tr>
<td>....</td>
</tr>
</tfoot>
</table>
Модификатор table--not-greed
, отдельный less-файл.
Не могут иметь адаптивность с горизонтальной прокруткой (становятся жадными).
Имя | Фамилия |
---|---|
Иннокентий | Барлаух |
Васисуалий | Пылепев |
Ктулху | Втанк |
<table class="table table--not-greed">
...
</table>
Модификатор table--hover
, отдельный less-файл. Подсвечиваются только строки внутри tbody
.
Имя | Фамилия | Мыло | Статус | Политическая ориентация |
---|---|---|---|---|
Иннокентий | Барлаухенштицкен-Ламанческий | Хозяйственное | Администратор | «ВСЕГДА!» |
Васисуалий | Пылепневмомешковыколачивателев | Душистое | Юзверь | Нижняя |
Ктулху | Втанк | ktulkhu@ad.ru | Патриарх | Яизм |
Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи. |
<table class="table table--hover">
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Модификатор table--striped
, отдельный less-файл. Подсвечиваются только строки внутри tbody
.
Имя | Фамилия | Мыло | Статус | Политическая ориентация |
---|---|---|---|---|
Иннокентий | Барлаухенштицкен-Ламанческий | Хозяйственное | Администратор | «ВСЕГДА!» |
Васисуалий | Пылепневмомешковыколачивателев | Душистое | Юзверь | Нижняя |
Ктулху | Втанк | ktulkhu@ad.ru | Патриарх | Яизм |
Васисуалий | Петров | Душистое | Монстр | Нижняя |
Ктулху | Втанк | Домашнее от Агафьи | Патриарх | ИдиотъЪ |
Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи. |
<table class="table table--striped">
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Для просмотра адаптации таблицы сделайте вьюпорт узким.
TODO: сделать модификатором блока .table
Внимание! Адаптивные таблицы требуют добавления дата-атрибутов.
Внимание! Применение варианта по умолчанию ограничено таблицами, имеющими заголовочные ячейки сверху.
Имя и фамилия | Тип индивидуального мироощущения | Образ в искусстве |
---|---|---|
Анатоле Вассерман | Девственность | Светлый |
Джакомо Казанова | Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей. | Невероятно привлекательный |
<table class="table table-responsive">
<thead>
<tr>
<th>Имя и фамилия</th>
<th>Тип мироощущения</th>
<th>Образ в искусстве</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Имя и фамилия">Анатоле Вассерман</td>
<td data-label="Тип мироощущения">Девственность</td>
<td data-label="Образ в искусстве">Светлый</td>
</tr>
<tr>
<td data-label="Имя и фамилия">Джакомо Казанова</td>
<td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
<td data-label="Образ в искусстве">Невероятно привлекательный</td>
</tr>
</tbody>
</table>
Модификатор table-responsive--horizontal
, отдельный less-файл.
TODO: сделать модификатором блока .table
Имя и фамилия | Тип индивидуального мироощущения | Образ в искусстве |
---|---|---|
Анатоле Вассерман | Девственность | Светлый |
Джакомо Казанова | Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей. | Невероятно привлекательный |
<table class="table table-responsive table-responsive--horizontal">
<thead>
<tr>
<th>Имя и фамилия</th>
<th>Тип мироощущения</th>
<th>Образ в искусстве</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Имя и фамилия">Анатоле Вассерман</td>
<td data-label="Тип мироощущения">Девственность</td>
<td data-label="Образ в искусстве">Светлый</td>
</tr>
<tr>
<td data-label="Имя и фамилия">Джакомо Казанова</td>
<td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
<td data-label="Образ в искусстве">Невероятно привлекательный</td>
</tr>
</tbody>
</table>
Для просмотра адаптации таблицы сделайте вьюпорт узким.
TODO: сделать модификатором блока .table
Иннокентий | Барлаухенштицкен-Ламанческий | Хозяйственное | Администратор | «ВСЕГДА!» |
Васисуалий | Пылепневмомешковыколачивателев | Душистое | Юзверь | Нижняя |
Ктулху | Втанк | ktulkhu@ad.ru | Патриарх | Яизм |
Имя | Фамилия | Мыло | Статус | Политическая ориентация |
---|---|---|---|---|
Иннокентий | Барлаухенштицкен-Ламанческий | Хозяйственное | Администратор | «ВСЕГДА!» |
Васисуалий | Пылепневмомешковыколачивателев | Душистое | Юзверь | Нижняя |
Ктулху | Втанк | ktulkhu@ad.ru | Патриарх | Яизм |
Итого: 18 попугаев, 15 длинных червяков, надувная женщина и украденный из церкви огарок дешевой свечи. |
<div class="table table-responsive-scroll">
<table> <!-- Можно с class="table", можно без. -->
...
</table>
</div>
Для просмотра адаптации таблицы сделайте вьюпорт узким.
TODO: сделать модификатором блока .table
ВНИМАНИЕ! При перестройке контент в ячейках таблицы жёстко фиксируется как однострочный (нет зависимости развёрнутых ячеек).
ВНИМАНИЕ! Ячейки не должны объединяться. caption
скрывается.
Имя | Фамилия | Мыло | Статус | Политическая ориентация |
---|---|---|---|---|
Иннокентий | Барлаухенштицкен-Ламанческий | Хозяйственное | Администратор | «ВСЕГДА!» |
Васисуалий | Пылепневмомешковыколачивателев | Душистое | Юзверь | Нижняя |
Ктулху | Втанк | ktulkhu@ad.ru | Патриарх | Яизм |
1 | 2 | 3 | 4 | 5 |
<div class="table-responsive-rotate">
<table> <!-- Можно с class="table", можно без. -->
...
</table>
</div>
Модификатор table-responsive-rotate--thead-fix
, отдельный less-файл. Требует наличия thead
, чтобы было что фиксировать.
TODO: сделать модификатором блока .table
Требует дополнительной обёртки, см. код примера.
Имя | Фамилия | Мыло | Статус | Политическая ориентация |
---|---|---|---|---|
Иннокентий | Барлаухенштицкен-Ламанческий | Хозяйственное | Администратор | «ВСЕГДА!» |
Васисуалий | Пылепневмомешковыколачивателев | Душистое | Юзверь | Нижняя |
Ктулху | Втанк | ktulkhu@ad.ru | Патриарх | Яизм |
1 | 2 | 3 | 4 | 5 |
<div class="table-responsive-rotate table-responsive-rotate--thead-fix">
<div class="table-responsive-rotate__inner">
<table> <!-- Можно с class="table", можно без. -->
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
Размеры задаются в em
— зависят от размера шрифта родительского элемента.
div
.
<!-- БЭМ-блок может быть как label, так и div -->
<label class="field-text">
<div class="field-text__name">Любое поле, выглядящее как текстовое</div>
<div class="field-text__input-wrap">
<input class="field-text__input" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Необязательное пояснение</div>
</div>
</label>
<label class="field-text">
<div class="field-text__name">Многострочное текстовое поле</div>
<div class="field-text__input-wrap">
<textarea class="field-text__input" placeholder="textarea"></textarea>
<div class="field-text__help-text">Необязательное пояснение</div>
</div>
</label>
<div class="field-text">
<label class="field-text__name" for="text-field-1">Любое поле, выглядящее как текстовое</label>
<div class="field-text__input-wrap">
<input class="field-text__input" id="text-field-1" type="text" placeholder="input[type=text]">
<div class="field-text__help-text">Необязательное пояснение</div>
</div>
</div>
Размеры задаются в em
— зависят от размера шрифта родительского элемента.
label
.label
.
<div class="field-checkbox">
<div class="field-checkbox__title">Стандартный флажок</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-checkbox">
<div class="field-checkbox__title">Несколько стандартных флажков</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Переиспользовать</span>
</label>
...
<div class="field-checkbox__help-text">Разметка никак не модифицируется...</div>
</div>
</div>
Модификатор field-checkbox--custom
, отдельный less-файл. Изображения в формате SVG, вписываются в CSS-файл функцией data-uri()
компилятора LESS.
label
.label
.
<div class="field-checkbox field-checkbox--custom">
<div class="field-checkbox__title">Собственный флажок</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<div class="field-checkbox__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-checkbox field-checkbox--custom">
<div class="field-checkbox__title">Несколько собственных флажков</div>
<div class="field-checkbox__input-wrap">
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox" checked>
<span class="field-checkbox__name-text">Использовать</span>
</label>
<label class="field-checkbox__name">
<input class="field-checkbox__input" type="checkbox">
<span class="field-checkbox__name-text">Переиспользовать</span>
</label>
...
<div class="field-checkbox__help-text">Разметка никак не модифицируется...</div>
</div>
</div>
Размеры задаются в em
— зависят от размера шрифта родительского элемента.
label
.label
.
<div class="field-radio">
<div class="field-radio__title">Стандартная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio">
<div class="field-radio__title">Несколько стандартных радиокнопок</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-1" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-1">
<span class="field-radio__name-text">Переиспользовать</span>
</label>
...
<div class="field-radio__help-text">Разметка никак не модифицируется...</div>
</div>
</div>
Модификатор field-radio--custom
, отдельный less-файл. Изображения в формате SVG, вписываются в CSS-файл функцией data-uri()
компилятора LESS.
label
.label
.
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Собственная радиокнопка</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<div class="field-radio__help-text">Пояснение не обязательно.</div>
</div>
</div>
<div class="field-radio field-radio--custom">
<div class="field-radio__title">Несколько собственных радиокнопок</div>
<div class="field-radio__input-wrap">
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-3" checked>
<span class="field-radio__name-text">Использовать</span>
</label>
<label class="field-radio__name">
<input class="field-radio__input" type="radio" name="radio-3">
<span class="field-radio__name-text">Переиспользовать</span>
</label>
...
<div class="field-radio__help-text">Разметка никак не модифицируется...</div>
</div>
</div>
Элемент переключателя стилизован с ипользованием px
(с em
нельзя настроить точные пиксельные размеры и отступы для всех font-size
родителя). Сам блок подстраивается под размер шрифта родителя, переключатель — нет.
<div class="field-toggler">
<div class="field-toggler__title">Переключатель-флажок</div>
<div class="field-toggler__input-wrap">
<label class="field-toggler__name">
<input class="field-toggler__input" type="checkbox">
<span class="field-toggler__name-text">Использовать</span>
</label>
<div class="field-toggler__help-text">Графика не используется, всё нарисовано CSS-ом.</div>
</div>
</div>
<label class="field-select">
<div class="field-select__name">Селект</div>
<div class="field-select__select-wrap">
<select class="field-select__select">
<optgroup label="Группа">
<option>Значение 1</option>
<option>Значение 2</option>
<option>Значение 3</option>
</optgroup>
<option>Значение 10</option>
</select>
<small class="field-select__help-text">Пояснение не обязательно.</small>
</div>
</label>
Стилизуется без JS. Подстраивается под размер шрифта родителя. Кроссбраузерность: Firefox 23+, Safari 4+, iOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+
min="1" max="100" step="1" value="70"
.min="20" max="100" step="10" value="20"
<div class="field-range">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70">
<div class="field-range__help-text">Необязательное пояснение.</div>
</div>
</div>
Дополнительный элемент field-range__line
, отдельный less-файл.
Линейка добавляется вставкой в разметку дополнительных тегов. Текстовые значения берутся из data-атрибутов. Первый элемент линейки позиционируется абсолютно (не вызывает увеличения длины шкалы). Второй и далее элементы распределяются равномерно, занимают одинаковое количество места в «строке».
Чтобы двигающийся элемент чётко попадал в линейку, шаг элемента должен быть достаточно мелким и/или линейка должна быть достаточно частой или шаг должен строго соответствовать линейке.
<div class="field-range">
<div class="field-range__name">Range</div>
<div class="field-range__input-wrap">
<div class="field-range__line">
<span class="field-range__line-item" data-line-value="0%"></span>
<span class="field-range__line-item" data-line-value="25%"></span>
<span class="field-range__line-item" data-line-value="50%"></span>
<span class="field-range__line-item" data-line-value="75%"></span>
<span class="field-range__line-item" data-line-value="100%"></span>
</div>
<input class="field-range__input" type="range" min="1" max="100" step="1" value="70" step="1">
<div class="field-range__help-text">Необязательное пояснение.</div>
</div>
</div>
<div class="field-file">
<div class="field-file__name">Выбор файлов</div>
<label class="field-file__input-wrap">
<input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
<div class="field-file__name-text" data-button-text="Выбрать файл(ы)">Ничего не выбрано</div>
<div class="field-file__help-text">Отображение выбранного файла(ов) требует Javascript-а. Стилизация — не требует.</div>
</label>
</div>
<div class="field-actions">
<div class="field-actions__text">Поля отмеченные * обязательны для заполнения.</div>
<button class="btn">Отправить</button>
<br>
<button class="btn">Отменить</button>
</div>
Форма как БЭМ-блок. Добавляется стилизация fieldset
, появляется возможность использовать модификаторы (см. ниже).
<form action="" class="form">
<fieldset>
<legend>Файлдсет первый</legend>
<label class="field-text">...</label>
<div class="field-checkbox">...</div>
</fieldset>
<fieldset>
<legend>Файлдсет второй</legend>
<label class="field-select">...</label>
<div class="field-file">...</div>
<div class="field-range">...</div>
</fieldset>
<div class="field-actions">
<button class="btn">Отправить</button>
</div>
</form>
Только начиная с SM ширины. Модификатор form--horizontal
, отдельный less-файл.
ВНИМАНИЕ! Поскольку все отступы сделаны в em, при наличии названий полей на некоторых размерах шрифта возможно несоответствие (1-2px) базовой линии названия и базовой линии текста в поле.
<form class="form form--horizontal">
<label class="field-text">...</label>
<label class="field-text">...</label>
<div class="field-checkbox">
<div class="field-checkbox__title">Общее название</div>
<div class="field-checkbox__input-wrap">...</div>
</div>
<div class="field-radio">
<div class="field-radio__title"></div> <!-- ← ВНИМАНИЕ! Общего названия нет, но есть div — есть отступ -->
<div class="field-radio__input-wrap">...</div>
</div>
<div class="field-radio">
<!-- Нет общего названия, нет пустого div — нет отступа -->
<div class="field-radio__input-wrap">...</div>
</div>
<div class="field-toggler">...</div>
<label class="field-select">...</label>
<div class="field-file">...</div>
<div class="field-range">...</div>
<div class="field-actions">
<button class="btn">Отправить</button>
</div>
</form>
Только начиная с SM ширины. Модификатор form--line
, отдельный less-файл.
ВНИМАНИЕ! Поскольку все отступы сделаны в em, при наличии названий полей на некоторых размерах шрифта возможно несоответствие (1-2px) базовой линии названия и базовой линии текста в поле.
<form class="form form--line">
<label class="field-text">...</label>
<label class="field-text">...</label>
<div class="field-actions">
<button class="btn">Отправить</button>
</div>
</form>
Показанные кнопки (кнопки по умолчанию) стилизуются примесями. Для создания индивидуальных кнопок используйте примесь .btn()
или полностью индивидуальное оформление с включением правил этой примеси.
<a class="btn" href="">Cсылка</a>
<a class="btn" href="">Cсылка</a>
<input class="btn" type="submit" value="Input">
<button class="btn">Button</button>
<a class="btn btn--main" href="">Cсылка</a>
<input class="btn btn--main" type="submit" value="Input">
<button class="btn btn--main">Button</button>
<a class="btn btn--success" href="">Cсылка</a>
<input class="btn btn--success" type="submit" value="Input">
<button class="btn btn--success">Button</button>
<a class="btn btn--danger" href="">Cсылка</a>
<input class="btn btn--danger" type="submit" value="Input">
<button class="btn btn--danger">Button</button>
Модификаторы btn--lg
, btn--sm
, вписаны в less-файл стилизации кнопок.
<a class="btn btn--lg" href="";>Cсылка (lg)</a>
<input class="btn btn--lg" type="submit" value="Input (lg)">
<button class="btn btn--lg">Button (lg)</button>
<a class="btn btn--sm" href="">Cсылка (sm)</a>
<input class="btn btn--sm" type="submit" value="Input (sm)">
<button class="btn btn--sm">Button (sm)</button>
Модификатор btn--block
, вписан в less-файл стилизации кнопок.
<a class="btn btn--block" href="">Cсылка</a>
<input class="btn btn--block btn--main" type="submit" value="Input">
<button class="btn btn--block btn--success btn--lg">Button (lg)</button>
Потенциально доступны любые сочетания описанных в этом разделе элементов.
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<label class="field-select fields-group__item">
<div class="field-select__select-wrap">
<select class="field-select__select">
<option>Значение 1</option>
<option>Значение 2</option>
</select>
</div>
</label>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
</div>
<div class="fields-group">
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
$
</span>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
.00
</span>
</div>
<div class="fields-group">
<span class="fields-group__item fields-group__item--addon fields-group__item--text">
$
</span>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<button class="btn fields-group__item fields-group__item--addon">Отправить</button>
<button class="btn fields-group__item fields-group__item--addon">Отменить</button>
</div>
<div class="fields-group">
<span role="presentation" class="dropdown fields-group__item--dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение
</button>
<ul class="dropdown__menu">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
<label class="field-text fields-group__item">
<input class="field-text__input" type="text" placeholder="input[type=text]">
</label>
<span role="presentation" class="dropdown fields-group__item--dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--right">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
</div>
<div class="btn-group">
<button class="btn">Отправить</button>
<button class="btn btn--main">Отменить</button>
<button class="btn">Отменить</button>
<span role="presentation" class="dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадение от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--right">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li><a href="">Пункт меню весьма длинный</a></li>
<li><a href="">Второй пункт</a></li>
</ul>
</span>
</div>
Свойства:
ul
или div
с произвольным содержимым.
<span role="presentation" class="dropdown">
<a href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Ссылка с выпадением
</a>
<ul class="dropdown__menu" aria-labelledby="drop">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</span>
<span role="presentation" class="dropdown">
<button class="dropdown__toggler btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Кнопка с выпадением
</button>
<ul class="dropdown__menu" aria-labelledby="drop">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</span>
Модификатор dropdown__menu--up
на выпадающем элементе.
<span role="presentation" class="dropdown" id="test">
<button class="dropdown__toggler btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Кнопка с выпадением
</button>
<ul class="dropdown__menu dropdown__menu--up" aria-labelledby="qwer">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</span>
Модификатор dropdown__menu--right
на выпадающем элементе. Нормально сочетается с модификатором dropdown__menu--up
.
<span role="presentation" class="dropdown" id="test">
<button class="dropdown__toggler btn" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Кнопка с выпадением
</button>
<ul class="dropdown__menu dropdown__menu--right" aria-labelledby="qwer">
<li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</span>
// Факт открытия
$('#test').on('shown.nth.dropdown', function () {
console.log('shown.nth.dropdown');
});
// Факт закрытия
$('#test').on('hidden.nth.dropdown', function () {
console.log('hidden.nth.dropdown');
});
БЭМ-блоки .row
, .col-[ID]-[COL]
, .col-[ID]-offset-[COL]
Возможные ID сетки: xs, sm, md, lg, xl, xxl (xxl по умолчанию закомментированы). Вдохновлено Bootstrap 4.
Промежутки ячеек модульной сетки сделаны с помощью padding
(@grid-gutter-width / 2
), у родителя модульной сетки есть отрицательные margin
(@grid-gutter-width / -2
) для выравнивания левой границы контентных областей ячеек сетки по левым границам блоков вне сетки.
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
.col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">...</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">...</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">...</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">...</div>
</div>
.col-md-2 .col-lg-3
.col-md-10 .col-md-offset-1 .col-lg-9
<div class="row">
<div class="col-md-2 col-lg-3">...</div>
<div class="col-md-9 col-md-offset-1 col-lg-8">...</div>
</div>
Ширины, на которых возможна перестройка блоков проекта:
Переменная | Ширина в px по умолчанию | ID сетки, начинающей срабатывать |
---|---|---|
@screen-xs |
0 | XS |
@screen-sm |
480 | SM |
@screen-md |
768 | MD |
@screen-lg |
992 | LG |
@screen-xl |
1200 | XL |
@screen-xxl |
1800 | XXL |
Приоритетным является подход, в котором вместо упомянутых классов модульной сетки используются семантические БЭМ-овские классы и LESS-примеси (см. файл с примесями).
Абсолютно любая сетка на любой ширине. Бесплатно без регистрации и СМС.
Примеси генерируют много медиа-выражений! Обязательно используйте конкатенатор медиа-выражений, к примеру, этот (написанный с PostCSS).
TODO
Демо в CodePen (сразу виден рендер демо-блоков). Демо на JS Bin (сразу видно результат компиляции, без препроцессинга).
Если промежуток отличается от 3rem (30px по умолчанию), нужно пойти и поменять значение переменной @grid-gutter-width
.
.block-name {
.row(); // На всех вьюпортах промежуток по умолчанию (из переменной @grid-gutter-width)
&__element {
.col(xs, 6); // Изначально 6/12 (50%), на SM будет то же самое, т.к. нет вызова .col(sm, ЧИСЛО);
.col(md, 4); // Начиная с MD — 4/12 (33.33333333%)
.col(lg, 3); // Начиная с LG — 3/12 (25%), на XL и XXL будет то же самое
}
}
// В файле с переменными:
@grid-gutter-width: 0;
// В стилизационном файле:
.block-name {
.row();
&__element {
.col(xs, 6);
}
}
.block-name {
.row(1rem); // Передаём примеси промежуток для XS (для SM и далее он будет по умолчанию)
&__element {
.col(xs, 6, @grid-columns, 1rem); // Нужно передать изменённый промежуток колонкам тоже
.col(sm, 4); // Восстановление промежутка по умолчанию
}
}
.block-name {
// При указании переменных подряд имена можно не писать, здесь оставлены для наглядности
// @xs-grid-gutter: 1rem; // XS-ширина: указан промежуток между ячейками сетки
// @sm-grid-gutter: 1.8rem; // SM-ширина: указан промежуток между ячейками сетки
// @md-grid-gutter: 2rem; // MD-ширина: указан промежуток между ячейками сетки
// @lg-grid-gutter: @grid-gutter-width; // LG-ширина: промежуток между ячейками берётся из переменной
// @xl-grid-gutter: 4rem; // XL-ширина: указан промежуток между ячейками сетки
// @xxl-grid-gutter: 5rem; // XXL-ширина: указан промежуток между ячейками сетки
// Короткая форма указания промежутков для всех ширин:
// 1rem, 1.8rem, 2rem, @grid-gutter-width, 4rem, 5rem
.row(
@xs-grid-gutter: 1rem,
@sm-grid-gutter: 1.8rem,
@md-grid-gutter: 2rem,
@lg-grid-gutter: @grid-gutter-width,
@xl-grid-gutter: 4rem,
@xxl-grid-gutter: 5rem,
);
&__element {
// Всем ячейкам тоже указываем промежутки
.col(xs, 6, @grid-columns, 1rem);
.col(sm, 6, @grid-columns, 1.8rem);
.col(md, 6, @grid-columns, 2rem);
.col(lg, 6, @grid-columns, @grid-gutter-width);
.col(xl, 6, @grid-columns, 4rem);
.col(xxl, 6, @grid-columns, 5rem);
}
}
.block-name {
// Для XS опускаем, сразу пишем для SM (вынуждены указать конкретную переменную, поскольку примесь сначала ждёт переменную для XS)
.row(@sm-grid-gutter: 1rem);
// .row(@grid-gutter-width, 1rem); // Полностью аналогично, но с соблюдением очередности переменных при вызове
&__element {
.col(sm, 6, @grid-columns, 1rem); // Нужно передать изменённый промежуток колонкам тоже
.col(md, 4); // Восстановление промежутка по умолчанию
}
}
.block-name {
// Первая ожидаемая переменная — для XS — указываем 0, далее не указываем (будет по умолчанию)
.row(0);
&__element {
.col(xs, 6, @grid-columns, 0); // Нужно передать нулевой промежуток
.col(sm, 6); // Восстановление промежутка по умолчанию
}
}
.root {
// Промежуток между колонками будет отличаться только на XS-ширине, это первый ожидаемый примесью параметр, указываем только его.
.row(1rem);
&__cuprum {
.col(xs, 1, 2, 1rem); // 1 колонка из 2, нужно указать измененный для .row() промежуток
.col(sm, 4); // начиная с SM — 4 колонки из 12 (12 по умолчанию, можно не указывать)
.col(md, 3); // начиная с MD — 3 колонки из 12 (12 по умолчанию, можно не указывать)
}
&__aurum {
.col(xs, 1, 2, 1rem);
.col(sm, 8);
.col(md, 9);
}
}
.root {
.row(); // Промежуток везде одинаковый (берется из переменной)
&__cuprum {
// Пока вьюпорт не стал равен или шире MD, блок 100% ширины родителя
.col(md, 3); // начиная с MD — 3 из 12
}
&__aurum {
// Пока вьюпорт не стал равен или шире MD, блок 100% ширины родителя
.col(md, 9); // начиная с MD — 9 из 12
}
}
К нужным элементам добавляем примеси, элементы скрываются на тех или иных ширинах вьюпорта.
В примесях указано только значение display: none;
, без !important
.
.block-name {
.hidden-up(lg); // Скрыть на LG (включительно) и более широких
.hidden-down(sm); // Скрыть на SM (включительно) и более узких
}
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.
<ol class="step-list">
<li class="step-list__item">
<h2 class="step-list__title">Автоматизируйте всё</h2>
<div class="step-list__text">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
</div>
<a href="https://github.com/nicothin/NTH-start-project" class="btn">Автоматизировать</a>
</li>
<li class="step-list__item step-list__item--main">
<h2 class="step-list__title">Используйте голову</h2>
<div class="step-list__text">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный, образ вопроса текст домах своего что текстами ipsum взобравшись использовало.</p>
</div>
<a href="" class="btn btn--main">Начать</a>
</li>
<li class="step-list__item step-list__item--danger">
<h2 class="step-list__title">Верстайте быстро</h2>
<div class="step-list__text">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
</div>
<a href="" class="btn btn--danger">Приступить</a>
</li>
<li class="step-list__item step-list__item--success">
<h2 class="step-list__title">Испытывайте удовольствие от работы</h2>
<div class="step-list__text">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которое напоивший, одна лучше свое предупреждал моей осталось власти, безорфографичный.</p>
</div>
<a href="" class="btn btn--success">Да, детка, сверстай мне!</a>
</li>
</ol>
span
:
Метка
Метка
Метка
Метка
Метки-div
:
Метки с иконками: Метка Метка Метка Метка
<span class="label">Метка</span>
<span class="label label--main">Метка</span>
<span class="label label--danger">Метка</span>
<span class="label label--success">Метка</span>
<div class="label">Метка</div>
<div class="label label--main">Метка</div>
<div class="label label--danger">Метка</div>
<div class="label label--success">Метка</div>
<a href="" class="label">Метка</a>
<a href="" class="label label--main">Метка</a>
<a href="" class="label label--danger">Метка</a>
<a href="" class="label label--success">Метка</a>
<a href="" class="btn">Кнопка
<span class="label">1</span>
</a>
<span class="label">
<svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg>
</span>
<span class="label label--circle label--success">
<svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-folder-open"></use></svg>
</span>
<span class="label label--circle label--tag">
<svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-road"></use></svg>
</span>
<span class="label label--danger">
<svg width=".7em" height=".7em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-search"></use></svg>
</span>
Дополнительный элемент label__detail
, отдельный less-файл.
<span class="label">Метка <span class="label__detail">7</span></span>
<span class="label label--main">Метка <span class="label__detail">7</span></span>
<span class="label label--danger">Метка <span class="label__detail">7</span></span>
<span class="label label--success">Метка <span class="label__detail">7</span></span>
Модификатор label--tag
, отдельный less-файл.
<span class="label label--tag">Метка <span class="label__detail">7</span></span>
<span class="label label--tag label--main">Метка</span>
<span class="label label--tag label--danger">Метка</span>
<span class="label label--tag label--success">Метка</span>
Модификатор label--circle
, отдельный less-файл.
<span class="label label--circle">Метка</span>
<span class="label label--circle label--main">Метка</span>
<span class="label label--circle label--danger">Метка</span>
<span class="label label--circle label--success">Метка</span>
Модификатор label--absolute
, отдельный less-файл.
<a href="" class="btn">Кнопка <span class="label label--absolute">1</span></a>
Модификаторы alert--danger
и alert--success
не являются отдельными less-файлами.
Заголовки и внутренние ссылки — необязательные БЭМ-элементы. Ссылка внутри может быть акцентирована классом alert__link
или оставлена по умолчанию (оба варианта показаны ниже).
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!
<div class="alert">
<h1 class="alert__header">Нейтральное сообщение</h1> <!-- Необязательный заголовок -->
<p>...</p>
</div>
<div class="alert alert--danger">
<h1 class="alert__header">Внимание, опасность, отказ</h1> <!-- Необязательный заголовок -->
<p>...</p>
</div>
<div class="alert alert--success">
<h1 class="alert__header">Успешное действие</h1> <!-- Необязательный заголовок -->
<p>...</p>
</div>
Дополнительный элемент alert__close
, отдельный less-файл.
Использует JS для сокрытия Сообщения по нажатию. Сообщение только скрывается, не убирается из DOM.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!
<div class="alert alert--danger-invert">
<button class="alert__close" aria-label="Close">×</button>
<h1 class="alert__header">Внимание, опасность, отказ</h1> <!-- Необязательный заголовок -->
<p>...</p>
</div>
Модификатор alert--danger-invert
, отдельный less-файл.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!
<div class="alert alert--danger-invert">
<h1 class="alert__header">Внимание, опасность, отказ</h1> <!-- Необязательный заголовок -->
<p>...</p>
</div>
Модификатор alert--success-invert
, отдельный less-файл.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Языкового жаренные его сбить живет оксмокс? Города текстами предложения решила ее свое великий вершину семь подпоясал, но. Лучше, взгляд, послушавшись!
<div class="alert alert--success-invert">
<h1 class="alert__header">Успешное действие</h1> <!-- Необязательный заголовок -->
<p>...</p>
</div>
Модификатор alert--icon
, дополнительные элементы alert__icon
и alert__content
(чуть другая разметка), отдельный less-файл.
Хорошо сочетается с любыми другими модификаторами. Иконка может быть как до текста, так и после.
<div class="alert alert--icon">
<div class="alert__icon">
<svg width="3em" height="3em" fill="currentColor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg>
</div>
<div class="alert__content">
...
</div>
</div>
<div class="alert alert--icon">
<div class="alert__content">
...
</div>
<div class="alert__icon">
<svg width="3em" height="3em" fill="currentColor"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#block-library-camera"></use></svg>
</div>
</div>
Фиксированная во вьюпорте область, в которой показываются уведомления.
Что-то пошло не так!
Шутка, все хорошо.
<div class="alert-area">
<div class="alert alert--danger-invert">
<button class="alert__close" aria-label="Close">×</button>
<p><strong>Что-то пошло не так!</strong></p>
</div>
<div class="alert alert--success-invert">
<button class="alert__close" aria-label="Close">×</button>
<p>Шутка, все хорошо.</p>
</div>
</div>
Анимация прописана в самом SVG-файле, размещенном в фоне псевдоэлемента блока. Файл не кодируется в base64, в текст SVG-файла внедрена переменная с цветом.
<div style="min-height: 8em; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;">
<span class="loader"></span>
</div>
Для блоков кода срабатывает подсветка синтаксиса. Это highlightjs.org с несколько изменёнными стилями.
<div style="display: block;">
<span>Это строка HTML-разметки.</span>
<span>Это строка HTML-разметки.</span>
</div>
<pre class="code">
<code class="code__syntax html"> <!-- Тут указывается язык -->
<span class="code__line"><div style="display: block;"></span>
<span class="code__line"> <span>Это строка HTML-разметки.</span></span>
<span class="code__line"> <span>Это строка HTML-разметки.</span></span>
<span class="code__line"></div></span>
</code>
</pre>