/rexit-webpack-starter-kit

Primary LanguageJavaScript

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