Разработка шаблона для Битрикс

9 апреля 2022

653

Вёрстка - прицеливание в нужные media, совместимое с bootstap 4

Имеем задачу: нужно указать какие-либо стили CSS только для конкретного брейкпоинта (например, для SM, т. е. от 576px включительно до 768px не включительно). На другие брейкпоинты эти стили влиять не должны совсем.

Чтобы сделать это, нужно прицелиться в этот брейкпоинт с помощью @media.

Например, для брейкпоинта SM (от 576px включительно до 768px не включительно) правила будут выглядеть так:

@media (min-width: 576px) and (max-width: 767.98px) { 
   ... 
}

Вот некоторые положения:

Общие стили - без media
XS точно: @media (max-width: 575.98px) { ... }
XS и больше: тождественно Общим стилям - без media
SM и меньше: @media (max-width: 767.98px) { ... }
SM точно: @media (min-width: 576px) and (max-width: 767.98px) { ... }
SM и больше: @media (min-width: 576px) { ... }
MD и меньше: @media (max-width: 991.98px) { ... }
MD точно: @media (min-width: 768px) and (max-width: 991.98px) { ... }
MD и больше: @media (min-width: 768px) { ... }
LG и меньше: @media (max-width: 1199.98px) { ... }
LG точно: @media (min-width: 992px) and (max-width: 1199.98px) { ... }
LG и больше: @media (min-width: 992px) { ... }
XL и меньше: тождественно Общим стилям - без media
XL точно: @media (min-width: 1200px) { ... }

Вот код шпаргалки с демкой:

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS media targeting bootstrap 4 compatible</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <style type="text/css">
        /*
        Common styles
         */
        .media-target-demo {
            border-collapse: collapse;
        }

        .media-target-demo td {
            border: 1px solid #EEE;
            padding: 5px 10px;
            color: #AAA;
            white-space: nowrap;
            font-weight: bold;

            transition: color 0.3s ease-in;
        }

        @keyframes pulsing {
            0% {
                transform: scale(1.0, 1.0)
            }
            50% {
                transform: scale(2.0, 2.0);
            }
            100% {
                transform: scale(1.5, 1.5);
            }
        }

        /*
         * XS Only
         */

        @media (max-width: 575.98px) {
            .media-target-demo .exactly-xs {
                color: darkgreen;
                animation: pulsing 1s forwards;

            }
        }

        /*
         * XS and greater - same as Common styles
         */

        .media-target-demo .greater-or-equal-xs {
            color: darkgreen;
            animation: pulsing 1s forwards;
        }

        /*
         * SM and smaller
         */

        @media (max-width: 767.98px) {
            .media-target-demo .less-or-equal-sm {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

        /*
         * SM only
         */

        @media (min-width: 576px) and (max-width: 767.98px) {
            .media-target-demo .exactly-sm {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

        /*
         * SM and greater
         */

        @media (min-width: 576px) {
            .media-target-demo .greater-or-equal-sm {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

        /*
         * MD and smaller
         */

        @media (max-width: 991.98px) {
            .media-target-demo .less-or-equal-md {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

        /*
         * MD only
         */

        @media (min-width: 768px) and (max-width: 991.98px) {
            .media-target-demo .exactly-md {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

        /*
         * MD and greater
         */

        @media (min-width: 768px) {
            .media-target-demo .greater-or-equal-md {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

        /*
         * LG and smaller
         */

        @media (max-width: 1199.98px) {
            .media-target-demo .less-or-equal-lg {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

        /*
         * LG only
         */

        @media (min-width: 992px) and (max-width: 1199.98px) {
            .media-target-demo .exactly-lg {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

        /*
         * LG and greater
         */

        @media (min-width: 992px) {
            .media-target-demo .greater-or-equal-lg {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

        /*
         * XL and smaller - same as Common styles
         */

        .media-target-demo .less-or-equal-xl {
            color: darkgreen;
            animation: pulsing 1s forwards;
        }

        /*
         * XL only
         */

        @media (min-width: 1200px) {
            .media-target-demo .exactly-xl {
                color: darkgreen;
                animation: pulsing 1s forwards;
            }
        }

    </style>
</head>
<body>

<div class="container-fluid">
    <h1 style="white-space: nowrap; width: 100%; overflow: hidden">CSS media targeting bootstrap 4 compatible</h1>

    <p>
        Current:

        <span class="d-inline d-sm-none p-2 bg-primary text-white">XS</span>
        <span class="d-none d-sm-inline d-md-none p-2 bg-primary text-white">SM</span>
        <span class="d-none d-md-inline d-lg-none p-2 bg-primary text-white">MD</span>
        <span class="d-none d-lg-inline d-xl-none p-2 bg-primary text-white">LG</span>
        <span class="d-none d-xl-inline p-2 bg-primary text-white">XL</span>
    </p>

    <table class="media-target-demo">
        <tr>
            <td>&mdash;</td>
            <td class="less-or-equal-sm">≤ sm</td>
            <td class="less-or-equal-md">≤ md</td>
            <td class="less-or-equal-lg">≤ lg</td>
            <td class="less-or-equal-xl">≤ xl</td>
        </tr>

        <tr>
            <td class="exactly-xs">= xs</td>
            <td class="exactly-sm">= sm</td>
            <td class="exactly-md">= md</td>
            <td class="exactly-lg">= lg</td>
            <td class="exactly-xl">= xl</td>
        </tr>

        <tr>
            <td class="greater-or-equal-xs">≥ xs</td>
            <td class="greater-or-equal-sm">≥ sm</td>
            <td class="greater-or-equal-md">≥ md</td>
            <td class="greater-or-equal-lg">≥ lg</td>
            <td>&mdash;</td>
        </tr>
    </table>

    <h2 class="mt-3">Шпаргалка</h2>

    <ul>
        <li>Общие стили - без media</li>

        <li class="mt-3">XS точно: <code>@media (max-width: 575.98px) { ... }</code></li>
        <li>XS и больше: тождественно Общим стилям - без media</li>

        <li class="mt-3">SM и меньше: <code>@media (max-width: 767.98px) { ... }</code></li>
        <li>SM точно: <code>@media (min-width: 576px) and (max-width: 767.98px) { ... }</code></li>
        <li>SM и больше: <code>@media (min-width: 576px) { ... }</code></li>

        <li class="mt-3">MD и меньше: <code>@media (max-width: 991.98px) { ... }</code></li>
        <li>MD точно: <code>@media (min-width: 768px) and (max-width: 991.98px) { ... }</code></li>
        <li>MD и больше: <code>@media (min-width: 768px) { ... }</code></li>

        <li class="mt-3">LG и меньше: <code>@media (max-width: 1199.98px) { ... }</code></li>
        <li>LG точно: <code>@media (min-width: 992px) and (max-width: 1199.98px) { ... }</code></li>
        <li>LG и больше: <code>@media (min-width: 992px) { ... }</code></li>

        <li class="mt-3">XL и меньше: тождественно Общим стилям - без media</li>
        <li>XL точно: <code>@media (min-width: 1200px) { ... }</code></li>
    </ul>

</div>

</body>
</html>

Разработка на PHP - общее

Режим ошибок

Разработка шаблона на PHP ведется в режиме повышенного контроля ошибок. Это реализуется с помощью дополнительного хендлера ошибок, который любой Notice превращает в Exception и прекращает выполнение кода.

Например, в ситуации echo $arParams['MESSAGE'], если в $arParams нет ключа MESSAGE, произойдет Exception.

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

echo @$arParams['MESSAGE'];

Правильный способ - отрефакторить, чтобы не было неопределенности.

Рефакторинг стоковых шаблонов

1. Рефакторинг производим в режиме правки (когда шестеренки показываются). Так задействуется больше функционала и можно отловить больше ошибок.
2. До завершения пункта "Общий порядок рефакторинга" не вносим никаких изменений в функционал/логику и верстку.
3. Общий порядок рефакторинга:

Делаем копию стокового шаблона.
Собачками добиваемся, чтобы не было ошибок.
Выносим независимые части в инклуды через View. На этом этапе нельзя использовать commonVariables.
Рефакторим arParams/arResult на классы, по необходимости добавляем класс XxxTemplate (от itweb\bitrix\templateItem\GenericTemplate).
Рефакторим используемые переменные на наши классы arParams/arResult/XxxTemplate.
Добиваемся того, чтобы во View передавался только XxxTemplate.
Добиваемся, чтобы не было собачек.

4.Теперь можно менять функционал/логику и верстку.

Термины

Главная страница - index (не main).
Корзина - basket (не cart).
head - блок <head>.
header - шапка страницы.
footer - подвал страницы (не foot).
layout - общая структура страницы (сложно объяснить, теоретически что-то из такого: .headblock, .contentblock, .contentwrapper, .modaloverlay, .footerblock, но при этом не сами header и footer, а именно сеточные контейнеры для их размещения).

scss

common - переменные, миксины.
global - глобальные стили (умолчания для body, например), не относящиеся к компонентам.

Верстка

Ключевые моменты

DISCLAIMER. Описанный здесь подход преследует единственную цель:

Быстро и просто создать верстку по макету.

Но так, чтобы её потом было легко дорабатывать.

Т. е. первый этап. При дальнейшей разработке могут использоваться другие подходы, вплоть до полностью противоположных.

Верстаем так, чтобы это в первую очередь было удобно для разработки. Удобство для разработки - это не написание как можно меньшего количества символов, а наглядность кода, понятная структура, легко понятная и запоминаемая логика, минимально необходимое количество договоренностей о том, как мы верстаем, возможность независимо вносить изменения одних аспектов верстки, не затрагивая другие. Удобство разработки - это не удобство написания кода, а удобство чтения, понимания, изменения кода НЕ его автором, а также удобство рефакторинга (разделение кода на раздельные компоненты, или наоборот объединение), удобство повторного использования кода.
Если мы применяем какую-то технику, правило, договоренность (возможно, отступая от удобства), то предварительно должны четко понять, зачем мы это делаем. Если мы не можем понять, зачем, то не делаем так, а поступаем в соответствии с п. 1.
Оптимизация, скорость, стабильность, валидность, кроссбраузерность, здравый смысл, красота, "так делают во всем цивилизованном мире", "я прочитал классную статью" - важны, но менее важны, чем пп. 1 и 2.
"Изящные решения задачи", противоречащие п. 1, запрещены.

Удобный для разработки способ верстки - базовый

Так как надо от чего-то отталкиваться, примем за базовый "удобный" для разработки способ верстки по умолчанию следующий:

news-item.php:

<div class="news-item mt-2 pb-3 JS-news-item">
  <div class="title text-center">Hi, <b>username</b>!</div>
</div>

news-item.scss:

.news-item {
  // ...

  .title {
    // ...
  } 
}

То есть, как верстаем по умолчанию:

Берем делаем элемент.
По необходимости добавляем сколько нужно классов bootstrap и/или прочих используемых фреймворков.
Если его нужно дополнительно стилизовать, придумываем для этого элемента ровно один класс, который дописываем в class=""и фигачим остальные свойства в scss. (очень важно: такой класс для одного элемента должен быть ровно один!) (один и тот же класс, разумеется, может при этом применяться к разным элементам).
Атрибуты style="..." и id="..." запрещены.
<b>, <small> и т. п. можно.
Нельзя привязывать свойства css к тегам без указания класса:

нельзя: ul { margin: 0 }
можно: ul.-no-margin { margin: 0 }

Структура (вложенность) классов в scss должна дублировать структуру (вложенность) элементов в html (в пределах границ одного независимого компонента) (используем для этого nesting в scss) (см. пример кода выше).
scss кладем рядом с файлом php (в ту же папку) и называем так же. Файлы js тоже. (header.php, header,scss, header.js). Картинки кладем в папку images/, которая тоже расположена в той же папке, что и файл php.
Дополнительно можно использовать только один класс для привязки JS, название которого должно начинаться с .JS (большими буквам), а все слова должны быть объединены дефисами (.JS-mobile-basket).
К классам .JS-* нельзя привязывать никакие свойства css.

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

Выработанные договоренности по структуре и подходу

Исходники верстки и сборка

Для описания стилей используем формат scss с н естингом, импортом, переменными и комментариями.
Для сборки - gulp.

Используемые фреймворки и библиотеки

По умолчанию для верстки используются следующие библиотеки:

Bootstrap 4 последней версии (обязательно).
Jquery 3 последней версии (обязательно).
FontAwesome 5 (есть лицензия PRO).
Slick для каруселей.

Свои фреймворки

В том числе микро-фреймворки, разрабатываемые конкретно под проект (например, свое оформление списков, кнопок, форм и пр.).

Такие фреймворки должны быть полностью изолированы и независимы от прочей верстки по проекту.

Иконочный фреймворк. Для формирования библиотеки иконок в рамках проекта. Требования:
- Общий класс для всех иконок: .ic.
- Классы самих иконок должны называться .i-НАЗВАНИЕ-ИКОНКИ, например .i-burger, i-arrow-left (слова пишутся через дефис).
- Применение иконки: <span class="ic i-..."></span>.
Прочие свои "микро-фреймворки" - по предварительному согласованию.

Расположение файлов

Библиотеки, фреймворки - в корне шаблона или через CDN.
Наши мини-фреймворки - в корне шаблона.

Файлы шаблонов и их стилей с JS и с картинками - файл шаблона какого-либо блока и все относящиеся к нему файлы должны лежать в одной папке, либо с одинаковым названием:

menu.php
menu.scss -> menu.css
menu.es6 -> menu.js (или просто menu.js)
images/ - папка с картинками

либо с названиями, соответствующими требованиям CMS:

template.php
style.scss -> style.css
script.es6 -> script.js (или просто script.js)
images/ - папка с картинками

Если необходимо разбить один файл на несколько с помощью инклудов, то для инклудов нужно создать папку, совпадающую по названию с файлом, который будет подключать инклуды, но без расширения (menu.php -> menu/). Относящиеся к ним исходники scss желательно разместить там же, но не компилировать их отдельно, а также проинклудить из основного scss шаблона данного блока. JS аналогично, но JS можно подключать из того места, где он лежит.

template.php (инклудит template/items.php и template/filter.php)
style.scss (импортит template/items.scss и template/filter.scss)
script.js - (подключается напрямую, template/filter.js не инклудит)
template/
- items.scss (инклудится из ../style.scss, в итоге оказывается в ../style.css)
- items.php (инклудится из ../template.php)
- filter.scss (инклудится из ../style.scss, в итоге оказывается в ../style.css)
- filter.js - подключается напрямую
- filter.php (инклудится из ../template.php)

Выносить абсолютно все scss в инклуды, лежащие рядом с инклудами php, нет необходимости (это не очень удобно и требует большего количества описания структуры). Но если scss для инклуда php не выносится в отдельный блок, то его нужно каким-либо образом явно выделить в общем блоке стилей scss (комментарием или единым блоком {...}, или и тем, и другим). Иными словами, разместить его среди прочих стилей таким способом, чтобы всегда можно было, вырезав один блок кода scss и прописав @import вынести все стили для этого инклуда в отдельный файл, если он станет слишком сложным (а не собирать все его стили по кусочкам в разных местах). То есть, стили для инклудов должны быть в любом случае каким-либо способом обособлены.

Если описанная схема невозможна, то необходимо разместить файлы каким-либо другим способом, максимально облегчающим поиск scss и js по шаблону php в той же папке, где лежит шаблон php. Если и это невозможно, то в начале файла php нужно в комментарии указать, где лежат относящиеся к нему файлы (и почему там).

Блочность, независимость и минимализм

Чтобы верстку было проще модифицировать (в одних местах, не ломая в других), необходимо создавать простые небольшие несложные компоненты, подключающие друг друга.

Например, если это шапка, и она состоит из двух строк, разделите эти строки на отдельные части в виде файлов php, каждый со своими файлами css/js, так, чтобы эти части были полностью независимы друг от друга (полностью удаляем одну часть и всё что к ней относится - второй продолжает работать без изменений).

В этой же шапке выделите меню, корзину, выбор города, форму поиска и пр. в отдельные независимые небольшие шаблоны, каждый со своими scss и js.

Например:

header.scss - подключает header/*.scss, не содержит стилей
header.php - подключает инклуды header/*.php
header/
- first-line.php - первая строка меню, содержит общую сетку первой строки, инклудит first-line/*.php
- first-line.scss - содержит общую сетку, описание примитивных элементов из first-line.php, инклуды first-line/*.scss
- first-line/
  - menu.php
  - menu.scss
  - menu.js
  - city-select.php
  - city-select.scss
  - city-select.js
- second-line.php
- second-line.scss
- second-line/
  - basket.php
  - basket.scss
  - search.php
  - search.scss

Аналогично, например, карточка товара в галерее товаров: её можно разбить на 1) базовую сетку с примитивными элементами (например, название), которая инклудит следующие пункты, 2) картинка товара с каруселькой, 3) основные свойства товара 4) цены (старая, новая) и наличие 5) выбор количества и кнопка купить 6) кнопка "подписаться" 7) быстрый просмотр и т. п.

Компоненты и именование их классов (feat RSCSS)

Чтобы избежать путаницы, классы css нужно создавать не для всего подряд, а руководствуясь определёнными принципами и правилами наименования.

Мы создаём на сайте компоненты: карточка новости в списке, сам список новостей, карточка товара в галерее, детальная карточка товара, меню здесь, меню там, корзина и т. п. Из компонентов, в общем, и состоит сайт.

Для увеличения строгости (и возможности автоматической валидации кода) компонентом считается только то, что имеет свой div-контейнер, у которого прописан класс, обозначающий этот компонент (т. е. <a href="...">...</a>, или <ul>...</ul>, или <li>...</li> или <table>...</table> по умолчанию не могут являться компонентами в рамках того, что описано в этом разделе).

Используется упрощенный модифицированный подход RSCSS.

Есть компоненты (например, карточка новости в списке новостей).
Есть элементы этих компонентов (название, дата, текст...).
Есть модификаторы компонентов/элементов (большой, маленький, свернут, развернут, спрятан, зафиксирован...).

Также есть префиксы проекта (см. подраздел ниже).

Компоненты именуются одним или более словами, в начале добавляется префикс проекта, все объединяется дефисами. Например, префикс проекта "msf", имя компонента "news-card" - класс будет .msf-news-card.

Элементы именуются одним словом (.title, .date, .text), либо, если нужно несколько слов, они пишутся без дефиса ('.moreinfo', '.firstname').

Модификаторы начинаются с дефиса, несколько слов объединяются дефисами (.-large, .-extra-large, .-closed).

Описание компонентов в scss

При описании стилей для компонентов в scss обязательно необходимо использовать nesting:

.news-card {
  .title { 
    ... 
  }
}

По возможности нужно использовать указание прямых потомков >:

.news-card {
  > .title {
    ...
  }
}

Это возможно/удобно не всегда, но уменьшит количество потенциальных конфликтов между вложенными компонентами. Общий принцип: указание прямых потомков по умолчанию не используем, так как большинство компонентов не содержат вложенные компоненты. Но если компонент предполагает, что в нем будут располагаться другие компоненты (шапка, футер, детальная карточка товара), и если класс элемента является довольно употребимым словом (.name, .email, .form) - иными словами, когда чувствуем, что может быть конфликт - используем указание прямых потомков >.

Особенности с модификаторами желательно указывать отдельным блоком вида .component-name.-modifier { ... }.

Пример:

.news-card { 
  > .title {
    // ...
  } 
  > .body {
    > .date {
    // ...
    } 
    > .text {
    }
  }
}

.news-card.-closed {
  > .body {
    display: none;
  } 
}

Префиксы проектов

Так как мы можем разрабатывать новый дизайн на основе существующей верстки, а также можем переносить компоненты между проектами, то для большей наглядности и меньшего количества конфликтов...

...решено использовать префиксы проектов для именования классов компонентов.

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

Он должен состоять из 3-4 символов и вызывать ассоциацию с проектом.

Например:

microsoft - msf
itweb - itw
adidas - ads

Префикс нужно добавлять к основному классу каждого компонента, например:

.news-detail -> .msf-news-detail
.product-card -> .itw-product-card
.layout-footer -> .ads-layout-footer

Выработанные договоренности - разное

Задание базовых свойств шрифта - начертание и размер

У любого сайта есть базовый шрифт. Он определен в дизайн-макете. Это тот шрифт, который используется в наибольшем количестве уникальных элементов. Например, "Roboto", sans-serif.

Также у сайта есть базовый размер шрифта. Это тот размер шрифта, который используется в наибольшем количестве уникальных элементов. Например, 14px.

Это мы прописываем в body, чтобы поменьше прописывать то же самое у элементов, например:

body {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
}

Задание и использование rem

Мы не задаём и не используем rem. То есть, мы не прописываем font-size: ...px для тега html.

Потому что от rem зависят различные размеры bootstrap. И если изменить его базовый размер, то элементы, сделанные на bootstrap, изменятся в размере. А мы в обязательном порядке используем bootstrap. И нам бы хотелось, чтобы там все было как обычно.

Мы не используем rem, так как обычно в дизайне размер шрифта прописан в пикселях без какого-либо ритма и пропорций. Поэтому нет смысла высчитывать размер в rem, переводя его в rem из пикселей, указанных в дизайне (14px => 0.875rem?). Проще и понятнее сразу указать его в px.

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

Если вдруг мы будем верстать по дизайну, сделанному с учётом rem и вертикального ритма, то возможно, там мы будем использовать rem и задавать базовый размер шрифта для html.

А пока нет.

В автоматическую валидацию scss

А пока её нет - просто стараемся соблюдать.

@import - можно импортить только файлы на этом уровне или ниже. Импорт ../* запрещен.

Предварительная подготовка перед версткой

Определить префикс проекта для классов компонентов css.

Сниппеты

Минимальный код вставки включаемой области `main.include`

<?php $APPLICATION->IncludeComponent("bitrix:main.include", ".default",
    [
        "PATH" => SITE_DIR . "include/path/to/file.php",
        "AREA_FILE_SHOW" => "file",
    ]
); ?>

Дизайн

Ключевые моменты

Дизайн делаем в figma.
Дизайн делаем удобным (технически и логически) для верстки.

Различные требования

Использование любых размеров в дробных пикселях (например, 0.5px) запрещено.

Брейкпоинты, ширина контейнера, какие разрешения рисовать

Ответ дан тут: В каких разрешениях нужно делать дизайн адаптивного сайта для последующей верстки?

На практике рисуются не все разрешения, а минимальное, максимальное и одно из средних по согласованию.

Сетка

В шаблон должна быть встроена сетка, соответствующая сетке bootstrap 4:

Общая 12-колоночная сетка на контейнер.
В каждом блоке, где идет разбиение на колонки - отражающая колонки bootstrap сетка.

Цвета

Цвета должны быть названы так, как будут потом называться переменные в верстке, например "$brand" (со знаком доллара в начале). Это нужно, чтобы упростить перевод макета в scss.
Все цвета должны быть проименованы именно таким образом, использование цветов без названия или с названием другого формата не допускается. Это нужно, чтобы можно было легко увидеть, сколько всего различных цветов используется в макете и контролировать количество уникальных цветов.

Стили текста

Стили текста должны быть названы так, чтобы отражать применение и начертание, формат такой: "Применение размер шрифт жирность". Набор допустимых "применений" пока определен как: H1, H2, ..., H6, p, Large, Small. Например: "H1 40px Montserrat Bold". Это пока эксперимент, по идее подход должен упрощать понимание макета.
Все стили должны быть проименованы именно таким образом. Использование стилей текста без названия или с названием другого формата не допускается. Это нужно, чтобы можно было легко увидеть, сколько всего различных стилей используется в макете и контролировать количество уникальных стилей.
Все стили текста должны быть отражены на отдельной странице "Типографика", каждый стиль выводится строкой текста, содержащую название этого стиля:

Размещение элементов

Размещение элементов необходимо делать таким образом, чтобы облегчить верстку с этого макета:

при верстке легко понять размеры блоков, расстояния между ними, отступы внутри,
не нужно выравнивать элементы в блоках вручную (подгонять попиксельно),
при подкладывании дизайна под верстку в виде картинки (pixel perfect) технически несложно получить результат 1-в-1.

Поэтому (список пополняется):

Для структурирования повторяющихся элементов в дизайне необходимо использовать функцию auto-layout. Она позволит размещать и дополнять элементы без наслаиваний, выставлять общие промежутки между ними, а так же пэддинги.
Для элементов меню использование auto-layout обязательно.

Переменные и константы, доступные в шаблоне

Переменные и константы:

/**
 * @global CMain $APPLICATION
 * @var CBitrixComponentTemplate $this
 * @var CBitrixComponent $component
 * @var string $templateName имя шаблона (например: main)
 * @var string $componentPath относительный путь к компоненту (например: /bitrix/components/bitrix/sale.basket.basket.line)
 * @var string $templateFolder относительный путь к папке шаблона (например: /local/templates/eshop/components/bitrix/sale.basket.basket.line/main/template.php)
 *
 * Константы:
 *
 * SITE_TEMPLATE_PATH - путь к шаблону вида /bitrix/templates/my-template
 * 
 * Действия:
 * 
 * \Bitrix\Main\Page\Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/путь/к/файлу.js');
 * \Bitrix\Main\Page\Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/путь/к/файлу.css');
 *
 */

Переменные и константы, доступные в файле страницы

/**
 * @global CMain $APPLICATION
 *
 * Константы:
 *
 * SITE_TEMPLATE_PATH - путь к шаблону вида /bitrix/templates/my-template
 * 
 * Действия:
 * 
 * \Bitrix\Main\Page\Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/путь/к/файлу.js');
 * \Bitrix\Main\Page\Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/путь/к/файлу.css');
 *
 */

Тестирование header/footer без компонентов

В файле bitrix/modules/main/classes/general/component_template.php в __IncludePHPTemplate() заменить:

    include($_SERVER["DOCUMENT_ROOT"].$this->__file);

на

    ob_start();
    include($_SERVER["DOCUMENT_ROOT"].$this->__file);
    ob_end_clean();
    $name = "{$this->__component->__name} > {$this->__name}";
    echo "<div title='<span class="hljs-subst" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; color: var(--highlight-color);">{$this->__file}</span>' style='overflow: hidden; width: 100%; max-height: 100%; outline: 1px dashed blue;'>{$name}</div>";

В результате вместо любого компонента выводится просто блок с рамочкой и названием компонента.

Удобно для тестирования корректности задания сетки в футере.

Техническая поддержка сайта

К списку раздела статей

Редактирование и настройка шаблона письма Битрикс о новом заказе

Миграция Битрикс на ИМ + CRM (Битрикс24)

Позвоните нам!

Разработка шаблона для Битрикс

Вёрстка - прицеливание в нужные media, совместимое с bootstap 4

Разработка на PHP - общее

Режим ошибок

Рефакторинг стоковых шаблонов

Термины

scss

Верстка

Ключевые моменты

Удобный для разработки способ верстки - базовый

Выработанные договоренности по структуре и подходу

Исходники верстки и сборка

Используемые фреймворки и библиотеки

Свои фреймворки

Расположение файлов

Блочность, независимость и минимализм

Компоненты и именование их классов (feat RSCSS)

Описание компонентов в scss

Префиксы проектов

Выработанные договоренности - разное

Задание базовых свойств шрифта - начертание и размер

Задание и использование rem

В автоматическую валидацию scss

Предварительная подготовка перед версткой

Сниппеты

Минимальный код вставки включаемой области main.include

Дизайн

Ключевые моменты

Различные требования

Брейкпоинты, ширина контейнера, какие разрешения рисовать

Сетка

Цвета

Стили текста

Размещение элементов

Переменные и константы, доступные в шаблоне

Переменные и константы, доступные в файле страницы

Тестирование header/footer без компонентов

Минимальный код вставки включаемой области `main.include`