Введение в YAML

В 2005 году веб-разработчик Дирк Джесси опубликовал отзывчивый CSS-фреймворк YAML под лицензией Creative Commons CC-BY 2.0, что позволило использовать базовый фреймворк бесплатно как в частном, так и в коммерческом порядке. Пользователи, желающие разместить свой веб-проект в Интернете под другой лицензией, могут также приобрести коммерческую модель, которая предоставляет им свободный доступ к лицензированию. Основное внимание в фреймворке CSS всегда уделялось тому, чтобы предложить пользователям максимально возможную свободу для разработки безбарьерных веб-приложений. Текущая версия фреймворка (4.2.1) стала доступна в 2013 году и поддерживается различными системами управления контентом, такими как WordPress, TYPO3 или Joomla, благодаря соответствующим шаблонам интеграции с CMS.

YAML — это рабочая среда, которая облегчает разработчикам работу с веб-языками HTML и CSS и фокусируется на удобстве и простоте планируемого проекта. Название YAML является аббревиатурой от «Yet Another Multicolumn Layout». Фреймворк YAML не следует путать с языком разметки YAML («YAML Ain’t Markup Language»), который имеет лишь косвенное отношение к веб-фреймворку: Модули, составляющие фреймворк, были созданы в основном с помощью Sass («Syntactically Awesome StyleSheets»). Это позволяет настраивать и расширять отдельные разделы с помощью препроцессора CSS, на который значительное влияние оказал язык разметки YAML.

Библиотека JavaScript jQuery была внедрена и идеально сочетается с CSS-фреймворком начиная с версии 3.0, что значительно упрощает разработку динамических и анимированных элементов для индивидуального веб-присутствия. В Thinkin’ Tags, преемнике YAML Builder (начиная с версии 3.1), также есть редактор drag-and-drop, который поможет вам создать свой собственный макет YAML и автоматически управлять всеми HTML-страницами и таблицами стилей, созданными для вашего проекта.

Благодаря своей модульной системе, YAML предлагает типичные удобства фреймворка: Если вы хотите начать новый веб-проект, вам не придется начинать его полностью с нуля, а можно сразу приступить к работе с мощным базовым каркасом — что сэкономит вам драгоценное время. Как отзывчивый CSS-фреймворк, сила предварительно созданных компонентов YAML заключается, прежде всего, в их адаптивности: Независимо от того, какие устройства и браузеры используют пользователи, гибкий код обеспечивает привлекательное визуальное представление. Благодаря наличию основных модулей фреймворк охватывает наиболее часто требуемые элементы, хотя их общий размер составляет чуть менее 6 КБ.

Ниже перечислены стандартные модули, указанные в таблице стилей base.css:

Для поддержки старых версий Internet Explorer основные компоненты файла base.css дополнены коллекцией исправлений для версий 5, 6 и 7 бывшего браузера Microsoft. Это сохраняется в файле iehacks.css, который является необязательным, но должен использоваться всегда, если вы хотите представить свой YAML-проект в старых версиях интернет-браузера.

CSS-фреймворк не только гарантирует, что ваш сайт будет оптимально подготовлен для всех посетителей, но в первую очередь призван максимально упростить процесс разработки и возможное подключение к предпочитаемой вами системе управления контентом. Модульная конструкция и строгое разделение компонентов макета и дизайна помогают сохранить код удобным для пользователя и компактным. Если вам не нужен определенный элемент сайта, то вам не придется ничего с ним делать, потому что базовая структура просто предоставляет вам путь, а вы указываете его направление.

Тот факт, что для этого можно использовать упрощенный язык таблиц стилей Sass, несомненно, является одним из самых больших преимуществ фреймворка YAML. Благодаря простому синтаксису нужные таблицы стилей пишутся гораздо быстрее, чем при использовании обычного CSS. Кроме того, препроцессор уменьшает количество HTTP-запросов, связывая таблицы стилей друг с другом и автоматизируя сжатие шаблонов. Наконец, Sass автоматически генерирует необходимые CSS-файлы, и вам не придется о них беспокоиться.

Еще одним большим преимуществом отзывчивого CSS-фреймворка является работа специализированного сообщества YAML, которое разработало и опубликовало различные шаблоны для различных систем управления контентом — в некоторых случаях даже предлагая специальную поддержку. Эти готовые шаблоны связывают фреймворк с приложениями для управления веб-контентом. Вы можете скачать и использовать их частично бесплатно, а частично за плату. Это избавит вас от необходимости вносить необходимые изменения в основной фреймворк и направит все внимание на дизайн вашего веб-проекта. Существуют, в частности, следующие шаблоны YAML CMS:

• JYAML: Полный пакет, состоящий из шаблонов, плагинов и библиотек для Joomla с версии 3.6.0 на основе YAML 4
• YAML для Drupal: Различные шаблоны для Drupal, реализованные с помощью CSS фреймворка в Drupal 6 и 7 (планируется и для 8).

Конструкция и языковая база фреймворка YAML показательны своей простотой. В 2008 году была выпущена первая стабильная версия упомянутого ранее конструктора YAML, чтобы пользователи могли использовать его для оптимального проектирования собственных веб-проектов. Объединяя в себе все ключевые функции базового фреймворка CSS (вплоть до YAML 3.1), онлайн-инструмент позволяет быстро и интуитивно создавать запланированный веб-макет с помощью полезных элементов drag-and-drop. Каждое отдельное изменение можно сразу же просмотреть в режиме предварительного просмотра. Наконец, конструктор автоматически создает необходимые таблицы стилей и разметку (X)HTML.

В четвертой версии фреймворка построитель YAML нашел своего законного преемника в виде инструмента Thinkin’ Tags. Он характеризуется еще более совершенным рабочим процессом для создания прототипов веб-сайтов на основе YAML или поддерживаемого CSS-фреймворка Blueprint. Для этого разработчикам доступны, помимо прочего, следующие функции:

• HTML-редактор: С помощью встроенного HTML-редактора можно легко редактировать код двойным щелчком мыши в макете или дереве структуры DOM. Редактор упрощает написание кода с помощью типичных инструментов помощи, таких как подсветка синтаксиса, автозавершение и просмотр в реальном времени.

• Редактор CSS: Вы также можете редактировать CSS-файлы вашего проекта с помощью внутреннего редактора (включая подсветку синтаксиса и живой анализ) прямо в Thinkin’ Tags. Для этого редактор получает доступ к соответствующим медиа-запросам, с помощью которых таблица стилей затем назначается носителю.

• Управление страницами и таблицами стилей: Каждый проект может содержать различные HTML-страницы и таблицы стилей, при этом каждому HTML-файлу можно назначить соответствующие таблицы оформления. Также можно скрыть таблицы стилей на определенное время.

• Проверка отзывчивого веб-дизайна: Не выходя из Thinkin’ Tags, вы можете проверить свой макет для различных сценариев — например, ширина дисплея на различных устройствах, таких как настольные компьютеры, планшеты или смартфоны, может быть эмулирована для обнаружения и устранения любых несоответствий.

• Удобная для пользователя оптимизация типографики: Изменения в типографике быстро проверяются благодаря полезным ползункам. Кроме того, у вас есть доступ к более чем 600 шрифтам из библиотеки Google WebFont, которые вы можете интегрировать в свой проект одним щелчком мыши.

Самой большой проблемой таких фреймворков, как YAML, часто является длительный период обучения, необходимый для ознакомления с кодом различных модулей. Если вы хотите полагаться на готовые фрагменты кода, то вам придется много разбираться с принципами их работы, даже если вы уже обладаете глубокими знаниями HTML, CSS и других языков. Поэтому важно адаптировать индивидуальную работу к концептуальным подходам фреймворка, чтобы достичь желаемого конечного результата. Для этого YAML предоставляет подробную документацию по отдельным компонентам. Также для фреймворков характерно то, что для проекта YAML обычно загружается больше кода, чем требуется на самом деле — если только вы специально не оптимизируете его.

Еще одним недостатком отзывчивого CSS-фреймворка является упомянутое выше лицензирование. Хотя лицензия Creative Commons Attribution 2.0 (CC-BY 2.0) позволяет вам бесплатно использовать веб-фреймворк как в частном, так и в коммерческом порядке, обязательным условием является ссылка на домашнюю страницу YAML в вашем веб-присутствии. Если вы хотите опубликовать свой проект под другой лицензией, вам не обойтись без приобретения одной из платных моделей лицензий (Project, General, OEM и т.д.).

Судя по тому, насколько он дружелюбен к браузерам, его отзывчивый веб-дизайн и поддержка CSS3 и HTML5, YAML является очень интересным фреймворком для веб-приложений, несмотря на то, что последний релиз был выпущен некоторое время назад. Благодаря модулю доступности вы можете оформить свое присутствие в Интернете в машиночитаемой форме, что является не только решающим шагом к доступности, но и приносит вам ценные очки при поисковой оптимизации. В сочетании с Thinkin’ Tags у вас есть все необходимое для создания современного, соответствующего стандартам веб-присутствия. Кроме того, если вы управляете содержимым вашего проекта с помощью поддерживаемой системы управления контентом, вы можете полностью сосредоточиться на формировании макета и дизайна.

Чтобы использовать текущую версию CSS-фреймворка, сначала необходимо загрузить соответствующие файлы ядра, которые можно найти либо на официальном сайте, либо в репозитории YAML GitHub. Они также содержат документацию, различные демо-версии макетов, библиотеку JavaScript jQuery и многое другое. Чтобы скомпилировать стандартную версию фреймворка из имеющихся файлов, вам понадобятся следующие пять компонентов:

• Node.js: серверная среда выполнения на основе JavaScript движка V8.
• Grunt-CLI: инструмент командной строки, основанный на Node.js и необходимый для автоматизации задач (например, компиляции LESS или SCSS файлов).
• Ruby: Объектно-ориентированный язык программирования
• Sass: Альтернативный язык таблиц стилей, позволяющий использовать переменные и микс-индексы, что упрощает создание таблиц дизайна
• Compass: Фреймворк, который использует Sass в качестве библиотеки по умолчанию и предоставляет препроцессору большое количество mix-ins.

После установки этих компонентов и сохранения YAML-файлов в вашей системе, вы должны решить и установить все необходимые зависимости Grunt. Следующие задачи необходимы для правильной компиляции YAML-фреймворка:

• grunt: Запустите простую последовательность Compass для компиляции существующих файлов Sass-/SCSS в CSS.
• grunt watch: Активировать функцию мониторинга Compass, которая используется для автоматической перекомпиляции Sass-/SCSS-документов при всех последующих изменениях
• grunt build: Компилировать все статические YAML-файлы CSS
• grunt build-utf8: Функция, аналогичная grunt build, но правило @charset «utf8» остается активным в CSS-файлах.

YAML необычайно упрощает разработку нового веб-проекта, а также его визуальное оформление с помощью CSS. Однако не стоит недооценивать процесс обучения, который придется пройти пользователю фреймворка: Вы должны быть знакомы с HTML и CSS и быть готовым принять концептуальные идеи стандартно-совместимой базы разработки, если вы хотите полностью использовать весь ее потенциал. С помощью Thinkin’ Tags разработчик Дирк Джесси выпустил на рынок инструмент, который поможет опытным пользователям создавать макеты YAML, активно поддерживая их усилия и, как минимум, облегчая их вхождение. Но у новичков, скорее всего, возникнут проблемы с заранее разработанной структурой макета, несмотря на помощь инструмента.

Большим поводом для беспокойства являются будущие возможности фреймворка. Последнее обновление для текущей версии 4 вышло в 2014 году. Несмотря на то, что Джесси подтвердил работу над пятым изданием отзывчивого CSS-фреймворка, пока неясно, как и происходит ли дальнейшее развитие. Но пока YAML и Thinkin’ Tags представляют собой абсолютно рекомендуемую платформу для современных веб-проектов, которые характеризуются гибкой и соответствующей стандартам структурой.