Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS

Pure.css предлагает интригующую альтернативу Bootstrap

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

Final product image
What You'll Be Creating

Что такое Pure.css?

В то время как Bootstrap берет на себя огромное количество веб-сайтов, это может принести небольшую нагрузку на сайты, которые могут не понадобиться для вашего следующего проекта. Pure.css - это фреймворк от Yahoo; он предлагает минималистскую, хорошо документированную и гибкую альтернативу.

В этом уроке я расскажу вам о Pure, «наборе небольших, респосив модулей CSS, которые вы можете использовать в каждом веб-проекте». Мы рассмотрим набор функций и преимущества использования Pure, а затем рассмотрим некоторые основные примеры использования.

Если у вас есть какие-либо пожелания о будущих учебниках или вопросы и комментарии на этот, пожалуйста, разместите их ниже. Вы также можете связаться со мной в Twitter @reifman.

Выбор платформы

Pure предлагает все общие функции, которые вам нужны в стандартном фреймворке веб-дизайна. Итак, либо вы создаете тему для WordPress или собственный веб-сайт, Pure может быть хорошим вариантом.

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

Краткое резюме

Вот краткий обзор преимуществ и особенностей Pure. Он обеспечивает:

  • настраиваемая, responsive сетка
  • встроенные вертикальные и горизонтальные меню, включая выпадающие меню
  • кнопки, которые работают с элементами <a> и <button>
  • гибкие выравнивания форм
  • общие стили таблиц
  • чистый, минималистский вид, который можно легко расширить

Тем не менее, наиболее впечатляюще, что Pure.css является очень маленьким, всего 4.5KB minified + gzipped. Вот сколько места занимают различные компоненты Pure в вашем production окружении:

PureCSS Module Sizes

Pure также хорошо протестирован и работает в IE 8+, Firefox, Chrome, Safari, iOS 6-8 и Android 4.x.

И вы все равно можете использовать его с элементами Bootstrap, добавляя их туда, где вам нужно. Я приведу пример этого ниже.

Pure построен на Normalize.css, который стандартизирует производительность фреймворка в браузерах. Normalize обеспечивает сброс CSS по умолчанию, который:

  • сохраняет полезные значения по умолчанию
  • нормализует стили для широкого диапазона элементов
  • исправляет ошибки и общие непоследовательности браузера
  • улучшает удобство использования с незначительными улучшениями
  • объясняет, какой код использует подробные комментарии

Начало работы с Pure

Сайт Pure построен на собственном фреймворке, поэтому его минималистский, хорошо разработанный код приводит к простому ориентируемому и удобному руководству. Вот пример левого меню Pure в действии:

Purecss - Get Started

Вы можете добавить Pure на свою страницу через бесплатный CDN Yahoo. Просто добавьте следующий элемент <link> в <head> вашей страницы, перед таблицами стилей вашего проекта:

Чтобы инициализировать гибкую ширину вашего веб-сайта, установите метатег для окна просмотра на ширину вашего устройства:

Макеты

На странице Макетов Pure предлагает выборку загрузок для разных страниц примеров для общих приложений:

PureCSS Sample layouts

Вы можете просматривать и загружать любые из них, с которыми вы хотите поэкспериментировать или добавить в приложение. Они включают:

  • Блог
  • Эл. адрес
  • Фотогалерея
  • Целевая страница
  • Ценовая галерея
  • Отзывчивое боковое меню
  • Отзывчивое горизонтально-вертикальное меню
  • Отзывчивое горизонтально-прокручиваемое меню

Pure Base

На странице Base приведен краткий справочный материал о фундаменте под фреймворком Pure, в основном это Normalize.css:

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

Вы также можете загрузить Normalize отдельно с помощью CDN Yahoo для самостоятельного использования:

И есть другие небольшие базовые функции, такие как классы, которые позволяют Pure загружать изображения с помощью viewport:

Но теперь давайте посмотрим на некоторые из примеров макетов Pure.

Сетки

Сетки - ключевой аспект макетов веб-сайта, который Pure делает довольно простым. Вот краткий пример сетки Pure с четырьмя столбцами на рабочем столе:

PureCSS Grids Full Width

И вот, как он уменьшает размер окна просмотра в размере пополам:

PureCSS Grids Half Width

И, наконец, один столбец на смартфоне:

PureCSS Grids Quarter Width

Чистые гриды состоят из двух типов классов: сеток и единиц. Детальные элементы разделов сетки должны быть делениями блоков. Ваш контент попадает внутрь разделов. Классы единиц называются для представления их ширины. Например, pure-u-1-4 имеет ширину 25%.

Вот код для responsive четвертого выше:

Как вы можете видеть выше, <div class = "pure-g"> представляет собой внешний класс сетки. Затем <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> указывает браузеру показывать один столбец для минимальных видовых экранов, половины столбцов для среды и четверть столбцов для большой ширины.

Здесь вы можете узнать больше о Pure Grids.

Формы

PureCSS Example Multi Column Form

Pure поддерживает выравнивание полей ввода в формах и создание специализированных полей, таких как:

  • Встроенные формы
  • Сложенные формы
  • Двухколонные формы
  • Много-колонные формы (показано выше)
  • Сгруппированные инпуты
  • Обязательные инпуты
  • Отключенные инпуты
  • Инпуты только для чтения
  • Закругленные инпуты
  • Флажки и радио

Вы можете увидеть все описанное здесь. Давайте рассмотрим двухколоночную форму, на которую Pure ссылается как форматированная форма:

PureCSS Example Two Column Aligned Form

Путем использования класса pure-form-aligned вместе с pure-control-group(s), Pure обеспечивает правильное расположение каждого набора полей, как показано выше.

Это довольно простой способ построить очень полезную, хорошо выложенную форму.

Таблицы

Pure также упрощает создание и форматирование таблиц. Вот пример горизонтально полосатой таблицы:

PureCSS Example Horizontal Striped Tabled

Вы можете увидеть таблицу выше, закодированную, просто добавив класс pure-table-odd попеременно через ваш код, чтобы изменить чередование:

Здесь приведено несколько других примеров таблиц.

Меню

Меню в Pure также легко создать, оно включает в себя:

  • Вертикальное меню
  • Горизонтальное меню
  • Выбранные и отключенные элементы
  • Списки
  • Вертикальное меню с подменю
  • Прокручиваемое горизонтальное меню
  • Прокручиваемое вертикальное меню
  • Отзывчивое вертикальное меню
  • Отзывчивое горизонтально-прокручиваемое меню
  • Отзывчивое горизонтально-вертикальное меню

Все меню показаны здесь. Вот как вы бы описали выпадающее меню:

PureCSS Example Dropdown Menu

В принципе, это просто pure-menu-horizontal с pure-menu-list и pure-menu-item pure-menu-has-children pure-menu-allow-hover и затем набор дочерних элементов:

Pure предоставляет пример JavaScript для реализации дополнительных возможностей доступа в ваши меню.

Идем дальше

На веб-сайте Pure есть несколько отличных руководств по фреймворку:

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

Вот пример модального диалога Bootstrap поверх Pure, который вы можете увидеть на странице расширения Pure:

PureCSS Using Pure with Elements of Bootstrap

В заключение

Bootstrap становится IBM веб-фреймворками. Он отзывчивый, это стандарт, и вы не можете уволиться за его выбор (по недавнему контракту нам действительно нужно было приступить к разработке темы для неправильной реализации Bootstrap). Но, если вы хотите что-то меньшее, более быстрое и простое, то обратите внимание на Pure.css.

Если вы попробуете, пожалуйста, сообщите мне о вашем опыте в комментариях ниже. Вы также можете связаться со мной в Twitter @reifman. И вы также можете просмотреть мою страницу инструктора Envato Tuts + для прочтения моих других учебных пособий.

Ссылки по теме

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.