Foundation: начало работы и шаблоны | В паутине

Foundation: начало работы и шаблоны

Фреймворк имеет два стартовых шаблона, которые маожно установить вручную или с помощью интерфейса командной строки. Как установить Foundation, можно узнать здесь.
Каждый шаблон — это отличное начало для работы над проектом. В них уже подключены все нужные файлы и сделаны все настройки, которые, впрочем, всегда можно изменить.
Шаблоны Foundation используют систему сборки Gulp для компиляции Sass и JavaScript, обработки картинок, переноса файлов в нужные папки и т.д.

Базовый шаблон

Документация уверяет, что базовый шаблон похож на шаблон Sass из предыдущей версии фреймворка.
Структура папок здесь плоская, а для сборки требуется только компиляция Sass в CSS. Это очень удобно для простых небольших проектов.

Установка базового шаблона через Foundation CLI:

.
Его также можно скачать из github-репозитория.
После загрузки используйте команду npm install для загрузки зависимостей и npm start для запуска сборки.

Загрузить архив с базовым шаблоном можно по этой ссылке.[context]

Шаблон ZURB

Это официальный стартовый проект ZURB FOUNDATION. Помимо сборки Sass в него включены компиляция JavaScript, Handlebars и сжатие изображений.
Установить продвинутый шаблон с помощью Foundation CLI:

Шаблон ZURB также можно скачать с GitHub.
После скачивания уставите зависимости командой npm install и запустите сборку командой npm start.
Загрузить архив с продвинутым шаблоном можно по этой ссылке.


В чем разница?

Основное отличие двух шаблонов — в структуре файлов. В шаблоне ZURB есть папка src/, где находятся исходники файлов, и отдельная папка dist/ с уже обработанными, скомпилированными и собранными, файлами. Во время работы Gulp автоматически обновляет содержимое папки dist/ при каждом сохранении. Для запуска продакшн-сборки есть команда npm run build.

Можно переопределить стили шаблона по умолчанию или добавить свои. Для этого нужно отредактировать файлы из папки src/assets/scss/:

  • Файл _settings.scss содержит все Sass-переменные.
  • Пользовательские стили можно добавлять новыми файлами в папку components и подключать их в низ файла app.scss с помощью директивы импорта.
Файлы _settings.csss и app.scss не изменяются при обновлении фреймворка. Если вы захотите использовать нововведения из более поздних релизов Foundation, придется добавлять их вручную.

Сборка

Итак, как происходит сборка в шаблоне ZURB?

  • Копирование ресурсов assets. Gulp без изменений перенесет все содержимое папки src/assets/ в папку assets собранного проекта. Обратите внимание, файлы Sass, файлы JS, нуждающиеся в компиляции, и изображения должны обрабатываться по-другому, поэтому не размещайте их в этой папке.
  • Компиляция страницы. Директория src/ включает три папки, в которых можно размещать HTML-код ваших страниц: pages/, layouts/ и partials/.
    Фреймворк использует компилятор Panini и язык шаблонов Handlebars. В папке layouts/ размещается общий костяк страницы, в который можно вставлять основной код из папки pages/. Отдельные части кода,
    предполагающие повторное использование можно выделять в папку partials/.
    Узнать больше о Panini можно в официальной документации фреймворка.
  • Компиляция Sass. Для компиляции Sass в CSS используется Libsass и node-sass. Главный Sass файл проекта — src/assets/scss/app.scss. В нем импортируются стили самого фреймворка и библиотеки Motion UI, а также все отдельные файлы стилей, созданные пользователем (импортировать каждый новый файл необходимо вручную).
    На выходе мы имеем CSS, оформленный во вложенном стиле (nested). Также создается source map, что очень удобно при работе через Chrome Web Inspector. Когда вы собираете продакшн-сборку, CSS дополнительно форматируется и сжимается, а неиспользуемые классы удаляются.
  • Компиляция JavaScript.
    Все исходники находятся в папке arc/assets/js/ и импортируются как ES6-модули. Для компиляции JS используется webpack, на выходе получается один большой бандл app.js. В режиме разработки код не сжимается, для продакшн-сборки используется UglifyJs. Создается также source map.
  • Сжатие изображений.
    По умолчанию изображения переносятся из папки assets/img в папку dist без изменений. Для продакшн-сборки они обрабатываются с помощью gulp-imagemin. Этот плагин поддерживает форматы JPEG, PNG, SVG и GIF.
  • Синхронизация с браузером. Для работы создается сервер BrowserSync, доступный в браузере по адресу http://localhost:8000. Здесь можно увидеть уже скомпилированный шаблон. Пока сервер работает, при каждом сохранении файлов результат будет автоматически обновляться.
  • Создание стайл-гайда. В папке src/styleguide находятся два файла для создания гида по стилям вашего проекта. Шаблон использует собственный плагин ZURB — Style Sherpa. Узнать о нем больше можно на странице официальной документации.

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны