Основа

Использование Normalize.css, готовой для HTML5 альтернативы сбросу CSS.

Основание

Все модули в Pure строятся поверх Normalize.css . Это наш базовый уровень для поддержания определенной степени кроссбраузерности. Вы можете загрузить 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 поставляется с отличной документацией и подробным руководством, объясняющим, чем он отличается от традиционного сброса.

Дополнительно

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

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

Добавьте 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.

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