Normalize.css как основа Pure

Normalize.css файл с набором инструкций, являющимся альтернативой сброса CSS в HTML5/ Все модули в Pure строятся поверх Normalize.css . Это базовый уровень для поддержания максимальной степени кроссбраузерности.

Нормализ не является обязательным элементом. Его можно и не устанавливать, но тогда вам нужно будет самостоятельно следить за тем, чтобы определённые HTML теги и формы вели себя и отображались одинаково в разных браузерах.

Для установки Normalize.css необходимо добавить элемент < link >: следующего содержания

< link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">

Чуть подробнее о Normalize.css

Normalize.css - это проект с открытым исходным кодом, созданный Николасом Галлахером и Джонатаном Нилом . По их собственным словам:

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

Normalize.css поставляется с отличной документацией и подробным руководством, объясняющим, чем он отличается от традиционного сброса.

Pure + Normalize

В дополнение к правилам Normalize.css, в Pure добавлены ещё некоторые стили, используемые в большинстве веб-сайтов.

Скрытие элементов

Добавьте атрибут hidden к элементу HTML, чтобы скрыть его с экрана через display: none !important;. В качестве альтернативы, для совместимости со старым IE, вы можете использовать имя класса CSS .hidden.

< input type="text" name="_csrf" hidden>

Адаптивные изображения

Добавьте имя класса .pure-img к элементу < img >, чтобы он масштабировался вместе с окном просмотра. Это удобно при создании адаптивных веб-сайтов.

< img class="pure-img" src="...">

Выход за рамки нормализации

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

Поэтому в Pure для некоторых html-элементов были добавлены собственные стили, сохранив при этом их минимальный размер. Эти дополнения можно легко лёгко перенастроить (в случае необходимости) в соответствии с потребностями сайта или приложения. Более подробно об этих элементах будет рассказанов в следущих обзорах.