/ttk-wordpress-

Primary LanguagePHP

Основная сборка для запуска необходимо установить node.js не ниже 12.16.3

Команды для запуска: npm install - установка модулей npm start - запуск сборки

Пояснения для работы!!!

Готовые файлы собираются в папку build

Структура папок в src:

  • assets - все вспомогательные файлы

    • fonts - файлы шрифтов

    • images - картинки

      • content - в дальнейшем будут загружаться из админки
      • static - картинки, зашитые в коде
      • sprite - картинки, собирающиеся в спрайт
        • svg
        • png

    • js - скрипты

      • components - скипты проекта
        • здесь могут быть файлы с любыми названиями согласно структуре проекта (swipers.js, forms.js, и т.д.)
      • plugins - подключаемые плагины (образец подключения из модулей есть)
        • можно подключать плагины файлами
      • separate - скрипты, которые должны остаться отдельными файлами после компиляции
        • jquery.min.js

    • styles - стили

      • tools - инструменты (анимации, переменные, миксины)
      • vendors - включения (шрифты, normalize, reset)
      • settings - базовые настройки (цвета, глобальные настройки, медиа-переменные)
      • layout - настройки размеров (контейнеры, строки, сетки)
      • elements - мелкие повторяющиеся элементы (кнопки, ссылки)
      • components - повторяющиеся блоки (все компоненты)
      • patterns - не повторяющиеся блоки (напр. настройки страниц) style.scss - тут подключаются все папки в прописанном порядке

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

  • html

    • папки с повторяющимися блоками
    • сами страницы

  • php - папка создается для создания php-файлов в процессе настройки панели администрирования

    • папки с повторяющимися блоками
    • сами страницы

Для натяжки на Wordpress подключаются конфиги для wp, на локальном сервере создается папка с текущей сборкой проекта, в ней размещаем папку wp с развернутым вордпрессом. В config.json прописываем название своей будущей темы, туда будут бобираться файлы темы. В gulpfile.js подключаестя таск "php", svg спрайт собирается в формате php и инклюдится в футер проекта, таск "html" можно отключить

Для финальной сборки можно закомментировать в gulpfile.js строки, создаюшие карты js и css для облегчения финальных минифицированных файлов .pipe(sourcemaps.init()) и sourceMap: true, - "style" .pipe(sourcemaps.init()) и .pipe(sourcemaps.write()) - "js:components"

Примечание по именованиям классов, принятым в true.code

class - сам класс class--modificator - класс с модификатором class__child - дочерний класс class__child--modificator - дочерний класс с модификатором

Запись стилей для классов в сборке:

.class { стили для основного класса

&--modificator {
    стили для модификатора
}

}

.class__child { стили для дочернего класса

&--modificator {
    стили для модификатора дочернего класса
}

}

Медиавыражения в каждом файле ниже для всех классов

@media screen and (max-width: map-get($tablet, lg) - 1) {

.class {
    стили для основного класса

    &--modificator {
        стили для модификатора
    }
}

.class__child {
    стили для дочернего класса

    &--modificator {
        стили для модификатора дочернего класса
    }
}

}