Основа

Использование Normalize.css, как HTML5-альтернативы сброса CSS-стилей

The Foundation

Все модули Pure построены на основе Normalize.css. Это основополагающий слой, сохраняющий согласованность стилей и кросбраузерность. В Pure используется Normalize v1.x, так как он поддерживает старые версии Internet Explorer. Normalize.css можно использовать и отдельно без остальных модулей Pure, используя наш CDN. Для этого, добавьте элемент <link> на страницу:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/base-min.css">

Немного о Normalize.css

Normalize.css это совместный open-source проект Николя Галлахера (Nicolas Gallagher) и Джонатана Нила (Jonathan Neal). По их собственным словам:

Normalize.css это небольшой файл CSS, который обеспечивает лучшую кросс-браузерность для стилей HTML-элементов по умолчанию. Это современная, HTML5-адаптированная, альтернатива традиционному сбросу стилей CSS.

Normalize.css идёт с большим количеством документации и a подробным руководством, объясняющим, чем он отличается от традиционного сброса CSS-стилей. Вы также можете проверить модуль YUI's CSSNormalize, который включает общую версию Normalize и контекстную версию. Контекстная версия Normalize, применяет "нормализованные" стили к элементам, которые являются потомками элемента с именем класса yui3-normalized.

Типографика

Чтобы сохранить максимальную способность к расширению, в Pure не добавляется никаких тпографических стилей, кроме тех, которые были определены в Normalize.css. Это означает, что вы получаете заголовки разного размера, цитаты, списки, списки определений, и многое другое с минимальными стилями, которые легко переопределить.

Заголовки

Заголовки от h1 до h6 уменьшаются в размерах. Размеры шрифтов определены в em.

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Списки

Существуют разные типы списков. Это маркированные списки, нумерованные списки и списки определений. Normalize задаёт базовые стили и кросс-браузерные последовательности для всех типов списков. Если просто списки вас не интересуют, а вы хотите использовать их для создания меню на сайте, перейдите в раздел Меню.

Маркированный список

  • Элементсписка 1
  • Элемент списка 1
    • Элемент списка 2
    • Элемент списка 2
      • Элемент списка 3
      • Элемент списка 3
    • Элемент списка 2
    • Элемент списка 2
  • Элемент списка 1
  • Элемент списка 1

Нумерованный список

  1. Элемент списка 1
  2. Элемент списка 1
    1. Элемент списка 2
    2. Элемент списка 2
      1. Элемент списка 3
      2. Элемент списка 3
    3. Элемент списка 2
    4. Элемент списка 2
  3. Элемент списка 1
  4. Элемент списка 1

Списки определений

Термин
Определение термина
Термин
Определение термина
Определение термина
Термин
Термин
Определение термина

Цитаты

Цитаты охватывают текст, который предназначен для представления целого предложения или высказывания. По умолчанию цитаты выглядят, как обычный текст с отступом. Это дает вам свободу, чтобы устанавливать свои собственные CSS-стили к цитатам. Пример по умолчанию:

Один маленький шаг для человека, но гигантский скачок для всего человечества.
<blockquote>
	Один маленький шаг для человека, но гигантский скачок для всего человечества.
</blockquote>

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

Один маленький шаг для человека, но гигантский скачок для всего человечества.

Сокращения (аббревиатура)

<abbr> представляет собой аббревиатуру. Если атрибут title присутствует, то полное название будет отображаться при наведении. Сокращения, как правило, подчёркиваются небольшой пунктиром.

YUI является свободным проектом на JavaScript с открытым исходным кодом и библиотекой CSS-стилей для создания полноценных интерактивных веб-приложений.

<p>
	<abbr title="Yahoo User Interface">YUI</abbr> является свободным проектом на JavaScript с открытым исходным кодом и библиотекой CSS-стилей для создания полноценных интерактивных веб-приложений.
</p>

Адреса

<address> используется для отображения контактной информации. По умолчанию, адреса не имеют какого-либо специфического стиля отображения. Однако, они могут быть стилизованы разнообразными встроенными стилями, доступными через Normalize.

Tilo Mitra
Eric Ferraiuolo
Matt Sweeney
Jeff Conniff
<address>
	<a href="https://github.com/tilomitra">Tilo Mitra</a><br>
	<a href="https://github.com/ericf">Eric Ferraiuolo</a><br>
	<a href="https://github.com/msweeney">Matt Sweeney</a><br>
	<a href="https://github.com/jconniff">Jeff Conniff</a><br>
</address>

Встроенные стили

Существует множество встроенных стилей, которые можно использовать. Небольшой их список приведён в документации Normalize:

Пример элемента cite
Пример элемента code
Пример элемента del
Пример элементов dfn и dfn с аттрибутом title
Пример элемента em
Пример элемента i
Пример элемента img
Пример элемента ins
Пример элемента kbd
Пример элемента mark

Пример элемента q внутри элемента q
Пример элемента s
Пример элемента samp
Пример элемента small
Пример элемента span
Пример элемента strong
Пример элемента sub
Пример элемента sup
Пример элемента u
Пример элемента var

Возможность расширения Normalize

Normalize.css является отличной отправной точкой для дизайна вашего проекта, но некоторые HTML-элементы, такие как формы, таблицы и меню требуют больше стилей, чем даёт Normalize.

В Pure заданы свои собственные стили для этих элементов с сохранением минимального размера и возможности самостоятельной настройки для своего сайта или требований приложений. Ознакомьтесь с CSS для Форм, Таблиц и Меню.