Старт нового проекта с помощью foundation-cli

Полностью универсальные тяжелые css фреймворки, как foundation редко используются на обычных сайтах. К тому же, если это не прототип приложения, часто нужно внести дополнения, например размер шрифта заголовков, отступы между колонками. Для упрощения работы с saas версий и локальной разработки предназначен  foundation-cli. На сайт будет загружаться только легковесная скомпилированная версия, всю тяжесть сопутствующих библиотек и дополнений >390 мб, принимает машина разработчика. На каждый проект данные фактически дублируются, поэтому если у вас SSD диск или мало места, то папку node_modules в новом проекте возможно использовать по ссылке, не занимая места, или ставить все глобально, что не всегда удобно. 

Предполагается, что относительно свежая версия менеджера npm на машине разработчика уже установлена.

Первоначальная подготовка foundation cli

Установить foundation-cli

npm install -g foundation-cli

Обновление, если уже было установлено ранее

npm update -g foundation-cli

Проверить, установилось или нет

foundation -v

На текущий момент актуальная версия Foundation CLI version 2.2.5

Старт нового проекта, будет сохранен в папку с название проекта

foundation new

Необходимо будет ответить на вопросы в терминале

Первый вопрос, выбираем первый пункт "A website (Foundation for Sites)"

? What are you building today? (Use arrow keys)
❯ A website (Foundation for Sites) 
  A web app (Foundation for Apps) 
  An email (Foundation for Emails)

Второй вопрос, необходимо ввести название проекта, без пробелов, в данном случае введено "wd5.ru"

? What are you building today? A website (Foundation for Sites)
? What's the project called? (no spaces) wd5.ru

Последний вопрос, какой тип проекта использовать, только SAAS или добавить js, выбрать второй пункт "ZURB Template: includes Handlebars templates and Sass/JS compilers"

? What are you building today? A website (Foundation for Sites)
? What's the project called? (no spaces) wd5.ru
? Which template would you like to use? 
  Basic Template: includes a Sass compiler 
❯ ZURB Template: includes Handlebars templates and Sass/JS compilers

Начнется скачивание всех необходимых дополнений для разработки нового шаблона, на экране увидим сообщение

            .
           /|     ,
      , /|/  \/| /|       Thanks for using ZURB Foundation for Sites!
     /|/       |/ |       -------------------------------------------
 |___|            |___|   Let's set up a new project.
 \___|  ^^   ^^   |___/   It shouldn't take more than a minute.
     | -[O]--[O]- |
     |    ___,    |
     |    ...     |
      \__________/

Команды управления проектом

foundation watch  # запуск сервера разработчика с автообновление проекта
foundation build  # когда все готово, собрать в папке dist
foundation update  # обновление проекта до новой версии foundation, требуется очень редко

Данные с которыми будем работать, находятся внутри папки src. Структура папки:

.
├── assets
│   ├── img
│   │   └── think.svg
│   ├── js
│   │   ├── app.js
│   │   └── lib
│   │       ├── dependancies.js
│   │       └── foundation-explicit-pieces.js
│   └── scss
│       ├── app.scss
│       ├── components
│       │   ├── _footer.scss
│       │   └── navigation
│       │       └── _main-nav.scss
│       ├── global
│       │   ├── _app-dashboard.scss
│       │   ├── _layout.scss
│       │   └── _typography.scss
│       ├── mixins
│       │   ├── _avatar.scss
│       │   ├── _container-border.scss
│       │   ├── _flex.scss
│       │   ├── _helpers.scss
│       │   ├── _psuedo.scss
│       │   ├── _push-center.scss
│       │   ├── _sidelines.scss
│       │   └── _zindex.scss
│       ├── _settings.scss
│       └── vendor
│           ├── _aos.scss
│           ├── _index-menu.scss
│           └── _slick-carousel.scss
├── layouts
│   ├── default.html
│   └── index.html
├── pages
│   ├── dashboard.html
│   └── index.html
├── partials
│   └── navigation
│       ├── app-sidebar.html
│       └── main-nav.html
└── styleguide
    ├── index.md
    └── template.html

Для редактирования базовых стилей, правим или дополняем файл settings.scss, или другие, если меняем достаточно много. Новые страницы, например страница товара, корзины - добавляем в pages, по примеру index.html. В layouts - фактически header html страницы, если должно отличаться, делаем по образцу. В папке partials - часто используемые однотипные элементы, например меню, время работы, форма подписки

Переход на новую страницу, вместо главной во время разработки (foundation watch) - просто подставив название страницы созданной внутри папки pages, например для файла cart.html -> http://localhost:8000/cart.html