Зависимость от isMobile. Последний должен быть включен в сборку (есть по умолчанию) или подключен к странице иным образом.
JavaScript, добавляющий на <html> класс is-mobile, если страница открыта с мобильного устройства. Так же, добавляются модификаторы блока с указанием типа устройства и производителя.
Реализуется блоком typo, все стили которого являются глобальными.
Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 1
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 2
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 3
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 4
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 5
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Заголовок 6
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Пункт 1
Подпункт 1
Подпункт 2
Пункт 2
Пункт 3
Пункт 1
Подпункт 1
Подпункт 2
Пункт 2
Пункт 3
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Определяемая сущность 1
Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.
Определяемая сущность 2
Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.
Некое, возможно, относительно длинное определение упомянутой сущности.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.
Имя Фамилия
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) user@mail.com
<address> <strong>Имя Фамилия</strong> <br> г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br> <a href="mailto:user@mail.com">user@mail.com</a></address>
Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
<blockquote> <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p> <footer>Emmet</footer></blockquote>
Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.
Из файлов папки sprite-svg/svg/ в папку sprite-svg/img/ будет сгенерирован файл спрайта sprite-svg.svg, который далее будет скопирован в папку сборки. Стилевой файл блока не используется. Сам спрайт имеет вид:
Из файлов папки sprite-png/png/ в папку sprite-png/img/ будет сгенерирован файл спрайта sprite-[ЧИСЛОВОЙ_ИНДЕКС].svg, который далее будет скопирован в папку сборки.
Стилевой файл блока генерируется автоматически и содержит примеси для использования спрайтов. Отдельный файл элемента sprite-png__demo.scss содержит вызов примеси, генерирующей стили для всех составных частей спрайта.
Заголовок
Далеко-далеко за словесными горами в стране, гласных и согласных живут.
Заголовок
Далеко-далеко за словесными горами в стране, гласных и согласных живут.
Заголовок
Далеко-далеко за словесными горами в стране, гласных и согласных живут.
<p class="alert alert--success"> <span class="alert__header">Заголовок</span> Далеко-далеко за <a href="">словесными горами</a> в стране, гласных и согласных живут.</p><div class="alert alert--danger"> <h1 class="alert__header">Заголовок</h1> Далеко-далеко за <a href="">словесными горами</a> в стране, гласных и согласных живут.</div><div class="alert alert--warning"> <h4 class="alert__header">Заголовок</h4> Далеко-далеко за <a href="">словесными горами</a> в стране, гласных и согласных живут.</div>
// Факт открытия$('#test').on('shown.nth.dropdown', function () { console.log('shown.nth.dropdown');});// Факт закрытия$('#test').on('hidden.nth.dropdown', function () { console.log('hidden.nth.dropdown');});
<div class="dropdown"> <a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a> <ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1"> <li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li> <li class="menu__item"><a class="menu__link" href="#">Пункт списка, после которого следует разделитель</a></li> <li class="menu__item"><a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li> </ul> </div> <span class="dropdown"> <button class="dropdown__toggler btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Выпадает список </button> <span class="dropdown__menu menu" aria-labelledby="dropdown-demo-2"> <span class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>span</code>)</a></span> <span class="menu__item"><a class="menu__link" href="">Пункт меню весьма длинный</a></span> <span class="menu__item"><a class="menu__link" href="">Второй пункт</a></span> </span> </span> <div class="dropdown"> <a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a> <div class="dropdown__menu" aria-labelledby="dropdown-demo-3"> <form action="https://httpbin.org/post" method="post"> <input type="text"> <select> <option>Название пункта</option> </select> <textarea rows="3"></textarea> <button class="btn">Отправить эту форму</button> </form> </div> </div> <div class="dropdown"> <button class="dropdown__toggler btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Выпадает список вверх </button> <ul class="dropdown__menu dropdown__menu--up menu" aria-labelledby="dropdown-demo-4"> <li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li> </ul> </div> <div class="dropdown"> <button class="dropdown__toggler btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Выпадает список вверх от пр. края </button> <ul class="dropdown__menu dropdown__menu--up dropdown__menu--right menu" aria-labelledby="dropdown-demo-5"> <li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li> </ul> </div>
В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).
Необязательный общий заголовок
Пояснение не обязательно.
<div class="field-checkbox"> <label class="field-checkbox__name"> <input class="field-checkbox__input" type="checkbox" checked> <span class="field-checkbox__name-text">Одинокий чекбокс такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила космос переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.</span> </label></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> <div class="field-checkbox__help-text-wrap"> <div class="field-checkbox__help-text">Пояснение не обязательно.</div> </div> </div> <div class="field-checkbox__input-wrap"> <label class="field-checkbox__name"> <input class="field-checkbox__input" type="checkbox"> <span class="field-checkbox__name-text">Текст у флажка</span> </label> </div> <div class="field-checkbox__input-wrap"> <label class="field-checkbox__name"> <input class="field-checkbox__input" type="checkbox"> <span class="field-checkbox__name-text">Текст у флажка</span> </label> </div></div>
Радиокнопки
В стилевом файле есть закомментированные фрагменты для замены нативного элемента своим (svg).
Необязательный общий заголовок
Пояснение не обязательно.
<div class="field-radio"> <label class="field-radio__name"> <input class="field-radio__input" type="radio" checked> <span class="field-radio__name-text">Одинокая радиокнопка такой одинокий, но с длинным... текстом внутри label-а. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни, свое рыбного решила. Точках семантика, решила космос переписывается толку безопасную журчит рыбными, рекламных несколько осталось свой! Знаках, дороге грамматики.</span> </label></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="demo-radio" checked> <span class="field-radio__name-text">Текст у радиокнопки</span> </label> <div class="field-radio__help-text-wrap"> <div class="field-radio__help-text">Пояснение не обязательно.</div> </div> </div> <div class="field-radio__input-wrap"> <label class="field-radio__name"> <input class="field-radio__input" type="radio" name="demo-radio"> <span class="field-radio__name-text">Текст у радиокнопки</span> </label> </div> <div class="field-radio__input-wrap"> <label class="field-radio__name"> <input class="field-radio__input" type="radio" name="demo-radio"> <span class="field-radio__name-text">Текст у радиокнопки</span> </label> </div></div>