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

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,которая вобрала в себя стили наиболее распространенных таких вещей, как сетки, формы, кнопки, таблицы и меню.

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

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

Немного о SMACSS

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

Она помогает не применять 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".

/* in main.css */

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

<!-- in index.html, in place of normalize -->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=fontawesome">

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

<header>
	<nav></nav><!-- this is where our nav menu will go -->
</header>
<section class="dashboard">
	<!-- our dashboard pieces will go here -->
</section>
<footer>
	<!-- copyright information can go here-->
</footer>

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

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

/*
	red: #E73F3F
	orange: #F76C27
	yellow: #E7E737
	blue: #6D9DD1
	purple: #7E45D3
*/

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

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

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

<nav class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">WebDesignTuts</a>
    <ul>
        <li class="pure-menu-selected"><a href="#">Dashboard</a></li>
        <!-- other items ... -->
    </ul>
</nav>

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

.pure-menu {
    font-weight: lighter;
}
.pure-menu.pure-menu-fixed {
    position: fixed;
}
.pure-menu.pure-menu-blackbg {
    background: #222;
}
.pure-menu.pure-menu-blackbg .pure-menu-heading:hover {
    color: #efefef;
}
.pure-menu.pure-menu-blackbg a {
    color: #fff;
}
.pure-menu.pure-menu-blackbg a:hover {
    background: #666;
}
.pure-menu.pure-menu-blackbg .pure-menu-selected a {
    background: #7E45D3;
}
.pure-menu.pure-menu-blackbg .pure-menu-selected a:hover {
    color: #efefef;
}

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

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

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

.dashboard-piece {
    min-height: 300px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    position: relative;
    padding-bottom: 40px;
}

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

.dashboard-piece-redbg {
    background-color: #E73F3F;
}
.dashboard-piece-orangebg {
    background-color: #F76C27;
}
.dashboard-piece-yellowbg {
    background-color: #E7E737;
}
.dashboard-piece-bluebg {
    background-color: #6D9DD1;
}
.dashboard-piece-purplebg {
    background-color: #7E45D3;
}
.dashboard-piece-graybg {
    background-color: #798388;
}

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

<section class="dashboard pure-g-r clearfix">
    <div class="pure-u-1 dashboard-piece dashboard-piece-redbg dashboard-piece-logo">
        <h1>
            <svg x="0px" y="0px" width="132.89669167px" height="120px" viewBox="0 0 73.351 82.791" enable-background="new 0 0 73.351 82.791" xml:space="preserve">
                <g><path fill="#FFFFFF" d="M7.372,27.487C-1.903,39.206-2.261,55.13,5.369,67.05c6.858-17.611,15.499-37.423,26.14-55.114
                C21.514,16.159,12.19,21.405,7.372,27.487z M73.333,2.971c-0.11-0.924-0.589-1.7-1.276-2.216C71.4,0.204,70.53-0.084,69.612,0.021
                c0,0-2.738,0.589-7.093,1.704C41.722,21.698,24.654,48.459,11.43,74.155c0.492,0.427,0.991,0.857,1.512,1.268
                c14.784,11.696,36.239,9.194,47.936-5.57C74.349,52.822,73.333,2.971,73.333,2.971z"/></g>
            </svg>
        </h1>
    </div>
    <div class="pure-u-1-3 dashboard-piece dashboard-piece-bluebg">
        <div class="dashboard-content">
            <h2><i class="fontawesome-twitter"></i></h2>
            <p class="dashboard-metric">+20 followers<span class="light"><i class="fontawesome-angle-up"></i>6.8%</span></p>
        </div>
    </div>
    <div class="pure-u-1-3 dashboard-piece dashboard-piece-orangebg">
        <div class="dashboard-content">
            <h2><i class="fontawesome-github"></i></h2>
            <p class="dashboard-metric">
                142 Commits
                <div class="light bar-horizontal">
                    <div class="bar-horizontal-bar" style="width:57%">
                        57% Capacity
                    </div>
                </div>
            </p>
        </div>
    </div>
    <div class="pure-u-1-3 dashboard-piece dashboard-piece-yellowbg">
        <div class="dashboard-content">
            <p class="dashboard-metric">
                <h2><i class="fontawesome-check"></i></h2>
                <div class="dashboard-metric">
                    <strong>63 / 90</strong><br><small>Tasks Complete</small>
                </div>
            </p>
        </div>
        <div class="bar-vertical" style="height:70%;"></div>
    </div>
</section>

В этом разметке много чего надо исправить. Сперва используем '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 используются, чтообы показать эти метрики.

.dashboard-piece-logo h1 {
    line-height: 100px;
}
.dashboard-piece-logo svg {
    margin-top: 80px;
}
.dashboard-piece h1 {
    line-height: 300px;
    font-size: 3.6em;
    margin: 0;
}
.dashboard-content {
    position: relative;
    z-index: 999;
}
.dashboard-content p {
    font-weight: lighter;
}
.dashboard-content .light {
    opacity: 0.4;
    display: block;
}
.dashboard-content h2 i {
    font-size: 4em;
    opacity: 0.4;
}
.dashboard-metric {
    text-transform: uppercase;
    font-size: 1.6em;
    line-height: 1;
}
.dashboard-metric i {
    margin-right: 0.6em;
}

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

.bar-horizontal {
    height: 36px;
    background-color: rgba(255,255,255,0.4);
    position: relative;
    display: block;
    margin-top: 20px;
}
.bar-horizontal-bar {
    background: #fff;
    height: 36px;
    line-height: 36px;
    color: #444;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    position: absolute;
    top: 0;
    left: 0;
}
.bar-vertical {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: rgba(200,200,200,0.5);
}

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

<section class="dashboard pure-g-r clearfix">
    <div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events">
        <div class="dashboard-content">
            <p class="dashboard-metric">
                <h2><i class="fontawesome-calendar"></i></h2>
                <h3>Upcoming Events</h3>
                <table class="pure-table pure-table-center pure-table-horizontal pure-table-dark">
                    <thead>
                        <tr>
                            <th>With:</th>
                            <th>Where:</th>
                            <th>When:</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John Smith</td>
                            <td>WDTuts Office</td>
                            <td>Jun 20, 9:30AM</td>
                        </tr>
                        <tr class="pure-table-odd">
                            <td>George Bluth</td>
                            <td>Sudden Valley</td>
                            <td>Jun 23, 4PM</td>
                        </tr>
                        <tr>
                            <td>Michael Scott</td>
                            <td>Scranton, PA</td>
                            <td>Jun 24, 2:45PM</td>
                        </tr>
                    </tbody>
                </table>
            </p>
        </div>
    </div>
    <div class="pure-u-1-3 dashboard-piece dashboard-piece-purplebg weather weather-rain">
        <div class="dashboard-content">
            <p class="dashboard-metric">
                <h2><i class="fontawesome-umbrella"></i></h2>
                <div class="dashboard-metric">
                    <strong>80% Chance</strong><br><small>of Precipitation</small>
                    <div class="light bar-horizontal">
                        <div class="bar-horizontal-bar" style="width:80%">80%</div>
                    </div>
                </div>
            </p>
        </div>
    </div>
</section>
<footer>
    &copy; 2013 Envato
</footer>

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

.pure-table-center {
    margin: 0 auto;
}
.pure-table-dark { color: #ddd; }
.pure-table-dark .pure-table-odd { color: #444; }

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

.weather {
    padding-top: 60px;
}
footer {
    background: rgb(20,20,20);
    color: #aaa;
    padding: 10px;
    font-size: 0.6em;
    font-weight: bold;
}

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

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

.pure-g-r>[class ^="pure-u"]

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

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

<section class="dashboard pure-g-r clearfix">
    <div class="pure-u-2-3 dashboard-piece dashboard-piece-graybg dashboard-piece-events">

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

@media only screen and (max-width:767px) {
    .pure-g-r>[class ^="pure-u"]{width:50%; float: left;}
}
@media only screen and (max-width:480px) {
    .pure-g-r>[class ^="pure-u"]{width:100%; }
}

Немного JavaScript

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

(function(){
var to;

	function pieceHeights(){
		to = setTimeout(function(){
			$(".pure-g-r").each(function(i,el){
				var contentPieces = $(el).find(".dashboard-piece");
				var max = 0;
				contentPieces.css("min-height","");
				$.grep(contentPieces, function(el,i){
					max = Math.max($(el).outerHeight(),max);
				});
				contentPieces.css("min-height", max);
			});
		}, 400);
	}

	$(window).on("resize", function(){
		clearTimeout(to);
		pieceHeights();
	}).trigger("resize");

}());

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

Заключение

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

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