@@include('_include/page_head.html')

Страница демонстрации блоков

Если какой-либо блок отображен криво, вероятно его стилизация отсутствует в общем стилевом файле (блок не используется на проекте).

Страница

Блок страницы (<html class="page">), благодаря которому применяются некоторые глобальные стили:

Смена боксовой модели на всех узлах: box-sizing: border-box; наследуется от html
Нормализация вьюпорта для windows-телефонов.
Сброс отступов для <body>
Стилевой обход 300 мс задержки (touch-action: manipulation;).
Ограничение размера картинок до 100% ширины родителя.

            <html class="page">
              <head>...</head>
              <body>...</body>
            </html>

Определение мобильного устройства

Зависмость от isMobile. Последний должен быть включен в сборку (есть по умолчанию) или подключен к странице иным образом.

Javascript, добавляющий на <html> класс is-mobile, если страница открыта с мобильного устройства. Так же, добавляются модификаторы блока с указанием типа устройства и производителя.

            <html class="is-mobile  is-mobile--android-phone  is-mobile--android-device  is-mobile--phone">
              ...
            </html>

Текст, теги

Реализуется блоком typo, все стили которого являются глобальными.

Параграфы, расстояние между ними. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные ссылки. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Заголовок 1

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Заголовок 2

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Заголовок 3

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Заголовок 4

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Заголовок 5

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Заголовок 6

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Пункт 1
- Подпункт 1
- Подпункт 2
Пункт 2
Пункт 3

Пункт 1
1. Подпункт 1
2. Подпункт 2
Пункт 2
Пункт 3

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Определяемая сущность 1: Некое, возможно, относительно длинное определение упомянутой сущности. Скорее всего, многострочное.
Определяемая сущность 2: Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.; Некое, возможно, относительно длинное определение упомянутой сущности.

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.

`<a>`	ссылка
`<strong>`	действительно значимый текст
`<b>`	просто выделенный текст, лид
`<i>`	иностранное слово или термин
`<em>`	эмфатическое ударение
`<s>`	~~информация, утратившая актуальность~~
`<del>`	~~изменение, внесённое в документ (удаление)~~
`<ins>`	изменение, внесённое в документ (добавление)
`<mark>`	акцент маркерным выделением
`<small>`	малозначимый текст
`<abbr>`	АББРЕВИАТУРА
`<kbd>`	`Ctrl + C`
`<sup>`	2³
`<sub>`	H₂O
`<code>`	`code`

Имя Фамилия
г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя)
imya@mail.com

            <address>
              <strong>Имя Фамилия</strong>
              <br>
              г. Лондон, ул. Виндзорский сад, д. 32 (спросить мистера Имя) <br>
              <a href="mailto:imya@mail.com">imya@mail.com</a>
            </address>

Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

Emmet

            <blockquote>
              <p>Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.</p>
              <footer>Emmet</footer>
            </blockquote>

Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

Emmet

Форматированный текст

Смотри так же БЭМ-блок для кода.

// Блочный код с тегом переноса строки 
// Вторая строка, написанная без символа переноса строки

              <pre>// Блочный код с тегом переноса строки <br>// Вторая строка, написанная без символа переноса строки</pre>

// Блочный код с символом переноса строки
// Вторая строка

              <pre>// Блочный код с символом переноса строки
              // Вторая строка</pre>

SVG-спрайт

Из файлов папки sprite-svg/svg/ в папку sprite-svg/img/ будет сгенерирован файл спрайта sprite-svg.svg, который далее будет скопирован в папку сборки. Сам спрайт имеет вид:

        <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
          <symbol id="icon-boo" viewBox="0 0 30 30"><path d="..."/></symbol>
          <symbol id="icon-bs" viewBox="0 0 28 28"><path d="..."/></symbol>
          ...
        </svg>

Для вставки на страницу используйте конструкции svg > use со ссылками на id символа:

        <svg width="30" height="30">
          <use xlink:href="img/sprite-svg.svg#icon-boo"></use>
        </svg>

Чтобы использовать ссылки на внешние svg-файлы со спрайтами, используйте svg4everybody (включен в сборку по умолчанию).

Демонстрационный контент блока (иконки стрелок):

@@include('_include/page_bottom.html')