Даже для самых опытных ветеранов-дизайнеров начинать работу с новым стандартом может быть непросто, даже если язык разработан для упрощения кодирования, например HTML5. Говоря об этом, глубокое знание HTML 4.01 — это то, что может быть построено на основе, это просто случай, чтобы узнать, какие теги есть, а какие нет.
HTML5 Boilerplate помогает дизайнерам начать работу с новым стандартом, предлагая профессиональный интерфейсный шаблон, который позволяет создавать быстрый, надежный и адаптируемый сайт с набором HTML5-готовых функций и элементов.
Он был создан Paul Irish и Divya Manian и представляет собой проект с открытым исходным кодом, который идеально подходит для создания кросс-браузерных сайтов, которые работают со старыми браузерами, в то же время будучи готовыми для HTML5.
Его можно загрузить с веб-сайта HTML5 Boilerplate в его полной форме или в урезанной версии, которая не включает всю пояснительную документацию. Более легкая версия рекомендуется для тех, кто работал с ней раньше, и ее можно использовать, когда вы ознакомитесь с шаблоном. Для тех из вас, кто уверен, что вы можете работать с ним полностью, есть также настраиваемая опция, которая позволяет вам выбирать нужные элементы.
Что в коробке?
Основные функции, которые можно найти в HTML5 Boilerplate, включают в себя все необходимые элементы, которые вам понадобятся для начала, а также сопроводительную документацию:
- HTML
- CSS
- JavaScript
- .htaccess (настройка веб-сервера Apache)
- crossdomain.xml
- Разное (игнорировать файл, gitignore и т. Д.)
Modernizr также включен для того, чтобы позволить вам стилизовать новые элементы HTML5 в IE, и помогает обнаруживать функции HTML5 или CSS3 во всех браузерах, включая более ранние версии IE (до v9).
Давайте сначала посмотрим на HTML, который по своей сути состоит из ряда условных комментариев IE для соответствующих IE-специфичных классов и CSS для более старых версий IE. Они дают определенное количество преимуществ для дизайнера, использующего технику условных классов, например, более простую интеграцию с CMS, такими как WordPress и Drupal.
Также исправлено множество CSS для более старых версий IE, а также классов IE, которые применяются к тег. Это проверяется как HTML5, а класс no-js HTML также включает в себя те же элементы, что и Modernizr и Dojo, а также параметры для Google Frame, Google CDN для jQuery и код отслеживания Google Analytics в области содержимого.
Вы также можете использовать HTML5 Boilerplate с Initializr ( ознакомьтесь с демонстрационной страницей здесь ), который генерирует шаблоны на основе Boilerplate, которые позволяют выбирать элементы, которые вы хотите, и те, которые вам не нужны. При этом у вас также есть возможность использовать адаптивный шаблон с самого начала, а не начинать с пустой страницы.
Начиная
После того, как вы загрузили HTML5 Boilerplate, пришло время настроить базовую структуру сайта, добавить контент, стиль и функциональность и начать тестирование! Вначале базовая структура будет выглядеть примерно так:
, ├── css │ ├── main.css Ize └── normalize.css D── док Im── img ├── js Main ├── main.js Plug ├── plugins.js │ └── продавец │ ├── jquery.min.js Modern └── modernizr.min.js H── .htaccess 40── 404.html Index── index.html ├── humans.txt ├── robots.txt Cross── crossdomain.xml Fav── favicon.ico Apple── [apple-touch-icons]
Итак, давайте посмотрим, как их можно использовать, начиная с CSS, каталог, который должен содержать все файлы CSS вашего сайта. Обратите внимание, что этот каталог уже содержит некоторые CSS, чтобы помочь вам начать работу, а также нормализовать CSS.
Стартовый CSS включает в себя:
- HTML5 Boilerplate по умолчанию
- Общие помощники
- Заполнители медиа-запросов
- Стили печати
Это не зависит от условных имен классов, таблиц условных стилей или Modernizr и может использоваться «из коробки» независимо от ваших предпочтений при разработке.
Общие помощники
Класс .ir При замене содержимого изображением необходимо установить определенный элемент ширины и высоты, чтобы изображение отображалось.
.ir {
background-image: url(http://yoursite.com/images/logo.jpg);
background-size: 100% auto;
width:450px;
height:450px
}
Детализация фрагментов для всех классов CSS потребует огромного количества текста, поэтому мы рассмотрим наиболее релевантные. Однако имейте в виду, что существуют следующие классы:
- ,
hidden -
.visuallyhidden -
.invisible -
.clearfix - Стили с постраничным медиа (поддерживаются только в нескольких браузерах)
Медиа-запросы
Одна из замечательных особенностей HTML5 Boilerplate заключается в том, что с ним легко начать работу с сайтами Mobile First и RWD. Однако не все согласятся с тем, что использование медиа-запросов является лучшим подходом, как обсуждал Джейсон Григсби в 2010 году.
В HTML5 Boilerplate включены заполнители, помогающие создавать мобильные стили для разных разрешений и размеров экрана. В документации рекомендуется адаптировать медиазапросы на основе содержимого сайта, а не «отражать фиксированные размеры определенных устройств».
Несмотря на то, что я считаю, что подход «сначала мобильный» является разумным, в наши дни не каждый захочет воспользоваться этим подходом, и если вы один из них, то вы можете просто отредактировать или удалить заполненные медиазапросы. Для мобильных приложений вы можете взглянуть на Mobile Boilerplate .
Стили печати
Они удаляют все фоновые цвета и изменяют шрифты на темно-серые без тени, чтобы помочь конечным пользователям сэкономить на чернилах принтера. Они также предназначены для уменьшения количества страниц с целью сокращения использования бумаги, что является удобным небольшим преимуществом для тех клиентов, которые заинтересованы в окружающей среде!
Другие каталоги
Каталог JS также содержит некоторый исходный код, который поможет вам начать работу, а также место, где вы захотите хранить все файлы JS сайта, библиотеки и плагины. Каталог .htaccess содержит конфигурацию сервера по умолчанию для серверов Apache; если вы хотите использовать другие настройки, вы можете найти их здесь .
Существует также очень простая страница 404, которую вы можете настроить в соответствии с вашими потребностями, а также обязательный файл index.html, который содержит все необходимое для начала работы над созданием всех ваших страниц.
Иконки
Boilerplate также предоставляет «стартовый набор» значков favicon и apple touch, которые вы можете заменить своими. По словам разработчика Boilerplate Пола Айриша (Paul Irish), разработчика иконок Boilerplate Пола Айриша, который также предлагает пошаговое руководство по коду.
Быстрый поиск в Интернете покажет, что довольно сложно найти кого-то, у кого нет хорошего слова, чтобы сказать о HTML5 Boilerplate, и что он сгенерировал несколько хороших статей о лучших фрагментах кода для использования.
Нет сомнений в том, что этот шаблон облегчает начало кодирования в HTML5, и более того, с новыми элементами легко работать и они могут сделать сайт великолепно выглядящим.
Пример сайта
Быстрый взгляд на код говорит вам все, что вам нужно знать в 1.21 Jiggawatts , не только фрагменты выдают его, но и разработчик сайта также отметил , где он должен быть в исходном коде.
Другие сайты включают в себя: Барак Обама , Mercedes Benz и НАСА , чтобы назвать лишь некоторые. Для полной демонстрации взгляните на HTML5 Boilerplate, онлайн-витрину .
Другие ресурсы
В статье Роба Ларсона, посвященной IBM, приводятся некоторые советы по перестройке структуры папок, а также фрагмент кода «Метка Интернета» для тех, кто тестирует шаблоны в IE при запуске Windows с использованием файлового протокола.
Чтобы подавить блоки безопасности при работе таким образом, вставьте следующее сразу после объявления doctype, как показано ниже:
< !doctype html>
< !—saved from url=(0014) about:internet -->
Тема WordPress Сэма Шерлока, которая сочетает в себе Boilerplate с тематической платформой, находится здесь, и также легко добавить 960.gs для тех, кто является поклонниками CSS-фреймворка.
HTML5 Boilerplate является отличным ресурсом для запуска любого нового проекта, который требует кросс-браузерной функциональности. Сейчас на рынке существует так много устройств, что трудно понять, с чего начать, а HTML5 Boilerplate предоставляет вам весь скелетный код, который вам понадобится для мобильных устройств, планшетов и настольных компьютеров.
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .
Комментарии к этой статье закрыты. Есть вопрос о доступности? Почему бы не спросить об этом на наших форумах ?