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

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

Начнем с пре-конфигурации. Перед нами три больших кнопки или ссылки, как кому удобней, такого содержания:

  • классический HTML5 Boilerplate;
  • responsive (адаптивный или как там еще переводят);
  • Bootstrap;

Initializr генератор шаблонов на HTML5

При щелчке по любой из кнопок будет открыто “окно” с предустановленными настройками в зависимости от выбранной категории. Вобщем, что бы вы не выбрали, можно все равно перенастроить под себя. Крайне удобно!
Ну и все, жмем на Download it -  и имеем, то что выбрали:)
Рядом с кнопкой закачки, есть кнопка — What’s inside?  Если нажмете, то увидите все, что вы скачали в одном файле. Т.е. html, css, js и т.д. друг за другом в одном окне. Опять же — удобно, чтобы не ковыряться в куче файлов, все в одном месте и перед закачкой можно быстро ознакомиться, что скачаем.

Initializr генератор шаблонов на HTML5

Под каждой кнопкой на закачку есть ссылка на полную документацию на github и демо версию, соответственно: DOCS & DEMO.


 

Ниже следует описание Initializr таким, какой он был при первичном запуске. Жаль удалять :)

Из 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 на русском ->