Общие требования к CSS

  • Должны использоваться препроцессоры SASS, LESS или STYLUS.
  • Верстка по БЭМ. В данном случае не так важен сам факт использования методологии, сколько правильное разделение всей структуры на блоки.
  • Важно! Каждый блок должен быть описан в своем собственном файле, требуется следующая структура:
project
└───css
    │   style.scss
    │   _layout.scss
    │   _base.scss
    │   _fonts.scss
    │
    ├───blocks
    │   │   _news.scss
    │   │   _gallery.scss
    │   │   _product.scss
    │   │   _another_one_block.scss
  • Требуется избегать добавления спец. классов (отвечающих за конкретную страницу) в структуру, отвечающую за общий макет приложения. Например:
<!-- НЕПРАВИЛЬНАЯ СТРУКТУРА -->
<body class="gallery-page">
 ....
   <div class="content">

  </div>
</body>


<!-- ПРАВИЛЬНАЯ СТРУКТУРА -->
<body>
    <div class="content">
        <div class="gallery">

        </div>
    </div>
</body>

Формы

Все формы должны быть представлены с помощью стандартных классов, поставляющихся с bootstrap. Если требуется сделать не совсем стандартную форму, требуется добавлять свои собственные классы к корневому элементу form, не меняя внутренней разметки.

Пример:

<form class="no-standart-form">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Кнопки

У bootstrap есть свой набор классов, описывающий кнопки.

Для добавления своих модификаций важно, что бы цвет и размеры описывались разными классами. Например:

.btn.btn-blue {
    background: blue;
    color: white;
}


.btn.btn-extra-large {
    font-size: 40px;
    padding: 40px 50px;
}

Адаптивная верстка

Адаптивная верстка должна осуществляться ТОЛЬКО с помощью стандартной сетки bootstrap.

Очень важно! Адаптивность для блоков должна начинаться с мобильной версии. Медиа селекторы следует помещать в тот же файл, где описывается основной стиль для блока Т.е. специального файла (например mobile.css) создавать не следует.

Например:

/* мобильный вариант */
.news-item {
    width: 100%;
}


@media (min-width: 768px) {
    .news-item {
        width: 80%;
    }
}

@media (min-width: 992px) {
    .news-item {
        width: 20%;
    }
}

Yii2 + Bootstrap

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

Список компонентов следующий:

  • Form
  • Button
  • Modal (модальное окно)
  • Tab
  • Navigation Bar (основное меню или дополнительные меню)
  • Alert
  • Carousel (слайдер)
  • Progress

Орг. требования

Разработка должно осуществляться открыто, путем работы в системе контроля версий, например на Gitlab или на корпоративном сервере. В каждом коммите должно быть описано, что конкретно сделано. Коммиты должны происходит регулярно, что бы всегда было понимание того, что происохдит в настоящий момент. Замечания вносятся и обсуждаются только через issues.

Требования к разработке

В обязательном порядке использование webpack (v4). С помощью webpack должны собираться html, css и js. Так же обязательным требованием является возможность сборки проекта в двух окружениях dev и prod. Кроме этого, должна быть возможность включения разработческого режима (webpack-dev-server).

Код Javascript должен быть реализован в стиле ES6. Кроме этого каждый логический блок с логикой на JavaScript должен быть выделен в отдельный файл модуля. Каждый такой файл должен сопровождаться краткой документацией - что конкретно этот файл делает.

Разметка и CSS должны в обзяталельном порядке использовать БЭМ методологию. Для генерации HTML использовать PUG, для генерации CSS - SASS. Doctype - HTML5 SASS файлы так же должны быть организованы в виде набора файлов, каждый из которых отвечает за конкретный визуальный блок.

Наименование и форматирование

CSS наименования классов должны описывать семантику логических блоков. Так же в наименованиях запрещается использовать транслит (напр. toval, novosti). Единообразное написание и форматирование кода в HTML, CSS и JavaScript.

Адаптивная верстка

Адаптивная верстка должна быть реализована по принципу mobile first.

Использование bootstrap v4

Bootstrap 4 предполагается использовать как фундамент для верстки. Весь фреймверк (набор компонентов, как js так и css) должен быть подключен первым в проекте. И уже поверх него производится дальнейшая разработка

Тестирование работы сайта при разных значениях длинны текста

Верстка должны быть протестирована с разными значениями по длинне заголовков, вводных текстов и т.д.

Валидация верстки

Расположение блоков должно быть 1:1 по сравнению с макетом. Допускается расхождение до 5px для текста.

Все документы должны проходить валидность на http://validator.w3.org

Весь код на JS и CSS должен быть валидным. Валидность проверяется инструментами CSSLint и JSLint