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

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

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

Страница

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

            <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
    1. Подпункт 1
    2. Подпункт 2
  2. Пункт 2
  3. Пункт 3

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

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

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

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

<a> ссылка
<strong> действительно значимый текст
<b> просто выделенный текст, лид
<i> иностранное слово или термин
<em> эмфатическое ударение
<s> информация, утратившая актуальность
<del> изменение, внесённое в документ (удаление)
<ins> изменение, внесённое в документ (добавление)
<mark> акцент маркерным выделением
<small> малозначимый текст
<abbr> АББРЕВИАТУРА
<kbd> Ctrl + C
<sup> 23
<sub> H2O
<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-спрайт c gulp-svgstore

Из файлов папки 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 (включен в сборку по умолчанию).

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

PNG-спрайт с spritesmith

Из файлов папки sprite-png/png/ в папку sprite-png/img/ будет сгенерирован файл спрайта sprite-[ЧИСЛОВОЙ_ИНДЕКС].svg, который далее будет скопирован в папку сборки.

Стилевой файл блока генерируется автоматически и содержит примеси для использования спрайтов. Отдельный файл элемента sprite-png__demo.scss содержит вызов примеси, генерирующей стили для всех составных частей спрайта.

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

Главная навигация

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

            <nav id="main-nav" class="main-nav">
              <div id="main-nav-toggler" class="main-nav__toggler"><span></span></div>
              <ul class="main-nav__list">
                <li class="main-nav__item  main-nav__item--active">
                  <a href="" class="main-nav__link">
                    Страницы
                  </a>
                  <div class="main-nav__lvl-2">
                    <ul class="main-nav__list-lvl-2">
                      <li class="main-nav__item-lvl-2">
                        <a href="" class="main-nav__link-lvl-2">
                          Контакты
                        </a>
                      </li>
                      <li class="main-nav__item-lvl-2">
                        <a href="" class="main-nav__link-lvl-2">
                          Услуги
                        </a>
                        <div class="main-nav__lvl-3">
                          <ul class="main-nav__list-lvl-3">
                            <li class="main-nav__item-lvl-3">
                              <a href="" class="main-nav__link-lvl-3">
                                Вёрстка HTML-CSS
                              </a>
                            </li>
                            ...
                          </ul>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
                <li class="main-nav__item">
                  <a href="https://github.com/nicothin/NTH-start-project" class="main-nav__link">
                    Репозиторий
                  </a>
                </li>
                ...
              </ul>
            </nav>

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