Обзор фреймворка HTML KickStart

Один из вариантов перевода названия этого фреймворка – это ударный быстрый старт в HTML. Действительно, с помощью этого мощного инструмента не будучи искушённым веб-разработчиком можно создавать адаптивные сайты, одинаково хорошо выглядящие как на мобильных устройствах, так и на настольных компьютерах. Причём создавать такие отличные веб-сайты можно в самые кратчайшие сроки. Недаром авторитетные интернет–ресурсы Codecall.net и WebDesignCube.com признали HTML KickStart одним из лучших CSS фреймворков 2014 года. Он достойно конкурирует с широко известными, но тяжеловатыми в понимании и применении HTML&CSS-фреймворками Twitter Bootstrap, Foundation, Gumby Framework. Отличительной чертой HTML KickStart являются его лёгкость и интуитивная понятность. Лёгкость этого фреймворка, однако, не означает какой-то ущербности – в его дистрибутиве есть всё для создания современных, стильных и красивых адаптивных сайтов. Попробуйте и убедитесь в этом сами. Распространяется фреймворк свободно и бесплатно под MIT-лицензией.

Автор HTML KickStart канадец Joshua Gatcke (на фотографии он собственной персоной) – жизнерадостный, жизнелюбивый человек и большой любитель пива. Он сам не любит работать более 4 часов в день и делает многое, чтобы другие люди тоже не зацикливались только на работе и могли насладиться жизнью во всём её многообразии. Фото автора Своеобразным девизом разработчика является слоган, размещённый на его домашней странице: «Я стараюсь сделать жизнь веб-дизайнеров легче». Этому девизу как нельзя лучше соответствует фреймворк HTML KickStart. На момент публикации этого обзора его скачали болеем 260 000 раз. Опираясь на этот фреймворк сделано огромное количество веб-сайтов, на его основе делаются темы и шаблоны для многих популярных CMS (Drupal, ImpressCMS, Orchard, ProcessWire и др.). Огромная популярность этого фреймворка обусловлена не только его легкостью и понятностью, но и детальной проработкой всех элементов и компонентов, необходимых для создания современных сайтов.

В HTML KickStart есть практически все, что нужно для создания почти любого сайта. Не надо что-то ещё дополнительно искать и как-то встраивать в сайт, автор фреймворка все предусмотрел и сделал это красиво. Прежде чем продолжить обзор, перейдите на демо-страницы (не забудьте вернуться) и внимательно посмотрите на эту красоту. Посмотрите на слайд–шоу, фотогалерею с лайт–боксом — непременные атрибуты современных веб–сайтов. Обратите внимание на прекрасную типографику и отличное исполнение туевой хучи элементов, используемых на сайтах. Чего там только нет: навигационные меню, списки, вкладки, таблицы, кнопки, формы, уведомления и прочее. И все это богатство в разных вариантах исполнения и различных стилях. Обратите внимание на то, как это чисто и просто реализовано в коде (весь груз выполнения находится на задворках – в стилевых файлах). Когда вернетесь с экскурсии – продолжим знакомство с HTML KickStart.

Посмотрели? Пощелкали по заголовкам сортируемых таблиц, увидели и оценили возможности слайд-шоу, оценили работу лайт-бокса при просмотре фотогалереи в модальных окнах? Если понравилось, то давайте продолжим. Но сначала одна оговорка – мой обзор предназначен для обычных пользователей. Профессионалам и продвинутым веб-дизайнерам достаточно одного взгляда, чтобы разобраться в HTML KickStart. Скриншот дистрибутива На рисунке показана структура дистрибутива фреймворка. В корневом каталоге в соответствующих папках находятся файлы стилей и скриптов, здесь же находятся файл пользовательских стилей (style-dev.css), файлы страниц, которые вы только что просмотрели и другие файлы, которые нам не понадобятся.

Автор HTML KickStart предлагает начать работу с наполнения пустого документа (blank.html). Откроем его в редакторе. Сразу становится ясно, что работать с фреймворком нужно при активном интернет–соединении. Об этом говорят следующие строки в секции head: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>. Они указывают на то, что фреймворк подгружает из Интернета библиотеку jQuery, необходимую ему для нормальной работы. Подгружается она из специального хранилища Google. Можно, конечно, скачать эту библиотеку и установить в папку скриптов, не забывая прописать нужные пути к файлу. Кроме этого в файле style-dev.css через правило @import фреймворк подгружает веб-шрифт Arimo. Этот шрифт по начертанию схож с широко распространенным шрифтом Arial, который прописан в стилях вторым и используется фреймворком, если не найден шрифт Arimo. Но в период ознакомления с HTML KickStart лучше ничего не менять и подключать Интернет во время работы (это касается также просмотра оригинального и переведенного фреймворка, так как и картинки–заполнители тоже подгружаются извне). Сразу хочу отметить, что правило @import используется во фреймворке еще не один раз. Если открыть файл kickstart.css, то можно увидеть, что с помощью этого правила подключаются стилевые файлы различных модулей HTML KickStart. Это правило входит в официальную спецификацию CSS, но в последнее время его не рекомендуют к использованию из-за замедления загрузки веб-страницы. Актуально это для крупных веб-проектов, где подключаются очень большие стилевые файлы. Для небольших сайтов эти рекомендации необязательны. Но если есть желание то в конце работы все используемые css-файлы можно объединить в один.

Мы только что рассмотрели одну из фишек HTML KickStart – его модульность. Если вам не нужны все элементы, которые используются во фреймворке, то их легко исключить из проекта. Для этого достаточно не импортировать ненужный вам стиль. Например, если вы не будете использовать показ фотогалереи в модальных окнах, то можно смело убрать из стилей файл fancybox, да и саму папку fancybox тоже можно убрать, чтобы не занимала место на сервере. Аналогично можно поступить с другими ненужными модулями – всплывающими подсказками, слайд-шоу, иконочным шрифтом и прочими. Точно также можно подключить какие-то свои уже апробированные модули, которые вы хотели бы использовать в проекте. Вероятен и обратный процесс – применение отдельных модулей HTML KickStart в каких-то других проектах. Если вы загляните в файл responsee.js, то и там вы найдете откомментированнные фрагменты кода, соответствующие некоторым модулям. Их также можно исключить из файла или добавить необходимые вам скрипты.

Еще одним достоинством HTML KickStart является хорошо откомментированный код. Комментариев немного, но они есть там, где они действительно нужны. При переводе демо–страниц я переводил и комментарии. Переведены комментарии и в стилевых файлах. В принципе фреймворк так хорошо скомпонован и организован, что и без перевода все ясно и понятно. Перевод на русский язык сделан больше для простоты восприятия. Для использования элементов HTML KickStart в своих проектах порой даже не нужно заглядывать в исходный код. Автор разместил во вкладках соответствующие сниппеты, что достаточно посмотреть на них и начать применять в своем проекте. Для визуального контроля расположения блоков на странице автор рекомендует на время проектирования использовать в блоках вспомогательный класс visible, который добавляет для блока точечную рамку и фоновую подсветку (цвета рамки и фона бледноватые, но ничто не мешает сделать их поярче и поконтрастней). В HTML KickStart используется 12–колоночная сетка шириной 1220 px.

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

Если мой обзор вам понравился, поделитесь с друзьями. Если он вам поможет, я буду рад.