На чистом css: Мяч на чистом CSS | Frontender Magazine

07.05.2021 alexxlab

Содержание

Игра на чистом CSS, без грязной HTML-разметки — CSS-LIVE

Примерами «чего-либо на чистом CSS» сегодня удивить трудно, но обычно это значит лишь «без скриптов», т.е. с хаками в разметке, типа вставленных в строго определенные места невидимых чекбоксов. Отчего разметка становится нелогичной и негибкой. Так что «чистый CSS» — это почти всегда «грязный HTML». Хейдон Пикеринг тоже настолько устал от этого, что высказался в твиттере:

Если вы заявляете, что сделали что-то на «чистом CSS», я даже видеть не хочу HTML. Удачи.

Многие читатели прицепились к фразе «видеть не хочу HTML» буквально. Действительно, хотя CSS-оформление привязано к DOM-элементам, CSS может работать и с минимумом HTML-разметки. А то и вообще без нее! Сразу несколько человек вспомнили старинный пример Матиаса Байненса. Он использует псевдоэлемент для элемента body (для которого необязательны и закрывающий, и открывающий теги, т.е. он присутствует в DOM независимо от наличия соотв.

тегов в разметке!) плюс малоизвестный (и поддерживаемый пока только в Firefox и старой Опере) HTTP-заголовок Link, позволяющий браузеру ссылаться на файл стилей без тега <link>. Но сами комментаторы были вынуждены признать, что такой подход слишком ограничен, чтобы быть полезным.

Но кто ж готов мириться с ограничениями, тем более вечером в пятницу! Уж точно не ваш покорный слуга:). Вызов принят: что если не полезное, то по крайней мере интересное/занятное можно сделать в наши дни на чистом CSS, по возможности (в идеале — вообще) не используя разметку?

Итогом моих небольших экспериментов стал нехитрый набросок «ремейка» популярной несколько лет назад игры на реакцию, в которой надо как можно дольше удерживать курсор в игровом поле, избегая «столкновения» с летающими объектами. Время, в течение которого игроку это удавалось, фиксируется секундомером. Вот он:

See the Pen Игра на чистом CSS без JS и HTML-разметки (проверка идеи) by Ilya Streltsyn (@SelenIT) on CodePen.

Чтобы начать игру заново, нужно нажать «Rerun» (а в отдельном примере — обновить страницу).

Использована только стандартная базовая разметка от CodePen. Но та же логика будет работать и без нее. Для работы в Chrome достаточно одного лишь тега

<link>, а в Firefox даже он не нужен — его можно заменить HTTP-заголовком. Не верите — убедитесь сами! А заодно оцените такую диковинку, как псевдоэлемент в псевдоэлементе:)

Какие «секретные ингредиенты» тут использованы

Элементы html, head и body, которые всегда есть в DOM, даже если в разметке нет соотв. тегов. Справедливости ради, как отметил и Хейдон, это всё-таки HTML-элементы — но без HTML-тегов в разметке мы обошлись.
По паре псевдоэлементов ::before и ::after для каждого из них. Как раз хватило на 4 «летающих блока», секундомер и маленький текстовый заголовок.
Свойство pointer-events. Оно пришло из SVG, поэтому поддерживается без префикса, но современные браузеры уверенно применяют его и в HTML (правда, со стандартизацией у него есть проблемы, из CSS UI 3-го уровня его выбросили, а в 4-й пока не перенесли… но главное, что работает:). Позволило сделать так, чтобы на наведение курсора реагировали только псевдоэлементы, но не сами элементы.
Обычные анимации. Для всех 4 «летающих блоков» в примере использована одна и та же анимация, но с разными периодами. Периоды соотносятся как простые числа, поэтому картина в целом выглядит достаточно хаотичной. Но можно сделать анимацию разной и более сложной. В теории, можно было бы анимировать как сами head и body, так и их псевдоэлементы, чтобы получить еще более хаотичное движение — но не стоит, потому что это потребует перерисовки больших площадей, а значит, может тормозить.
Пошаговая (steps) анимация с единицей ch. Основа «секундомера». Идея почерпнута из старого примера Лии Веру.
Один из псевдоэлементов приходится использовать в двух качествах сразу — как «летающий блок» и как второй (остановленный) секундомер. И использовать на нем две анимации одновременно (вторую — через наследуемое от родителя свойство). Был бы в CSS родительский селектор (или псевдокласс-функция :has(), как в новых редакциях селекторов 4 уровня), без этого удалось бы обойтись.
Сохранение состояния с помощью очень большой задержки при transition (с оговорками, см. ниже).

Что так и не получилось

При уводе курсора с поля после окончания игры Chrome и Firefox ведут себя по-разному: первый возобновляет анимацию (отчего секундомер становится похож на скринсейвер времен Windows 95), второй нет. Видимо, дело во взаимодействии анимаций с transition. Интересно, кто из браузеров прав?
При анимации сдвига текста Firefox оказался крайне чувствительным к малейшим неточностям размера шрифта: если задать шрифт не точно в пикселях, а в vmin или даже в em, из-за накопления ошибки округления текст постепенно смещался и начинала вылезать следующая цифра.
IE11 отказался анимировать смещения в единицах vmin, испортил анимацию секундомера (к сожалению, похоже, единица ch там просто сломана) и, что непонятнее и неприятнее всего, не соблюдает задержку перехода при уводе курсора с поля. Первые две проблемы я почти смог побороть в отдельной версии (хотя анимация в IE там всё равно выглядит странно), последнюю так и не смог. Может быть, у вас получится лучше?

При уводе курсора с игрового поля секундомер сбрасывается на 0. Хотя, возможно, это не такой уж баг — ведь такое «бегство» можно расценить как то, что игрок сдался:)

Конечно же, это проверка идеи, сделанная исключительно ради интереса и удовольствия… а также демонстрации возможностей соврменного CSS. Как видите, время, когда чистый CSS сможет быть полезным сам по себе, без необходимости в грязном HTML, возможно, уже не за горами!

P.S. Это тоже может быть интересно:

20 потрясающих CSS3 техник, библиотек и примеров

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

В список также включены англоязычные статьи, обрисовывающие новые фичи в CSS3 и несколько полезных библиотек, наполненных разными фишками.

Для полного эффекта от просмотра ссылок из данной статьи рекомендуем пользоваться последней версией современного браузера, например, хромом.

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

На этом демо-сайте можно сгенерировать крайне реалистичные облака и даже поиграть с ними. Демо-код достаточно сложный, поскольку использует 3D-Transform функции CSS3 и JavaScript. Подробную инструкцию на английском можно прочитать здесь.

Здесь собраны логотипы известных компаний: изготавливались логотипы хардкорно, только с помощью CSS. При наведении мышкой на лого вы увидите, какие именно CSS-свойства использовались для создания изображений. На github можно посмотреть полный код.

Ещё один пример творческого подхода к CSS. Каждый пост этого tumblr-журнала представляет собой анимированную букву алфавита, оживающую с помощью CSS.

Простая, но стильная панель навигации. Её CSS-код состоит всего из 65 строк, но это не мешает ей оставаться эффектной. Глубина пространства создаётся опять же за счёт новых функций перехода и трансформации в CSS3.

Это CSS-версия простой Google Doodle анимации. Выполнена очень аккуратно, работает быстро, и никакого JavaScript!

Ещё один классный проект, посвящённый слайдерам для изображений. Он тоже работает как часы, не содержит ни капли JavaScript. Проект состоит из четырёх разных вариантов реализации и учебника. Руководство на английском можно почитать здесь.

Славное анимированное колечко, выполненное с помощью одного-единственного div-элемента и менее сотни строк CSS-кода.

Очередная демонстрация использования последних функций CSS3 — переходов, фильтров, 3D-трансформаций и проч. Сама по себе демонстрация не очень впечатляет, но вы только подумайте, сколько классного можно сделать, добавив ещё пару слоёв.

А вот несколько полезных статей и руководств о новых функциях CSS3.

Подробная статья о новых “гибких” контейнерах (так называемых “флексбоксах” — flexbox). Флексбоксы — это новый способ вёрстки страниц в CSS. Это удобное средство для изменения ширины, высоты и расположения HTML-элементов на странице. Если лень читать на английском много, можно прочесть краткую шпаргалку.

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

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

Одна из лучших статей в мире о CSS. В ней представлены CSS-формы и множество примеров того, как их создавать и использовать. Читать немедленно.

В этом руководстве авторы объясняют, как создать простые индикаторы выполнения процесса без использования сложных скриптов. Градиенты, полоски, эффектные отблески: вот это всё сделано с помощью CSS3-техник. Конечный результат выглядит безупречно.

Очень популярный на github проект. И не зря! Всё выполнено на CSS и значительно повышает производительность веб-проекта.

Spinkit — это коллекция настраиваемых индикаторов загрузки. А индикаторы загрузки нужны всем.

Что же вы увидите, перейдя по ссылке? Большую коллекцию кнопок.

Классное приложение, которое позволяет настроить кнопки-“выключатели” под себя и скопировать полученный CSS-код. А ещё там есть кнопки-“выключатели”, используемые в популярных ОС.

СSS-библиотека подсказок для сайта, не требующих JavaScript.

Проект Colors.css нужен для тех, кто ненавидит подборку hex-кодов цветов. Это приятная альтернатива встроенному цветовому редактору.

Итак, надеемся, эти примеры и советы вдохновят вас на создание интересных и удобных CSS-поделок!

Рандомизатор на чистом CSS

Каждый раз когда мы нажимаем на одну из игральных карт, нам будет выпадать новая: иногда король червей, иногда пиковый туз, иногда бубновая девятка — в общем, любая карта из стандартной колоды.

При этом у CSS нет ни «random» функций, ни её Math.random() эквивалента, ни способов генерации случайных чисел или цветов.

Так что же тут происходит?

Элементы в CSS не могут вести себя рандомно, поскольку попросту не существует random-функции. Но мы можем создать иллюзию случайности, используя анимацию.

Игральные карты из примера выше очень быстро меняются, и когда мы нажимаем на одну из карт, анимация останавливается, а карта переворачивается.

Анимация настолько быстрая, что она становится источником случайности: карты в примере меняются 52 раза за 1 секунду.

В основе нашей анимации лежит эксперимент в квантовой физике, известный как Кот Шредингера. Элементы находятся в обоих состояниях одновременно, и только через взаимодействие можно заставить их принять одно из двух этих состояний.

Кот Шредингера, на этот раз живой.

Именно такой прием тут и используется: анимация настолько быстрая, что пользователь не видит отдельных карт и может остановить их постоянное изменение только с помощью нажатия.

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

Ну и это в принципе практически невозможно сделать, поскольку анимация очень быстрая.

Выводы

У этого необычного способа рандома есть несколько преимуществ. Например, если у нас нет доступа к JavaScript, мы можем обойтись без него, ограничившись только CSS. К тому же это довольно неочевидный прием, поэтому ни коллеги, ни пользователи не смогут сходу его раскусить.

Надеемся, что вам было интересно. Мы считаем, что это отличный пример того, как в CSS можно по полной применять свою креативность!

Рандомизатор на чистом CSS. Можно ли сделать рандомизатор… | by Alexey Larionov | NOP::Nuances of Programming

Так что же тут происходит?

Кот Шредингера, на этот раз живой.

Ну и это в принципе практически невозможно сделать, поскольку анимация очень быстрая.

Выводы

Адаптивная таблица на чистом CSS

HTML/CSS 26 октября 20172 min

Привет! В этой статье расскажу, как можно адаптировать html-таблицу с помощью CSS

Введение

Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.

Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.

Первый способ адаптации

<div>
<table>
<thead>
<tr>
<th>Услуга</th>
<th>Описание</th>
<th>Цена</th>
<th>Скидка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Мобильная верстка</td>
<td>Верстка под телефоны</td>
<td>$3000</td>
<td>50%</td>
</tr>
<tr>
<td>Посадка на CMS WordPress</td>
<td>Создание сайта с админ. панелью</td>
<td>$3000</td>
<td>30%</td>
</tr>
</tbody>
</table>
</div>

Стилизуем все это дело (главным образом нам нужно стилизовать . table-wrap).

.table-wrap {
text-align: center;
display: inline-block;
background-color: #fff;
padding: 2rem 2rem;
color: #000;
}@media screen and (max-width: 600px) {
.table-wrap {
overflow-y: scroll;
}
}

В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом. Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.

Второй способ адаптации

Для начала поменяем разметку:

<div>
<table>
<thead>
<tr>
<th>Услуга</th>
<th>Описание</th>
<th>Цена</th>
<th>Скидка</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Услуга">Мобильная верстка</td>
<td data-label="Описание">Верстка под телефоны</td>
<td data-label="Цена">$3000</td>
<td data-label="Скидка">50%</td>
</tr>
<tr>
<td data-label="Услуга">Посадка на CMS WordPress</td>
<td data-label="Описание">Создание сайта с админ.  панелью</td>
<td data-label="Цена">$3000</td>
<td data-label="Скидка">30%</td>
</tr>
</tbody>
</table>
</div>

В принципе, вы можете с помощью js сделать тоже самое, пробежавшись по всем td.

Итак, раздали каждому столбцу атрибут data-label, который нам пригодится в будущем.

Задаем базовые стили:

body {
text-align: center;
padding-top: 10%;
font-family: sans-serif;
background-image: url('bg.jpg');
background-size: cover;
height: 100vh;
color: #fff;}
.table-wrap {
text-align: center;
display: inline-block;
background-color: #fff;
padding: 2rem 2rem;
color: #000;
}
table {
border: 1px solid #ccc;
width: 100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th, table td {
padding: 10px;
text-align: center;
border-right: 1px solid #ddd;
}
table th {
color: #fff;
background-color: #444;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}

Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело. Как это исправить? добавляем стили:

@media screen and (max-width: 600px) {
table {
border: 0;
}table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
border-right: 1px solid transparent;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}

Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса ::before мы присоединяем к левому краю наши data-атрибуты. И все получилось. Пример посмотрите в пене:

Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!

Надеюсь, Вам было интересно читать данную информацию. До скорых встреч)

Об авторе блога

MaxGraph

Автор. Веб-разработчик. Фрилансер. Преподаватель в онлайн-университете.

Портфолио: https://maxgraph.ru/
Добавляйтесь в друзья VK! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика.

Библиотека для стилизации чекбоксов на чистом css

Представляем на ваш суд отличную легкую библиотеку, созданную lokesh-coder и предназначенную для стилизации и кастомизации чекбоксов на чистом css.

Вот отличный пример, демонстрирующий возможности данной библиотеки:

Преимущества кастомизации чекбоксов и радиокнопок с помощью данной библиотеки:

Базовые
- Фигуры — Квадрат, скругленная, круг
- Варианты — Стандартный, заполненный, с тонкой обводкой
- Цвета — primary, success, info, warning и danger
- Варианты заполнения — заливка или обводка
- Анимации — плавная, tada, jelly, pulse, с поворотом
Переключатель в стиле iOS
Адаптивность
Отсутствие javascript
Кастомный иконочный шрифт
Поддержка изображений
SVG иконки
Возможность переключения между иконками\svg\изображениями
«Блокировка» для input type=»checkbox»
Поведения — focus, hover, indeterminate
Поддержка фреймворков таких как Bootstrap, Foundation, Semantic UI, Bulma . ..
Кастомизация с помощью SCSS
Поддержка всех современных браузеров, в том числе мобильных устройств
Стили для печати

Установка

Установка через npm или yarn

> npm install pretty-checkbox // or
> yarn add pretty-checkbox

После этого добавить pretty-checkbox.min.css в html

Подключение без скачивания через CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css"/>

Ручная загрузка

Загрузка исходного кода с GitHub

SCSS

Также можете подключить pretty-checkbox.scss в ваш главный scss файл

@import '~pretty-checkbox/src/pretty-checkbox.scss';

Использование

Pretty Checkbox имеет множество встроенных стилей:

Название класса	Описание
p-default	Базовый стиль
p-switch	Переключатель в стиле iOS
p-icon	Для вставки иконочного шрифта
p-svg	Для вставки svg файла или разметки
p-image	Для вставки изображения

И три возможных формы: p-round, p-curve, p-square (по умолчанию)

Пример кастомизированного чекбокса на codepen

See the Pen default pretty-checkbox by Alexey (@leshkacho) on CodePen.

Базовый чекбокс имеет три варианта начертания p-fill p-thick p-outline (по умолчанию)

Эти стили можно комбинировать:

See the Pen basic styles and combines pretty-checboxes by Alexey (@leshkacho) on CodePen.

Рассмотрим checkbox в виде переключателя в стиле iOS

See the Pen KZwoyq by Alexey (@leshkacho) on CodePen.

Вставка иконок, svg, и картинок

<!--Иконочный шрифт-->
	  <div>
		<input type="checkbox">
		<div>
		  <i></i>
		  <label>Check me</label>
		</div>
	  </div>
<!--svg-->
	  <div>
		<input type="checkbox">
		<div>
		  <img src="file.svg" />
		  <label>Check me</label>
		</div>
	  </div> <!--Так же поддерживается вставка svg с помощью тегов в тело документа-->
<!--Картинка-->
  <div>
    <input type="checkbox" />
    <div>
      <img src="/check.png" />
      <label>Block</label>
    </div>
  </div>

Цветовая схема

Существует 5 основных цветов для отображения чекбокса: p-primary p-success p-warning p-info p-danger

А так же 5 цветов для линии обводки

p-primary-o p-success-o p-warning-o p-info-o p-danger-o

Подробное представление:

See the Pen YYPaOK by Alexey (@leshkacho) on CodePen.

Анимации

See the Pen pretty-checkboxes animation by Alexey (@leshkacho) on CodePen.

Добавление анимация на чекбокс происходит путем добавления описанных в примере классов

Другие возможности

Переключатели

Возможно создание переключателей с заменой текста, иконки только на css!

Происходит это следующим образом

See the Pen toggle pretty-checkboxes by Alexey (@leshkacho) on CodePen.

Можно использовать разные иконки для обоих состояний переключателя

Кастомизация радио-кнопок на чистом css без js

радио кнопки добавляются идентично чекбоксам и с ними работают такие же классы

GitHub проекта Полная документация Скачать архивом с GitHub

Как сделать вкладки на чистом CSS и HTML

Приведу интересное решение по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Здесь ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.

Код CSS

<style>

.notebook2 {
width: 640px;
height: 450px;
position: relative;
}

.notebook2 > input {

display: none;

}

.notebook2 > div {

position: absolute;

box-sizing: border-box;

top: 30px;

left: 0px;

bottom: 0px;

right: 0px;

border-radius: 10px;

padding: 0px 1em;

z-index: 0;

background-color: #666;

transition: all 0.5s ease 0s, z-index 0s 0.5s;

}

.notebook2 > div > *:first-child {

display: block;

position: absolute;

box-sizing: border-box;

top: -30px;

width: 150px;

height: 30px;

font-family: Arial;

font-size: 13px;

border-radius: 10px 10px 0px 0px;

background-color: inherit;

color: #fff;

line-height: 28px;

cursor: pointer;

text-align: center;

transition: all 0.5s ease 0s;

}

.notebook2 > div > *:not(:first-child) {

opacity: 0;

transition: all 0.5s ease 0s;

}

.notebook2 > div:nth-of-type(1) > *:first-child { left: 20px; }

.notebook2 > div:nth-of-type(2) > *:first-child { left: 170px; }

.notebook2 > div:nth-of-type(3) > *:first-child { left: 320px; }

.notebook2 > div:nth-of-type(4) > *:first-child { left: 470px; }

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),

.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2),

.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3),

.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) {

z-index: 10;

background-color: #ccc;

transition: all 0.5s ease 0.5s, z-index 0s 0.5s;

}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,

.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,

.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,

.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child {

color: #333;

transition: all 0.5s ease 0.5s;

}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),

.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),

.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),

.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child) {

opacity: 1;

transition: all 0.5s ease 0.5s;

}

</style>

Код HTML

<div>

<div>

<label for=»notebook2a_1″>Первая вкладка</label>

<p>Это первая вкладка с котом.</p>

</div>

<div>

<label for=»notebook2a_2″>Вторая вкладка</label>

<p>Это вторая вкладка с лисой</p>

</div>

<div>

<label for=»notebook2a_3″>Третья вкладка</label>

<p>Это третья вкладка с волком.</p>

</div>

<div>

<label for=»notebook2a_4″>Четвертая вкладка</label>

<p>Это четвёртая вкладка с рысью</p>

</div>

Grids — Pure

Введение в Pure Grids

Pure Grids просты в работе и очень эффективны. Следует иметь в виду несколько простых концепций:

Классы сетки и классы единиц: состоят из двух типов классов: класс сетки ( pure-g ) и классы единиц ( pure-u ). или pure-u- * )
Ширина единиц является дробной.: Единицы имеют различные имена классов, которые представляют их ширину.Например, pure-u-1-2 имеет ширину 50%, тогда как pure-u-1-5 будет иметь ширину 20%.
Все дочерние элементы сетки должны быть единицами: Дочерние элементы, содержащиеся в элементе с именем класса pure-g , должны быть единицей сетки с именем класса pure-u или pure-u- * .
Контент помещается в блоки сетки: Весь контент, который виден людям, должен содержаться внутри блока сетки.Это гарантирует, что контент будет отображаться правильно.

При установке семейства шрифтов в вашем проекте обязательно ознакомьтесь с разделом об использовании сеток с вашим семейством шрифтов.

Начнем с простого примера. Вот сетка с тремя столбцами:

  
     Третьи
 
     Третьи
 
     Третьи

Grids Units S sizes

Pure поставляется с сеткой на основе 5th и 24th .Ниже показаны доступные единицы, которые могут быть добавлены к имени класса pure-u- * , где * — одна из долей единиц, перечисленных ниже. Например, имя класса блока для ширины 50%: pure-u-1-2 .

Модули на основе 5ths

Модули на основе 24ths

Размеры нестандартных модулей

Мы работаем над созданием инструментов, позволяющих пользователям настраивать Pure Grids. Первые низкоуровневые инструменты, подключаемый модуль Pure Grids Rework Plugin , доступны для использования сегодня — мы используем этот инструмент для генерации встроенных размеров модулей Pure.

Pure Responsive Grids

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

Включение на вашу страницу

Поскольку медиа-запросы не могут быть перезаписаны, мы не включаем сеточную систему как часть pure.css . Вам нужно будет вытащить его как отдельный файл CSS. Вы можете сделать это, добавив на свою страницу следующий тег .

Обычная сетка Pure против адаптивной сетки

Лучший способ понять разницу между обычной сеткой Pure и адаптивной сеткой — это на примере. Фрагмент ниже показывает, как пишутся обычные сетки Pure. Эти сетки не отвечают. Они всегда будут иметь ширину : 33,33% , независимо от ширины экрана.

  
    ... 
     ... 
     ...

Теперь давайте посмотрим на адаптивную сетку. Элементы в этой сетке будут иметь ширину : 100%, на маленьких экранах, но уменьшатся до ширины : 33,33% на экранах среднего размера и выше.

  
     ... 
     ... 
     ...

Медиа-запросы по умолчанию

При использовании адаптивных сеток вы можете управлять поведением сетки в определенных точках останова, добавляя имена классов.Адаптивные сетки Pure по умолчанию имеют следующие имена классов и точки останова медиа-запросов.

Ключ	CSS Media Query	Применимо	Имя класса
Нет	Нет			`см`	`@ media screen и (min-width: 35.5em)`	≥ 568px	`.pure-u- sm - *`
`md`	`@media screen and (min-width: 48em)`	≥ 768px	`.pure-u- md - *`
`lg`	`@media screen and (min-width: 64em)`	≥ 1024px	`.pure-u- lg - *`
`xl`	`@media screen и (min-width: 80em)`	≥ 1280px	`.pure-u- xl - *`

Использование относительных единиц для ширины

Вы могли заметить, что мы используем em для ширины CSS Media Query по умолчанию вместо пикселей . Это было осознанное решение, поскольку оно позволяет Media Queries правильно реагировать, когда люди масштабируют веб-страницу. Ознакомьтесь с этой статьей Брэда Фроста, чтобы получить некоторую справочную информацию об использовании относительных единиц в Media Queries.

Если вы действительно хотите использовать единицы, отличные от em , вы всегда можете изменить параметры Media Queries по умолчанию на странице «Начало работы».Преобразование из em в px довольно просто:

* Преобразование em в px основано на размере шрифта браузера по умолчанию, который обычно составляет 16px , но может быть изменен пользователем в настройки своего браузера.

Пример чистых адаптивных сеток

В приведенном ниже примере используется адаптивная сетка Pure для создания строки с четырьмя столбцами. Столбцы складываются на маленьких экранах, занимают ширину : 50%, на экранах среднего размера и ширину : 25%, на больших экранах.

Это делается путем добавления класса .pure-u-1 для маленьких экранов, .pure-u-md-1-2 для экранов среднего размера и .pure-u-lg-1- 4 для больших экранов. Измените размер страницы, чтобы сетка соответствовала размеру экрана.

Grids on Mobile

Грид-система Pure по умолчанию ориентирована на мобильные устройства. Если вы хотите иметь сетку на маленьких экранах, просто используйте имена классов pure-u- * в своих элементах.

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

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

Применение отступов и границ к элементам сетки

Чтобы добавить границы и отступы к чистым сеткам, у вас есть два варианта. Первый вариант — вложить

в каждый блок Grid и стилизовать дочерний контейнер:

Второй вариант — добавить границы и отступы непосредственно к единице сетки. Обычно это может привести к нарушению макета, но вы можете легко избежать этой проблемы, увеличив поведение самой сетки с помощью правила box-sizing: border-box :

  

...


    ... 
     ...

Использование box-sizing: border-box сохраняет вашу разметку более чистой, но имеет один незначительный недостаток. Установка этого свойства для всех единиц сетки затрудняет переопределение или сброс значения позже. В качестве неоптимизированной библиотеки Pure позволяет box-sizing сохранять значение по умолчанию content-box и оставляет выбор за вами.

Использование сеток с вашим семейством шрифтов

Чистые сетки используют определенный стек шрифтов для обеспечения максимальной совместимости с ОС / браузером, и по умолчанию элементы сетки будут иметь font-family: sans-serif; Применено — это стандартный стек шрифтов Pure’s Base (Normalize.css) применяется к элементам ,