Если вы какое-то время работали с каскадными таблицами стилей (CSS), вы, вероятно, заметили тенденцию к более простым платформам CSS, которые выполняют свою работу. В этой статье представлен один из наиболее ярких примеров. Pure CSS — это модульная, адаптивная среда, которая вносит свой вклад в разработку CSS с минимальным, легким и в то же время всеобъемлющим подходом. Наряду с TailWind CSS, Pure предлагает интересное переосмысление того, как мы стилизуем веб-страницы. Он также популярен: на момент написания этой статьи он получил более 22 000 звезд на GitHub.
Разработка CSS для мобильных устройств
С самого начала Pure ясно дает понять, что он ориентирован на мобильные устройства и поставляется в виде файла небольшого размера: 3,7 КБ для всего пакета в сжатом виде. Платформа задумана как плоская и расширяемая, предлагающая простой набор инструментов верхнего уровня, которые вы можете использовать и расширять при необходимости. Он построен поверх normalize.cssкоторый помогает сгладить любые неровности, связанные с кросс-браузерностью.
Использовать Pure просто: вы можете включить его самостоятельно в HTML-страницу или использовать из сети доставки контента.
Фреймворк состоит из нескольких модулей:
- База
- Сетки
- Формы
- Кнопки
- Таблицы
- Меню
Мы рассмотрим каждый из них по очереди.
Базовый модуль
Как я уже упоминал, Pure построен на основе Normalize.css. Он добавляет к этому базовому модулю пару полезных функций.
hidden атрибут используется для применения скрытого стиля (с атрибутом !important модификатор, применяемый платформой), как показано в листинге 1.
Листинг 1. Атрибут «скрытый»
<input type="text" name="token" hidden>
.pure-img Класс используется для быстрого создания адаптивного изображения.
Расположение сетки
Сетка — это основа адаптивного макета Pure. Подобно фундаментальной идее Bootstrap, но урезанной до самого необходимого, классы макета Pure позволяют вам многое сделать с очень небольшим количеством синтаксиса. Вы можете увидеть базовый макет в листинге 2 и просмотреть его здесь.
Листинг 2. Стилизация простого макета сетки в Pure CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css" />
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">
<style>
sector { min-height: 150px; min-width: 199px; }
sector:nth-of-type(1) { background: IndianRed; }
sector:nth-of-type(2) { background: Moccasin; }
sector:nth-of-type(3n) { background: thistle; }
sector:nth-of-type(4) { background: seagreen; }
sector:nth-of-type(5) { background: DarkSlateBlue; }
sector:nth-of-type(7) { background: darkviolet; }
</style>
</head>
<body>
<div class="pure-g">
<sector class="pure-u-1-2 pure-u-md-1-3">Mt. Everest</sector>
<sector class="pure-u-1-2 pure-u-md-1-3">K2</sector>
<sector class="pure-u-1 pure-u-md-1-3">Kangchenjunga</sector>
<sector class="pure-u-1 pure-u-md-1-2">Lhotse</sector>
<sector class="pure-u-1 pure-u-md-1-2">Makalu</sector>
<sector class="pure-u-1 pure-u-md-1-2">Cho Oyu</sector>
<sector class="pure-u-1 pure-u-md-1-2">Dhaulagiri I</sector>
</div>
</body>
</html>
Наряду с простыми стилями для раскрашивания различных частей сетки, разметка и CSS в листинге 2 создают сетку с тремя столбцами, расположенными в двух столбцах для средних и больших дисплеев, и двумя столбцами, расположенными в одном столбце для всего меньшего. Посмотреть вживую можно здесь. Если вы измените размер окна браузера, вы увидите, что макет изменится на другой макет. На рис. 1 показаны два макета: макет экрана большего размера вверху и экран меньшего размера внизу.
ИДГРисунок 1. Два вида адаптивного макета сетки
Первым шагом к созданию адаптивного макета является установка pure-g класс в контейнере. Затем определите свои столбцы с помощью pure-u-* обозначение, например:
pure-u-<DISPLAY-SIZE>-<COLUMN-SIZE>.
<DISPLAY-SIZE> позволяет вам определить размер экрана устройства, на котором <COLUMN-SIZE> применяется. Если вы не установили размер дисплея, размер столбца будет использоваться по умолчанию и будет применяться начиная с самых маленьких устройств. Это известно как адаптивный макет, ориентированный на мобильные устройства.
Вы можете увидеть это в действии с помощью pure-u-1 и pure-u-1-2 классов в секторах в листинге 2. Чтобы определить макет на устройствах среднего и большего размера, макет использует pure-u-md-1-3 и pure-u-md-1-2 занятия.
Вы можете использовать размеры столбцов, чтобы определить, какую долю доступного пространства будет занимать раздел. цифра 1 означает 100%, а каждое число после определяет дробь: 1-2 это половина, 1-3 составляет одну треть и так далее. Например, в макете листинга 2 класс pure-u-md-1-3 заявляет: при среднем размере экрана этот сегмент будет занимать треть доступной ширины.
Вы можете найти набор размеров устройств с их шириной в пикселях в документации по адаптивным сеткам Pure CSS. Pure предлагает как 24-ю, так и 5-ю сетку.
Формы
Pure включает несколько классов для быстрого стилизации форм. Поддержка форм подразделяется на следующие категории:
- По умолчанию: Горизонтальная форма
- Сложенный: Вертикальная форма
- Выровнено: Вертикальная форма с расположенными рядом этикетками.
- Многоколоночный (с чистыми сетками): Адаптивная форма
- Сгруппированные входы: Форма с разделами
- Входной размер: Контроль размера ввода
- Необходимые данные: Стилизация обязательных полей.
- Отключенные входы: Отключены стили полей.
- Входы только для чтения: стиль только для чтения.
- Закругленные входы: Закругленные поля
- Флажки и радио: Традиционно привередливый стиль ввода.
Листинг 3 представляет собой пример составной (вертикальной) формы.
Листинг 3. Стилизация составной формы в Pure CSS
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label for="stacked-email">Email</label>
<input type="email" id="stacked-email" placeholder="Email" />
<span class="pure-form-message">This is a required field.</span>
<label for="stacked-password">Password</label>
<input type="password" id="stacked-password" placeholder="Password" />
<label for="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="stacked-remember" class="pure-checkbox">
<input type="checkbox" id="stacked-remember" /> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
Обратите внимание на pure-form и pure-form-stacked классы в самой форме.
Кнопки
Pure предлагает простые способы оформления кнопок по умолчанию, отключенных и активных кнопок. Вы также можете настроить эти компоненты с помощью стилей с ограниченной областью действия. В листинге 4, взятом из документации Pure, приведен пример изменения углов и цветов кнопок.
Листинг 4. Настраиваемые кнопки
<div>
<style scoped="">
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: green;
}
.button-error {
Background: maroon;
}
.button-warning {
background: orange;
}
.button-secondary {
background: lightblue;
}
</style>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
</div>
Основная идея здесь — создавать стили, которые добавляются в базу. pure-button стиль. Они используются для переопределения стилей по умолчанию, обеспечивая цвета и закругленные углы. Например, button-success класс определяет color, border-radius, text-shadowи background цвет зеленый.
Таблицы
Pure поддерживает базовые стили таблиц. Чтобы использовать их, просто добавьте pure-table class к самой таблице. В Pure также есть несколько вариантов того, как границы и заливка строк будут выглядеть на таблице.
Меню
Pure включает в себя хороший набор стилей меню «из коробки»:
- Вертикальное меню
- Горизонтальное меню
- Выбранные и отключенные элементы
- Выпадающие списки
- Вертикальное меню с подменю
- Прокручиваемое горизонтальное меню
- Прокручиваемое вертикальное меню
- Адаптивные меню, которые скрывают
Все они работают так, как и следовало ожидать. Вы можете найти примеры здесь. В частности, удобны отзывчивая боковая панель и вертикально-горизонтальные меню.
Расширение чистого CSS
В дополнение к солидному набору функций, Pure можно расширять различными способами.
Добавить собственные классы рядом с классами Pure CSS довольно легко. Вкратце вы видели это на примере кнопок, стилизованных в листинге 4, но добавить настройки для всего сайта почти так же легко.
Вы можете использовать плагины Grunt для расширения Pure и интеграции с существующим CSS. Платформа также в основном построена в виде плагинов Rework, поэтому вы можете интегрироваться с другими инструментами Rework.
Наконец, вы можете расширить Pure для работы с другими библиотеками, такими как Bootstrap. Вы можете использовать основы Pure CSS, которые вы видели здесь, а затем использовать то, что вам нужно, из более обширного инструмента, такого как Bootstrap. Это дает вам минимально возможную занимаемую площадь со всеми необходимыми функциями и функциями.
