Lecaw

Учимся создавать Web-сайты

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

June 28, 2013
CSS
5766hits

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

ДЕМО Исходные файлы

 

Пара слов о Pure

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

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

Поэтому многое из того, что мы рассказываем в этом учебном руководстве, является методами для расширения основополагающей библиотеки 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 руководствуются “инструкциями", посмотрите код Pure чтобы увидеть SMACSS в действии.

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

Для начала, давайте создадим простую директорию нашего проекта, используя фронтенд шаблон HTML5 Boilerplate и добавим Pure с Normalize.css. В этом учебном руководстве мы используем ссылку YUI CDN, <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">, например как на сайте с интересными фактами. Сразу же добавим ссылку на набор иконок от Twitter, а также строку CSS (инструкции, взятые из 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="#">

Давайте перейдем к CSS структуре нашей страницы, чтобы разместить все элементы в теле документа.

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

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

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

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

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

Pure CSS предоставляет нам модуль выпадающего меню, который мы можем использовать, для создания меню на нашей странице с модулями. Для этого создадим неупорядоченный список с классом меню 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>
        <!-- остальные элементы ... -->
    </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-1-3′ (и другие классы pure-u-*) внутри строки ‘pure-g-r’. Эти классы являются частью системы сетки. Если вы еще не знакомы с данной системой, советую ознакомится с уроками по фреймворку Pure – часть 1, часть2; основная концепция, это сетка с классом pure-u-1-3 занимающая 1/3 ширины полной сетки; класс pure-u-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-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"]

Этот хитрый селектор, сначала указывает прямым дочерним элементам, элементы “.pure-g-r”. У дочерних элементов должен быть атрибут, который запускается с префикса “pure-u”.

Это указывает, например, на этот контейнер:

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

Этот селектор использует медиа-запросы, чтобы свернуть сетку. Однако, эти единичные элементы выбиваются из строя с 100% размером ниже 767px. Нам нужно изменить это, чтобы элементы выбивались до 50% в промежутке между 480px и 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");
}());

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

ДЕМО Исходные файлы

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)