Фреймворки позволяют легко создавать сайты. Возможно, вы уже использовали популярные фреймворки, такие как Bootstrap, в своих проектах. Сегодня я познакомлю вас с Pure.css (просто «Pure»), небольшим фреймворком, состоящим из модулей CSS. Все его модули, вместе взятые, весят менее 4,0 КБ, если их обслуживать в минимизированном и gzip’d. Вы можете сохранить еще больше байтов, если решите использовать только один или два модуля.
Минимальный стиль Pure гарантирует, что вы можете настроить внешний вид элементов в соответствии с вашими потребностями без особых усилий. Вы можете включить Pure в свои проекты, используя следующую строку:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> Представляем грид-систему
Система сетки в Pure значительно отличается от системы Bootstrap, и с ней легко работать, когда вы пройдете основы. Есть несколько вещей, которые вы должны иметь в виду, прежде чем продолжить:
- Pure имеет класс сетки-оболочки, называемый
pure-gи классы модулей, называемыеpure-u-*. Убедитесь, что весь ваш контент находится внутри блоков сетки для правильной визуализации. - Ширина рассчитывается на основе фракций. Сами фракции определяются именами классов. Например,
pure-u-2-5имеет ширину 40%. - Все дочерние элементы в элементе
pure-gдолжны иметь имя классаpure-uилиpure-u-*.
Используя дополнительные имена классов, такие как pure-u-md-2-3 вы можете контролировать ширину различных элементов в определенных точках останова. Взгляните на следующий HTML:
<div class="pure-g"> <div class="pure-u-1 pure-u-md-1-5"> One </div> <div class="pure-u-1 pure-u-md-2-5"> Two </div> <div class="pure-u-1 pure-u-md-2-5"> Three </div> </div>
Приведенный выше код выполняет следующие действия: Когда размер экрана меньше 568 пикселей, все div будут иметь ширину 100%. Когда размер экрана выше средней категории экрана (768 пикселей), первый div устанавливается на ширину 20%, в то время как другие имеют ширину 40% каждый.
Сетки основаны на 5-й и 24-й фракциях. Например, в имени класса pure-ux-24 x может быть любым от 1 до 24 включительно. Кроме того, pure-u-1-12 и pure-u-2-24 одинаковы. Для более подробного обсуждения системы сетки, обратитесь к официальной документации .
Навигационные меню в чистом виде
Pure предоставляет вертикальные меню по умолчанию. Минимальное оформление и использование селекторов с низкой специфичностью значительно упрощают настройку меню. Вот код для создания вертикального меню:
<div class="pure-menu"> <span class="pure-menu-heading">Brand Name</span> <ul class="pure-menu-list"> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Home</a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Products</a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Contant</a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Blog</a> </li> </ul> </div>
Чтобы изменить вышеприведенное меню на горизонтальное, добавьте имя класса pure-menu-horizontal . Кроме того, вы можете пометить пункт меню как выбранный или отключенный, используя имена классов pure-menu-selected и pure-menu-disabled соответственно.
Создание выпадающей навигации
Создание выпадающего меню требует небольших изменений в разметке. Вам нужно добавить имя класса pure-menu-has-children в соответствующий пункт меню. Чтобы отобразить подменю при наведении, включите имя класса pure-menu-allow-hover . Фрагмент кода ниже должен прояснить ситуацию:
<div class="pure-menu pure-menu-horizontal"> <ul class="pure-menu-list"> <li class="pure-menu-item pure-menu-selected"> <a href="#" class="pure-menu-link">About</a> </li> <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"> <a href="#" class="pure-menu-link">Services</a> <ul class="pure-menu-children"> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Designing</a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">Marketing</a> </li> <li class="pure-menu-item"> <a href="#" class="pure-menu-link">SEO</a> </li> </ul> </li> </ul> </div>
Вы также можете включить этот пример скрипта, написанного на обычном JavaScript, чтобы сделать меню более доступным. Он обеспечивает поддержку ARIA, навигацию по клавишам со стрелками в подменю и отключение меню в зависимости от внешних событий.
Ниже приведена демонстрация навигационного меню Pure с выпадающим списком.
Создание форм с использованием Pure
Чтобы создать форму с помощью Pure, вам нужно добавить имя класса pure-form к элементу <form> , как показано ниже:
<form class="pure-form"> <fieldset> <legend>Pure Login Form</legend> <input type="email" placeholder="Email"> <input type="password" placeholder="Password"> <button type="submit" class="pure-button">Sign in</button> </fieldset> </form>
Вот демонстрационная форма входа в систему Pure:
Чтобы создать стекованную форму, вы можете включить имя класса pure-form-stacked вместе с pure-form . У вас также есть возможность создать выровненную форму, добавив имя класса в pure-form-aligned в исходную форму. Метки в выровненном виде будут выровнены по правому краю относительно элементов управления вводом. Однако на меньших экранах выровненная форма меняется на сложенную.
Создание многостолбцовых форм
Вы можете использовать модуль формы вместе с сеткой для создания многостолбцовых форм. Для этого вам нужно обернуть элементы управления в чистую сетку, а затем указать ширину каждого из них, используя классы чистых модулей. Пример кода ниже должен помочь вам понять концепцию:
<form class="pure-form pure-form-stacked"> <fieldset> <legend>Registration Form</legend> <div class="pure-g"> <div class="pure-u-1 pure-u-md-2-5"> <label for="name">Name</label> <input id="name" type="text"> </div> <div class="pure-u-1 pure-u-md-1-5"> <label for="country">Country</label> <input id="country" type="text"> </div> <div class="pure-u-1 pure-u-md-2-5"> <label for="email">E-Mail</label> <input id="email" type="email"> </div> </div> <button type="submit" class="pure-button">Register</button> </fieldset> </form>
Чтобы сгруппировать много элементов управления вводом вместе, вы должны обернуть их в элемент <fieldset> и добавить имя класса pure-group . Вы также можете установить размер элементов управления вводом, используя класс pure-input-* . Например, pure-input-1-2 устанавливает ширину формы на 50%.
Вот демонстрация многоколоночной, основанной на сетке формы:
Расширение и настройка Pure
Если вы не удовлетворены системой сетки, которую предоставляет Pure, вы можете создать свою собственную. Вы можете использовать инструмент стартового комплекта на официальном сайте, чтобы создать свою сеточную систему. Вы можете определить свои собственные точки останова и единицы сетки, и вы можете указать имена классов для использования.
Как и любой фреймворк, вы можете добавить дополнительный стиль поверх минимального стиля, который обеспечивает Pure. Например, вы можете определить стиль кнопки «успех»:
.success-button { background: rgb(28, 184, 65); color: white; border-radius: 0px; }
Затем все, что вам нужно сделать, это добавить .success-button из этого набора правил к элементу button, чтобы соответствовать существующим стилям Pure:
<button class="pure-button success-button">Success</button>
Если вы знакомы с CSS, то в этом нет ничего нового, но новички могут увидеть, как эта и другие платформы позволяют настраивать базовый вид существующих компонентов с помощью новых стилей.
Использование Pure с другими фреймворками
У Pure нет проблем с одновременным использованием других фреймворков, таких как Bootstrap. Например, вы можете использовать Bootstrap’s modal.css и modal.js с Pure. Это обеспечивает легкий способ создать модальный. Вот пример кода:
<button data-target="#myModal" class="pure-button" data-toggle="modal"> Launch The Modal </button> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 id="myModalLabel">A Functional Bootstrap + Pure Modal</h1> </div> <div class="modal-body"> <p>To create the modal you just need to include the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap. Pure will take care of all low level styling. The result is a fully-functional Modal using just a fraction of the CSS.</p> </div> <div class="modal-footer"> <button type="button" class="pure-button" id="success-button" data-dismiss="modal"> Close </button> </div> </div> </div> </div>
Ниже приведена демонстрация этого модального варианта:
Вывод
Независимо от своего небольшого размера, Pure может удовлетворить большинство ваших потребностей в дизайне пользовательского интерфейса. Я предлагаю вам попробовать и посмотреть, как оно поживает. Чтобы следить за развитием фреймворка, посетите Pure на GitHub .