Initializr — это простой инструмент, который поможет вам начать работу над проектом на основе HTML5, автором которого является Jonathan Verrecchia. Он построен на базе HTML5 Boilerplate, мощнейшем HTML5 шаблоне, созданном Paul Irish и Divya Manian. С его помощью вы элементарно создадите HTML5 проект с необходимыми настройками файлов по вашему выбору. По сути, это облегченная версия Boilerplate.

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

Из Initializr были удалены некоторые функциональные возможности Boilerplate, но вы можете посетить сайт HTML5 Boilerplate, если они вам необходимы.

Процесс настройки шаблона крайне прост и проходит в несколько этапов.

HTML и CSS

Первым шагом, сделайте выбор шаблона: с демо-контентом или без. Кликните по необходимому.

Сайт с контеном или без

Javascript

В данном шаге вы можете добавить Javascript файл (в который потом будете заносить скрипты) и ссылку на jQuery библиотеку. А также, выбираете какой вариант jQuery вам нужен: сжатый или полный.

Выберете кофигурацию JavaScript

Совместимость

На данном этапе вы настраиваете совместимость вашего документа с браузерами не поддерживающими HTML5, посредством одного из двух скриптов: Modernizr и HTML5shiv.

Более подробно об этих скриптах чуть ниже.

Выберете совместимость

А сейчас, в нескольких словах, что же такое Modernizr и HTML5shiv.

Modernizr — это небольшая и простая JavaScript библиотека, которая с легкостью поможет начать использовать CSS3, HTML 5 в проекте, и в тоже время обеспечит корректную работу сайта в более старых браузерах, которые не поддерживают новые веб-технологии.

Modernizr добавляет классы (class) к элементам которые позволяют вам нацеливаться на специфические функции браузеров в ваших таблицах стилей. И вам, на самом деле, не надо писать скрипты, чтобы пользоваться ими.

Подробно о Modernizr на русском ->

HTML5shiv предназначен для корректной работы сайта с HTML5 в IE (ниже 9-й версии). В старых версия IE вам необходимо инициализировать новый HTML5 элемент перед тем как загрузится страница. Так вот, cкрипт HTML5shiv сделает это за вас.

Добавьте следующий скрипт в секцию документа, ниже вашего CSS. Включите его в условные комментарии, чтобы его распознавали IE браузеры ниже 9-й версии.

[php]<!—[if lt IE 9]><br />
<script src=»http://html5shiv.googlecode.com/svn/trunk/html5.js»></script>
<![endif]—>[/php]

Конфигурация сервера

И последний шаг. Вы можете включить некоторые файлы для конфигурации сервера. Htaccess для PHP серверов, web.config для IIS серверов или nginx.conf для Ruby on Rails (.htaccess pour les serveurs PHP, web.config pour les serveurs Microsoft IIS, ou bien nginx.conf pour Ruby on Rails — указанно создателем Initializr).Выберете настройки для конфигурационного файла
Как только вы настроили конфигурацию шаблона, нажимите Download  и получите набор файлов, согласно сделанному выбору. К примеру, вот такой.

Полученный файлы

Несколько слов об этом наборе.

В папке CSS, находится style.css файл, который включает в себя несколько базовых настроек стиля, в том числе Css Reset Эрика Майера, CSS3 Media queries, а также минимальные настройки стилей от Boilerplate.
В папке “js” находится script.js и папка “libs”с библиотекой jQuery и modernizr или HTML5shiv. А также скрипт для поддержки png в IE6.

Пример index.html файла

Пример index.html файла

TODO.txt — данный файл представляет собой список того, что необходимо сделать перед запуском сайта. К примеру:

  • удалите из файла script.js скрипт для тестирования наличия jQuery библтиотеки  (просто очистите его).
  • замените значение в lang=»en» в  <html> теге на “ru”, если сайт на русском или на любой другой язык.
  • замените иконки favicon.ico  и apple-touch-icon.png на ваши.
  • чтобы в IE6 поддерживались фоновые изображения PNG, добавьте.png_bg класс к этому элементу. < ваш_тег class=“png_bg”>
  • используйте CSS версии, чтобы заставить кеш со стилями обновиться. Просто изменяйте номер версии в текщей версии [current_version] когда обновляеете стили. <link rel=»stylesheet» href=»css/style.css?v=[current_version]«>
  • создайте  404.html страницу если у вас есть переадресация  в конфигурационном файле сервера.

HTML5 Boilerplate - профессиональный набор для работы с HTML5

А теперь о Boilerplate, о том, что послужило базой для данного проекта.

Boilerplate — это высокопрофессиональный и надежный набор HTML/CSS/JS шаблонов созданных Paul Irish and Divya Manian. Это очень мощный иструмент для разработки веб-сайтов и веб-приложений, даже если вы не собираетесь работать с HTML5.

Громадный наработанный опыт за несколько лет был сведен в эту коллекцию. Я бы посоветовала прослушать видео презентацию Paul Irish (внизу страницы), где он подробно объясняет, что же такое Boilerplate и  дает много детальных пояснений, что делает более простым дальнейшее использование Boilerplate. Каждый файл дополнен подробными комментариями.

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

Если вам интересна тема шаблонов HTML5, вы можете ознакомиться со статьей: «Упрощенный шаблон HTML5, производное от Boilerplate»

Подробно о Modernizr на русском ->