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> © 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? Дайте нам знать в комментариях!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post