Volodymyr Cherevchuk
Как установить ZURB Foundation на Microsoft Windows

Как установить ZURB Foundation на Microsoft Windows

Установка ZURB Foundation на Microsoft Windows занимает всего лишь 10-15 минут. Для этого необходимо пошагово выполнить несколько этапов.

Этап 1. Установка GIT

Шаг 1. Заходим на сайт Git https://git-scm.com/

Шаг 2. Нажимаем на "Downloads for Windows". Загрузка начинается автоматически.

Git

Если же загрузка не началась автоматически, то самостоятельно выбираем подходящий дистрибутив.

Download manually Git

Шаг 3. Файл скачан и теперь запускаем его. И в открывающихся поочередно окнах нажимаем «Next» (Далее).

General Public License Git

В окне «Select Components» оставляем все как есть (не добавляем и не снимаем «галочки»). И нажимаем опять кнопку «Next».

Select Components Git

В окне «Adjusting your PATH environment» выбираем опцию «Use Git from the Windows Command Prompt» и снова «Next».

Adjusting your PATH environment Git

Далее оставляем, как есть.

Choosing HTTPS transport backend Git

В следующем окне обратите внимание, чтобы была выбрана опция «Checkout Windows-style, commit Unix-style line endings» и нажимаем «Next».

Configuring the line ending conversions Git

Выбираем «Use Windows’ default console window».

Choose Use Windows default console window

В следующем окне снимаем все галочки и нажимаем «Install».

Configuring extra options Git

Процесс установки Git на компьютер запущен.

Installing Gi

Установка завершена, снимаем все галочки (если они есть) и нажимаем «Finish».

Completing Git setup wizard

Итак, Git установлен на компьютер. Переходим к следующему этапу.

Этап 2. Установка Node.js

Шаг 1. Заходим на сайт Node.js https://nodejs.org/en/.

Шаг 2. Скачиваем последнюю актуальную версию, нажав на кнопку «Current». Обратите внимание, что версии периодически обновляются и цифры на кнопке могут быть другими.

Node.jpg

Шаг 3. Когда файл полностью скачан, запускаем его. И как обычно в открывшихся окнах нажимаем «Next».

Setup Node.js

Принимаем лицензионное соглашение по использованию программы.

End-user license agreement Node.js

Destination folder for Node.js

В следующем окне оставляем все как есть и нажимаем «Next».

Custom setup Node.js

Нажимаем «Install».

Ready to install Node.js

Installing Node.js

Установка завершена, нажимаем «Finish».

Completed Node.js setup wizard

Node.js успешно установлен на компьютер. На следующем этапе установим уже непосредственно сам фреймворк ZURB Foundation.

Этап 3. Установка ZURB Foundation

Шаг 1. Запускаем командную строку Windows.

Command prompt Windows

Шаг 2. Устанавливаем ZURB Foundation в корневую папку. Подсмотреть, как правильно написать команду, мы можем на сайте Foundation - http://foundation.zurb.com/sites/docs/installation.html.

Command-line tool Foundation

Заходим в нужную директорию. Это не обязательно, можно просто установить в корень.

zurb foundation install step 2

В командной строке набираем npm install --global foundation-cli И нажимаем «Enter».

Npm install global foundation-cli

Установка занимает несколько минут.

Итак, ZURB Foundation установлен. Переходим к этапу создания нового проекта.

Этап 4. Создание нового проекта на ZURB Foundation

Шаг 1. В командной строке набираем Foundation new и нажимаем «Enter».

Command Foundation new

Из списка возможных проектов выбираем «website».

Choose website

Называем проект и нажимаем «Enter».

Enter Project Name

На выбор предоставляется два шаблона. Выбирайте тот, который Вам нужен. На скриншоте я выбрал «Zurb Template», а в видео-инструкции «Basic Template».

Choose Zurb Template

Шаблон инсталлируется. Необходимо подождать пока загрузятся все файлы.

Project test installing

Проект создан и установлен.

Шаг 2. Заходим в папку проекта.

Enter project folder

Набираем npm start и нажимаем «Enter».

run npm

Теперь мы можем работать с проектом. При изменении SASS файлов, CSS будет компилироваться автоматически.

Шаг 3. Проверяем проект. Заходим в директорию, где находиться проект и открываем "index.php".

Our project

SASS скомпилировался в CSS и наш проект готов к работе.

Demo content Foundation

 

Все, что описано здесь, Вы можете посмотреть в видео ниже