Frontend starter template

Технологии

- BEM
- Webpack
- Pug
- Scss
- JavaScript
- Lints

Команды

npm i                  # Установка всех необходимых зависимостей
npm start              # Запуск проекта для разработки с сервером
npm run build          # Сборка проекта для prod
npm run dev            # Сборка проекта для разработки

BEM

1. БЭМ-именование: __ — разделитель элемента, -- — разделитель модификатора.
2. Для каждого блока создается отдельный файл стилей.
3. Очередность селекторов:
   • Стилевые правила сущности.
   • Медиа условия.
   • Псевдоселекторы и псевдоэлементы.
   • Сторонние вложенные селекторы.
   • Элементы блока.
   • Модификаторы блока.

Разметка

Все файлы располагаются в src/layout/. Для каждого компонента или блока создается отдельный файл.

• src/layout/content/ - контент страниц.
• src/layout/pages/ - основные файлы для начальной разметки страниц.
• src/layout/sections/ - блоки контента секций.
• src/layout/modules/ - пере используемые модули для всех страниц header, footer.
• src/layout/templates - шаблоны страниц.

Стили

Все стили располагаются в src/styles/. Для каждого компонента или блока создается отдельный файл.

• src/styles/helpers/ - переменные и миксины.
• src/styles/base/ - базовые стили и шрифты.
• src/styles/sections/ - стили секций.
• src/styles/components/ - отдельные встраиваемые компоненты, виджеты и т.п.
• src/styles/modules/ - блоки, такие как header, footer.
• src/styles/libs/ - стили установленных библиотек.
• src/styles/styles.scss - главный стилевой файл, в который импортируются все компоненты.

Скрипты

src/js/ - файлы со скриптами.

Git

.gitignore - указаны папки и файлы, которые будут игнорироваться.

EditorConfig

Для корректной работы нужно установить плагин для вашего редактора или IDE. Список редакторов и IDE для которых нужно установить плагин EditorConfig Список редакторов и IDE для которых плагин не нужен EditorConfig

Линтинг

Для проверки кода на ошибки и соответствие код-гайдам.

.stylelintrc - конфиг для проверки stylelint.

Webpack

• Файл webpack.config.js:
  • Конфигурационный файл webpack