Создание страницы модулей при помощи PureCSS и SMACSS

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

Пара слов о PureCSS

PureCSS был создан командой разработчиков Yahoo! и YUI, он имеет набор простых модулей (размером менее 6kb). Также в него встроен компонент Normalize, который необходим для сброса стандартных стилей браузера, таких как сетка, формы, кнопки, таблицы и меню.

purecss

PureCSS используется, в качестве основы, для создания собственного стиля. Благодаря Pure, разработчики могут развернуть свой собственный пользовательский стиль в виде расширения данного фреймворка.

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

Пара слов о SMACSS

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

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

  • База: Без имени (элементы по умолчанию, не имеющие класса)
  • Макет: .layout, .grid, .grid-column, .grid-column.five.columns
  • Модуль: .btn (module name), .btn-default, .btn-calltoaction; .modal, .modal-header
  • Тема: .theme-background, .theme-border, .font-1, .font-2

Данные типы классов описывают их функциональность и категорию. Правила SMACSS руководствуются специальными "инструкциями", взгляните на код PureCSS чтобы увидеть SMACSS в действии.

Страница с виджетами

Для начала, давайте определим директорию нашего проекта, используя шаблон для FrontEnd HTML5 Boilerplate, в который добавим PureCSS с Normalize.css. Для подключения PureCSS мы воспользуемся YUI CDN, <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">. Также подклюим набор иконок от Twitter и Weloveiconfonts. На странице вы увидите иконки, установленные с помощью классов "fontawesome-calendar".

/* в main.css */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
<!-- в index.html -->
<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 структуре нашей страницы.

<header>
    <nav></nav><!-- навигационное меню -->
</header>
<section class="dashboard">
    <!-- виджеты -->
</section>
<footer>
    <!-- авторское право-->
</footer>

я буду использовать цветовую палитру Yellow Tree Frog на сайте colourlovers.

Давайте распишем все цвета в верхней части CSS файла:

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

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

PureCSS имеет модуль выпадающего меню, который мы будем использовать на нашей странице. Для этого создадим неупорядоченный список с классом pure-menu, после инструкций 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>
        <!-- остальные элементы ... -->
    </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 и PureCSS. Определяем два новых класса 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, которые будут распологаться во всю ширину сетки.

envato logo

<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-1-3 (и другие классы pure-u-*) внутри строки pure-g-r. Эти классы являются частью системы сетки. Основная концепция данного компонента, это сетка с классом pure-u-1-3 занимающая 1/3 ширины полной сетки; класс pure-u-3-4 будет занимать 3/4 часть ширины сетки. Модуль с логотипом имеет класс pure-u-1, который охватывает всю ширину сетки.

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

.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;
}

purecss modules

Также установим отдельные классы для горизонтальных и вертикальных модулей:

.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);
}

Мы воспользуемся встроенными модулями PureCSS, для создания стилизованной таблицы модуля "события", используем класс bar-horizontal-bar для модуля погоды. Опять же мы расширяем эти классы с помощью дополнительных классов. Ниже представленна разметка для двух последних модулей.

<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-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;
}

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");
}());

Здесь мы определили функцию, которая перебирает каждый элемент с классом dashboard-piece, и определяет самый высокий модуль в этой строке. Затем устанавливает все элементы в этой строке на высоту самого высокого модуля.

Перевод статьи Build a Modular Dashboard Interface With Pure

Тэги: FrameworkPureCSSSMACSS

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.