Библиотека Pure CSS от Yahoo!

Компактный и адаптивный набор CSS модулей для ускоренного создания веб сайтов

Фреймворк Yahoo Pure CSS

Недавно – и без лишней рекламы – Yahoo! зарелизил сверхкомпактную адаптивную библиотеку Pure CSS, предназначенную для быстрого макетирования и развертывания веб-проектов. Новость не слишком топовая, нем более аналоги подобных разработок уже давно и успешно существуют. Тем не менее, стоит рассмотреть Pure CSS поближе.

Вот как описывает Pure CSS ее разработчик – Yahoo!:

Pure до смешного мал. Весь набор модулей в minified и gzipped виде занимает всего 4.2КБ. И все это без ущерба для возможностей: здесь и адаптивные стили и дизайн и простота в использовании. Библиотека создавалась прежде всего для использования на мобильных платформах, поэтому размеру придавалось особое значение, и просчитывалась необходимость в буквально каждой строке CSS кода. Отказавшись от некоторых возможностей, вы сможете уменьшить размер библиотеки еще больше. Разбивка модулей по возможностям и размерам выглядит так:

  • Базовый модуль: 1.2КБ
  • Сетки: 0.7КБ
  • Формы: 1.8КБ
  • Кнопки: 0.9КБ
  • Таблицы: 0.6КБ
  • Меню: 1.1КБ

Назначение модулей понятно из названий. Кстати, кроме компактности стоит упомянуть и то, что все модули базируются на библиотеке Normalize.css – известном модуле, обеспечивающем кросс-браузерность и целостность кода.

Теперь о возможностях библиотеки:

  1. Pure CSS обеспечивает стилевое оформление стандартных HTML элементов и наиболее часто используемых компонентов пользовательского интерфейса.
  2. Все модули Pure CSS уже «из коробки» адаптивны. Используя скин билдер, можно добиться максимальной эффективности в работе. Использование сетки и меню обеспечивает адаптивную верстку и идеальную работу на любых экранных разрешениях
  3. Компактный код означает минимальность базовых стилей. Соответственно, их переопределение требует меньше избыточного кода. Библиотека не создаст вам искусственных преград при внедрении пользовательских стилей.

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

Здесь все предельно просто. Для начала подключим ее:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/base-min.css">

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

<a href="#" class="pure-button">A Pure Button</a>

И

<button class="pure-button">A Pure Button</button>

Добавив к элементу класс pure-button-primary, получим оформление для элемента основного действия:

<a href="#" class="pure-button pure-button-primary">A Primary Action Link</a>

Дополнительную информацию о таблицах, формах и т. д. можно получить из документации к библиотеке. Кстати, подгружать можно любые модули по необходимости:

http://yui.yahooapis.com/pure/0.2.0/buttons-min.css 

Кроме этого сеть доставки контента (CDN) Y! поддерживает комбинированные запросы, например:

<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.2.0/base-min.css&pure/0.2.0/grids-min.css&pure/0.2.0/forms-min.css">

Итак, подведем итоги: библиотека Pure CSS компактна, универсальна и кроссбраузерна. Дополнительные возможности доступны через использование скин билдера, а также CSS / JS библиотеку YUI. Pure CSS отлично работает совместно и с другими библиотеками: jQuery или Bootstrap. Это позволяет эффективно комбинировать возможности всех библиотек и реализовывать весь спектр их возможностей.

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

К посту «Библиотека Pure CSS от Yahoo!» комментариев пока нет

Новый комментарий

Для редактирования комментария осталось 10 минут