Фреймворк Foundation - Знакомство

Начинаем изучение фреймворка Foundation. Этот фреймворк входит в двойку самых популярных и распространенных CSS-фреймворков на момент написания статьи (еще один - Twitter Bootstrap).

Можно по разному относиться к фреймворкам - любить их или не любить. Однако, они есть и ими пользуются при создании сайтов. Данный факт говорит о том, что фреймворки - это все-таки не такое уж и Зло. Скорее всего, нужно выработать для себя такое отношение к фреймворкам, что это быстрый способ создать что-либо непритязательное - не слишком оригинальное по дизайну, со стандартизированными элементами и не слишком оптимизированным кодом (читай - с большой долей мусора). А вот если к шаблону предъявляются повышенные требования, вот тогда нужно писать весь код вручную.

Но, как говорилось уже выше, фреймворки - они есть, и факт их существования говорит сам за себя. А поэтому, любой профессиональный веб-разработчик обязан знать и уметь работать с ними. В этой статье будет положено начало посильного знакомства с одним из двух популярных фреймворков - ZURB Foundation.

Сайт проекта Foundation

Официальный сайт проекта находится по этому адресу - Foundation. Если внимательно присмотреться, то можно заметить, что на странице проекта и в других местах часто мелькает слово ZURB - это название дизайнерской фирмы, которая и создала фреймворк.

Если бегло пробежаться по документации, то можно увидеть множество “плюшек” у данного фреймворка:

• фирменную консольную утилитку foundation для разворачивания или обновления проекта на Foundation
• коллекцию сниппетов под Sublime Text для быстрого создания различных компонент HTML-страницы
• тесная интерграция с препроцессором Sass

Естественно, Foundation заявляется как полностью адаптивный фреймворк, нацеленный прежде всего на создание мобильных версий сайтов (Mobile First).

Способы установки Foundation

Как говориться на странице документации, существует три способа установки фреймворка на локальном компьютере:

• Getting Started With Foundation CSS - самый простой и быстрый способ установки и начала работы. Нужно просто скачать и распаковать архив с готовым фреймворком
• Getting Started With Sass - разворачивание фреймворка c поддержкой Sass/Compass. Установка на локальный компьютер производится автоматически, с помощью уже упоминавшейся консольной утилиты foundation
• Applications - это что-то связано с разработкой приложений под Foundation. В общем, для front-end это не интересно

В дальнейшей статье приступим в установке Foundation вторым способом, так как мы уже хорошо знаем и умеем пользоваться препроцессором Sass и его библиотекой Compass.

Установка Foundation c поддержкой Sass

Для установки фреймворка на локальный компьютер с поддержкой Sass/Compass потребуется предварительное начилие на нем таких программных продуктов, как:

• Git - нужен для работы Bower
• Ruby - нужен для работы Sass/Compass
• Nodejs - нужен для работы Grunt

Foundation версии 5 использует для установки своих компонентов, а также для обновления себя самого в целом менеджер пакетов Bower, поэтому его наличие также жизненно необходимо в системе. Помимо этого, фреймворк может работать совместно с менеджером задач Grunt для конкатенации файлов; но наличие Grunt не является обязательным.

Проверяю наличие трех вышеназванных пакетов в своей системе Linux Mint 17. Все три пакета были установлены мною гораздо раньше. Как выполнить установку Git, Ruby, Nodejs, Grunt и Bower под Linux Mint 17, можно почитать в этой статье - “Установка Node.js, npm и Bower под Linux Mint”:

$ git --version
git version 1.9.1
$ ruby --version
ruby 1.9.3p484 (2013-11-22 revision 43786) [x86_64-linux]
$ nodejs --version
v0.10.25
$ bower --version
1.3.3

Установка Bower и Grunt, если они еще не были инсталлированы в системе, производится простой командой:

$ npm install -g bower grunt-cli

Все готово для установки консольной утилиты

1

foundation

Устанавливаем утилиту foundation:

$ gem install foundation

Сама утилитка foundation очень проста. Вызову команду

1

help

$ foundation help
Commands:
  foundation help [COMMAND]  # Describe available commands or one specific command
  foundation new             # create new project
  foundation update          # update an existing project
  foundation upgrade         # Upgrade your Foundation 4 compass project
  foundation version         # Display CLI version

Разворачивание Foundation c поддержкой Compass

C помощью утилиты foundation можно развернуть на локальной машине фреймворк c поддержкой:

• Grunt и Libsass
• Compass

Я воспользуюсь вторым вариантом и запущу установку Foundation c поддержкой Compass. Для этого нужно выполнить команду:

$ foundation new new_project_name

В моем случае имя нового проекта было оригинальным - foundation )) Пару секунд ожидания и я получаю папку с таким содержимым:

$ ls -l
drwxr-xr-x bower_components
-rw-r--r-- bower.json
-rw-r--r-- config.rb
-rw-rw-rw- Foundation.md
-rw-r--r-- humans.txt
-rw-r--r-- index.html
drwxr-xr-x js
-rw-r--r-- README.md
-rw-r--r-- robots.txt
drwxr-xr-x scss

Видим здесь файлы

1

config.rb

1

bower.json

1

index.html

1

bower_components

1

js

1

scss

Немного подредактирую файл

1

config.rb

$ compass watch .

Проект готов для работы! В следующем обзоре будет рассмотрен самый простой пример работы с данным фреймворком - я с вами научусь создавать кнопки на Foundation.