Добавить комментарий

Обзор Omega 4 beta 3

вс, 04/28/2013 - 12:34 -- 5n00py

До релиза omega 4 осталось не так много времени. Как только будет написана документация  мы получим release candidate (RC). В данный момент документации к 4-ой версии омеги практически нет. И я хочу немного заполнить этот пробел для тех кто не стоит на месте и хочет опробовать новый фреймворк.

Для начала хочу вкратце обьяснить, что же такое Omega 4 и основные различия с Omega 3.
Ребята из ThemeGeeks посчитали что нужно отказаться от "секций" 3-ей омеги. Теперь всё как и в других темах для Drupal.
Изменения коснулись не только системы регинов. Разработчики стремились сделать ее легче, бысрее, проще, но при этом не потерять гибкости. Теперь у нас нет alpha.
В угоду гибкости вырезали даже стандартные сетки вместе с возможностью их настройки.
Зато у нас появились какие-то не известные для Drupal config.rb, Gemfile, Gemfile.lock, Guardfile, sass и т.д.

Так давайте вместе с вами разберемся зачем это все нужно и что с этим делать.

Подготовка

Я работаю на системе gnu/linux, а именно на ubuntu. Нам понадобятся следующие пакеты:

  • git - мы будет работать с новейшей версией Omega 4
  • rubygems - Менеджер библиотек Ruby
  • drush - Надеюсь с установкой у вас не возникнет проблем.

А также работающая инсталляция Drupal 7.

Ну поехали.

$ sudo -s
# apt-get install git rubygems
# gem install bundler

(см. http://gembundler.com/ )

# exit

Установка Omega 4

$ cd sites/all/themes
$ git clone --branch 7.x-4.x http://git.drupal.org/project/omega.git
$ drush en omega

Создание собственной темы на основе Omega 4

Запустим мастер создания темы с помощью drush

$ drush owiz
Please enter the name of the new sub-theme [Omega Subtheme]: Blog-post
Please enter a machine-readable name for your new theme [blog_post]: bp
Please choose a base theme for your new theme
[0]  :  Cancel
[1]  :  Omega  
Please choose a starterkit for your new theme
[0]  :  Cancel
[1]  :  Default: This is a short description for the Default starterkit. (Provided by Omega)
[2]  :  Extended: This is a short description for the Extended starterkit. (Provided by Omega)
Please choose a destination. This is where your sub-theme will be placed
Please choose a destination type.
[0]  :  Cancel
[1]  :  Site (e.g. 'all' or 'example.com')
[2]  :  Installation profile
[3]  :  Parent theme
Please choose a site.
[0]  :  Cancel
[1]  :  all
Do you want to keep the starterkit's readme files? (y/n): y
Do you want to enable your new theme? (y/n): y
Do you want to make your new theme the default theme? (y/n): y
You have successfully created the theme Blog-post (bp) in sites/all/themes.
[success]

Теперь мы можем посмотреть на нашу новую тему. В моем случае она выглядит так:

 

Перед тем как я перейду к более глубокому анализу предлагаю вам посмотреть на страницу настроек темы:

Вкладки “toggle display”, “logo image settings” и “sortcut icon settings” мы упустим, скорее всего настройки в этих вкладках не будут для вас новыми. А вот верхнюю часть рассмотрим подробнее.
Вкладки, которые вы видите слева - не что иное как расширения (extensiions). Любой из них можно выключить или создать / добавить собственный.

На данном этапе разработки вы имеем 4 таких расширения:

  • Layouts - Мы рассмотри его подробнее в отдельной статье.
  • Compatibility - Тут мы имеем массу настроек связанных с совместимостью. Мы не будем рассматривать его.
  • Assets - Данное расширения дает дополнительные возможности для настройки Javascript и CSS, а также т. н. “Polyfills”. Polyfills - библиотеки написанные на Javascript, которые добавляют разные возможности css3 и html5 в старые браузеры.
  • Development - В общем стандартный набор настроек направленных на удобство разработки, не считая LiveReload пожалуй. Мы подробнее рассмотрим эту новую функцию в следующем разделе.

Настройка окружения разработчика.

Сразу скажу что данный раздел не является обязательным, но пропустив его вы рискуете упустить самое важное преимущество omega 4 - простоту и скорость разработки.
Начнем с установки ruby библиотек. Разработчики omega любезно нам предоставили Gemfile - список нужных библиотек.

$ cd sites/all/themes/YOUR_THEME_NAME
$ ls

В листинге должен быть файл “Gemfile”

$ bundle install

После нажатия на enter, bundler скачает и установит все нужны библиотеки. Скорее всего вас попросят ввести пароль для root.

Теперь можно сказать что у нас есть готовый guard - скрипт, который следит за изменениями в файлах и директориях темы и если нужно, то компилирует sass в css.

Перейдем к LiveReload, но перед этим я расскажу что это такое. LiveReload это клиент-серверное приложение. Сервер запускается внутри guard. Клиентом выступает наш браузер. Теперь если мы изменим файл темы, то compass его скомпилирует, а livereload даст знать браузеру что файл css изменился и его нужно перезагрузить. А что самое главное - без перезагрузки страницы. Вы просто редактируете стили и смотрите на результат. Эта замечательная функция должна работать сразу после запуска guard, но в моей инсталляции потребовалось указать имя хоста в настройках LiveReload на странице настроек темы.

Запуск guard. В omega 4 есть отличная интеграция с drush и запуск guard тоже присутствует в списке команд. Команда для drush выглядит так:

$ drush omega-guard

или

$ drush ogrd

К сожалению у меня не получилось запустить его таким образом (Я уверен эту мелкую неисправность скоро исправят). Но нам никто не мешает сделать это так:

$ bundle exec guard

CSS

В omega структура css файлов стала заметно проще. Проще она стала потому, что не стало 960gs. Зато теперь мы можем строить свою структуру css файлов.

Благодаря использованию sass стало гораздо проще и быстрее писать сложные наборы правил. Я настоятельно рекомендую почитать документацию sass. Это весьма мощный инструмент.

А чтобы писать меньше хаков и однотипных конструкций для разных браузеров добавленна поддержка compass css. Также настоятельно рекомендую изучить документацию.

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

Забегая наперед скажу пару слов о susy. С ним можно построить практически любую сетку, включая 960gs. И это займет у вас минимум времени. Мы вернемся к этому инструменту позже, когда будем говорить о лэйаутах.

Если помните в 3-ей версии омеги мы имели несколько css файлов для разных настроек 960gs, а мобильный лейаут просто отключал сетку. В omega 4 возможности намного шире и прозрачнее. В совокупности с поддержкой media queries в Drupal 7мы можем строить любое кол-во css layout-ов для любых устройств и параметров браузера.

Пожалуй на этом я закончу данную статью. В следующей моем посте я хочу рассказать о шаблонах omega 4, susy, compass, media queries и еще много чего интересного.

 

UPD: Видео доклада

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
Image CAPTCHA
Enter the characters shown in the image.