Обзор Understrap

Домашняя страница: https://understrap.com/

Код темы: https://github.com/holger1411/understrap

Код дочерней темы: https://github.com/holger1411/understrap-child

Understrap это стартовая тема, которая объединяет Underscores и Bootstrap 4.

Understrap использует npm и менеджер задач gulp для компиляции sass, минификации и сборки ресурсов.

к содержанию ↑

Установка стартовой и дочерней темы

Скачиваем последние архивы со страницы релизов.

https://github.com/holger1411/understrap/releaseshttps://github.com/holger1411/understrap-child/releases

Стоит ли ставить дочернюю тему, вопрос хороший. При обновлении Understrap у меня два раза незначительно ломалась дочерняя. Но я всё же привык свои изменения производить отдельно от стартовой.

Так как тема рассчитана на работу с npm/gulp, нужно заготовить свои инструменты.

Нужно установить в систему Node.js и Browser-Sync (если вы им пользуетесь).

Затем перейти в терминал и запустить команду:

npm install

Она автоматически установит все зависимости, описанные в файле package.json, и должна завершиться без ошибки.

Understrap npm install

Далее нужно запустить команду, которая скопирует в каталог темы все нужные ресурсы (Bootstrap Sass, JS, шрифты)

gulp copy-assets

Подробнее что она делает вы можете посмотреть в файле gulpfile.js.

к содержанию ↑

Структура файлов

  • CSS — здесь будет находиться скомпилированные файлы CSS, которые используется в теме. Вручную не надо редактировать!
  • fonts — папка со шрифтами, уже содержит подключенный FontAwesome.
  • global-templates — содержит несколько глобальных шаблонов: вывод сайдбара Hero в заголовок (статический или карусель); проверка подключенных боковых сайдбаров (левый, правый или оба); и шаблон пагинации.
  • img — для файлов изображений, используемых в теме.
  • inc — основной функционал темы, разбит на модули: функции подключения скриптов, функции настроек, вывод мета информации, функции совместимости с Jetpack и Woocommerce, и другие.
  • js — собранные скрипты, подключенные к теме.
  • languages — языки локализации, их довольно много, включая и русский.
  • loop-templates — шаблоны, используемые в цикле вывода основного контента.
  • page-templates — шаблоны страниц (пустая, на всю ширину, с левым или правым или с двумя сайдбарами).
  • sass — основной каталог для стилизации темы; здесь находится @import всех нужных sass компонентов.
  • src — исходники компонентов, отсюда мы их импортируем в рабочую папку sass.

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

к содержанию ↑

Настройка и стилизация Understrap

Базовая стилизация происходит в следующих местах:

  • /sass/theme/_child_theme.scss — файл для добавления стилей или подключения
    своих файлов.
  • /sass/theme/_child_theme_variables.scss — переписываем переменные Bootstrap и Understrap, которые можно посмотреть в исходных sass файлах.
  • в /sass/assets/ можно удалить строки импорта неиспользуемых компонентов.

Для компиляции запускаем команду:

gulp watch

Для добавления пользовательского JS скрипта, закидываем файл в папку /src/js/ и добавляем его в массив scripts в gulpfile.js для обработки.

gulp.task('scripts', function() {
    var scripts = [

        // Start - All BS4 stuff
        basePaths.dev + 'js/bootstrap4/bootstrap.js',

        // End - All BS4 stuff

        basePaths.dev + 'js/skip-link-focus-fix.js'

        // Custom JS scripts
        basePaths.dev + 'js/custom.js'
    ];
  gulp.src(scripts)
    .pipe(concat('theme.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./js/'));

  gulp.src(scripts)
    .pipe(concat('theme.js'))
    .pipe(gulp.dest('./js/'));
});

Запускаем команду:

gulp scripts

Она объединит скрипты в один файл theme.js, сделает минифицированную версию его, и поместит их в каталог /js.

Для переопределения и добавления специфичных для темы функций используем стандартный файл functions.php. Старайтесь не засорять его.

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

Создавайте свои небольшие плагины, или используйте code-snippets — очень удобно.

к содержанию ↑

Выводы о Understrap

Разве я могу сказать что-нибудь плохое о теме-фреймворке, которую сам использую? 🙂

На самом деле она крутая: включает в себя качество _s (Underscores), современную типографику и компоненты Bootstrap 4, npm/gulp для гибкой разработки.

Несомненно, это одна из лучших стартовых тем.

Оставить комментарий

avatar
  Подписаться  
Уведомление о