Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Построение интерфейса модульной панели с помощью Pure

by
Difficulty:IntermediateLength:MediumLanguages:

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

Сегодня мы создадим красивую, минималистичную панель, используя Pure (познакомьтесь с проектом на GitHub), новая мини модульная CSS библиотека от Yahoo! Мы поговорим о SMACSS (Масштабируемая и модульная архитектура CSS) и о применении ее принципов. Таже мы используем иконки с сайта WeLoveIconFonts.com.

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

Немного о Pure

Библиотека Pure была создана командой Yahoo и YUI, как набор наиболее легковесных модулей (меньше 6К). Вообще ее можно сравнить с Normalize,которая вобрала в себя стили наиболее распространенных таких вещей, как сетки, формы, кнопки, таблицы и меню.

pure-base

Команда YUI создала Pure в качестве отправной точки, а не в качестве законченного решения. В дальнейшем они ожидают, что разработчики сами будут расширять библиотеку и своими стилями дополнять ее.

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

Немного о SMACSS

SMACSS,(сокращенно от Scalable and Modular Architecture for CSS - масштабируемая и модульная архитектура для CSS), создана Джонатаном Снуком, и является набором практик созданных для построения более понятного, легко дополняемого кода CSS, помогающего избежать "войн спецификаций CSS".

pure-smacss

Она помогает не применять ID для стилизация элементов и сократить уровень вложенности элементов насколько это возможно. Главная идея этой философии может быть категоризирована по следующими понятиями: основа, разметка, модули, состояния и темы. Структурирование CSS согласно с этими категориями и следуя определенным правилам именвоания, используя эти категории, превращает SMACSS в читаемый и моментально наполненный смыслом код. Это уберегает от создания имен классов, которые ассоциируются со стилями внутри них.

  • Основа: нет имен (базовые элементы, без классов)
  • Разметка: .layout, .grid, .grid-column, .grid-column.five.columns
  • Модули: .btn (название модуля), .btn-default, .btn-calltoaction; .modal, .modal-header
  • Состояние: .is-hidden, .is-active (подразумеваются триггерные JavaScript-изменения классов)
  • Тема: .theme-background, .theme-border, .font-1, .font-2

Данные типы классов описывают их функциональность и категорию. Правила SMACSS - больше указаний и возможностей обдумывания. Чтобы увидеть примеры применения SMACSS на практике, ознакомьтесь с библиотекой Pure CSS.

Diving in

Сперва давайте создадим директорию с использованием HTML5 Boilerplate, и поместим туда стили Pure Normalize.css. В этом проекте мы будем использовать ссылку Pure's YUI CDN <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">. Также мы будем использовать коллекцию шрифтовых иконок от создателей Twitter Font Awesome и добавим строку в CSS (рекомендации взяты с weloveiconfonts). Во всей разметке, иконки будут объявляться с помощью классов, наподобии "fontawesome-calendar".

Теперь всё готово для использования этих инструментов в дизайне. Давайте начнем с создания некоего каркаса CSS и разместим его в 'body' элементе.

Мы решили использовать цветовую палитру, которую нашли на colourlovers, под названием Yellow Tree Frog авторства LJK.

pure-frog

Теперь разместим в комментарии в начале таблицы стилей ссылку на эти цвета.

Совет: Иногда выгоднее использовать слова ключевых цветовых кодов CSS и позже заменить все hex-коды, чтобы не заниматься постоянным их копированием.

Создание меню

В составе PureCSS имеется модуль меню который мы можем использовать при создании нашей панели. Начнем с классового наименования модуля в стилистике Pure, учитывая инструкции SMACSS.

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

Мы можем видеть взаимодействие SMACSS и Pure. Мы создали два класса 'pure-menu-blackbg' и 'pure-menu-fixed' и дополнительные вложенные стили. Также мы переопределили основные классы (например, класса 'pure-menu', задав в нем меньшую жирность шрифта).

pure-menu

Создание модуля панели.

Следом мы создадим модуль панели. Мы будем использовать базовые стили встроенной по умолчанию панели.

Далее мы дополним эти стили созданием новых классов с префиксом 'dashboard-piece'. Первыми мы создадим классы для фонового цвета.

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

pure-envato-logo

В этом разметке много чего надо исправить. Сперва используем 'pure-u-3' (и другие 'pure-u-*' классы) внутри сетки элемента строки 'pure-g-r'. Эти классы являются частью сетки Pure. Для более полного понимания вы можете ознакомиться с полной документацией по сетки YUI. Основной концепцией является то, что класс сетки pure-u-1-3 - составляет 1/3 общей ширины сетки, класс pure-3-4 -составляет 3/4 ширины. Модуль с лого имеет класс pure-u-1, который позволяет занять элементу полную ширину.

Другие части панели используются для показа других типов метрик. Следующие правила CSS используются, чтообы показать эти метрики.

pure-modules

Мы также определим классы горизонтальных и вертикальных плиток отдельно от содержимого модулей панели.

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

Дополним Pure стили для таблиц.

В завершение всего, немного расширим верхнюю часть модуля погоды так, чтобы он больше соответствовал модулю событий. Добьемся этого путем простого увеличения отступа сверху в соответствующем классе 'weather'. Также в заключении мы добавим несколько простых стилей подвала, чтобы он был похож на верхнее навигационное меню.

Добавление адаптивности

По умолчанию в Pure заложена адаптивность элементов сетки. Они определяются следующим селектором:

Этот хитровыглядящий селектор (прочитайте 30 CSS селекторов , которые вы должны помнить для более глубоких объяснений), который в начале указывает на непосредственных пототомковэлемента с классом 'pure-g-r'. Эти потомки, к тому же, должны иметь атрибуты класса, которые начинаются с префикса 'pure-u'.

Это направлено, например, на такой div

Селектор использован внутри директивы @media для разрушения сетки. Однако, этот структурный элемент будет получать 100% ширину при разрешении меньше 767px. Также разрешим схлопывание ширины сетки на 50% для устройств с разрешением от 480 до 767px. Достигается это путем использования медиа-запросов.

Немного JavaScript

В скрипте 'main.js' немного допишем JavaScript, чтобы в том, что все модули имеют одинаковую высоту.

В этом JavaScript-коде определена функция, которая в цикле проверяет каждый элемент с классом 'dashboard-piece' в каждой строке и впоследствии находит элемент с наибольшей высотой. И затем задает высоту всех остальных элементов в этой строке равной максимальной высоте.

Заключение

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

В каких еще целях вы хотите использовать Pure? Дайте нам знать в комментариях!

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.