Foundation: установка | В паутине

Foundation: установка

Давно планировала написать несколько обзорных статей по фреймворку Foundation, и вот, время пришло.
Фреймворк классный, удобный, функциональный, работаю с ним недолго, но пока очень довольна.
Официальный сайт (на английском) : https://foundation.zurb.com/index.html

Итак, Foundation — это полноценный фреймворк для создания адаптивных сайтов. Разработан он на основе принципа mobile-first, поддерживает все современные устройства и обеспечивает доступность для юзеров с ограниченными возможностями.

Установка Foundation

Существует несколько способов установки и разворачивания фреймворка.
Ссылочка на: официальную страницу.

CLI

Удобнее всего работать с фреймворком через Node и npm. Чтобы установить интерфейс для работы, нужно ввести команду:

Тут мы устанавливаем приложение foundation-cli на компьютер глобально, чтобы иметь к нему доступ из любого места файловой системы.
Возможно, вам потребуется использовать sudo перед командой, чтобы установка прошла успешно:

Если на компьютере уже установлен Foundation 5 CLI, возможно, придется удалить его с помощью команды:

Если после тестирования нового интерфейса вы захотите вернуться к старому, запустите команду:

После установки CLI, можно создавать новый проект:

[context]

Ручная установка

Можно установить фреймворк и самостоятельно, ручками, склонировав соответствующий git-репозиторий.

У Foundation есть два основных шаблона — базовый (basic template) и шаблон ZURB (ZURB template). Разницу между ними опишу чуть позже.
Первый можно скачать командой:

Второй:

Репозиторий будет скачан и распакован в папку projectname.

Далее перейдите в эту папку:

И установите все необходимые зависимости командой npm install.

Начать работу можно командой:

Она запустит компилятор Sass и таск-менеджер Gulp.
После этого можно изменять файлы, а при их сохранении все внесенные изменения будут применяться и отображаться в браузере в реальном времени. Посмотреть на результат можно по адресу

Если вы используете шаблон ZURB, можно собрать готовую к выкатке на продакшн версию с помощью команды npm run build.


CSS версия

Если вы не знакомы с препроцессорами CSS, или не собираетесь вносить в стили существенные изменения, можете скачать уже скомпилированные CSS- и JS-файлы, а также index.html со всеми подключениями. Тут можно настроить, какие именно компоненты нужны. Просто разверните архив и можно кодить.
Скачать CSS-версию с официального сайта


CDN

Можно грузить фреймворк и из CDN:


Пакетные менеджеры

Foundation доступен в npm, Bower, Meteor и Composer. Пакеты фреймворка включают в себя исходные файлы Sass и JavaScript, а также их скомпилированные версии.

  • npm: npm install foundation-sites
  • Bower: bower install foundation-sites
  • Meteor: meteor add zurb:foundation-sites
  • Composer: php composer.phar require zurb/foundation
  • NuGet: Install-Package foundation-sites

Содержимое пакета

  • scss/ — исходные файлы Sass.
  • js/ — исходные файлы JavaScript. Если вы используете систему сборки, убедитесь, что первым загружается файл foundation.core.js
  • dist/ — скомпилированные файлы.
    • css/ — скомпилированные файлы CSS, обычные и минифицированные.
    • js/ — объединенные файлы JavaScript, обычные и минифицированные.
      • plugins/ — файлы плагинов.

Интеграция фреймворка

Foundation успешно интегрирован в Rails, WordPress, Django и другие системы. Загляните на официальную страничку, чтобы посмотреть, где и как его можно использовать.

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

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