Construindo um Painel Modular com Pure

() translation by (you can also view the original English article)

Hoje, vamos construir um bonito e simples painel modular usando Pure (veja o projeto no GitHub), a nova mini-biblioteca CSS modular do Yahoo!. Vamos discutir e usar alguns dos princípios de SMACSS (Arquitetura Escalável e Modular para CSS). Também usaremos ícones do site WeLoveIconFonts.com.

Nota: Antes de seguirmos adiante, é importante perceber que daremos uma ênfase mínima à geração dinâmica de gráficos para o painel que iremos criar. Geração dinâmica de gráficos requer muito JavaScript e neste tutorial, focaremos em css, geralmente evitando técnicas de desenho gráfico.

Um pouco sobre Pure

A biblioteca Pure foi desenvolvida pelo Yahoo!/YUI como um conjunto muito leve de módulos CSS (menos de 6k). Pure pode ser definido como uma versão extendida do Normalize mas que também inclui estilos para ítens bem comuns como grades, formulários, botões, tabelas e menus.

A equipe YUI desenvolveu Pure como um ponto de partida, não uma solução completa. Assim, a idéia é que a biblioteca seja estendida para a criação de estilos próprios do desenvolvedor.

Por este motivo, muito do que ensinamos neste tutorial são técnicas de como extender um framework básico como o Pure para que este se adapte às necessidades do aplicativo, como no nosso caso, um painel administrativo.

Um pouco sobre SMACSS

SMACSS, abreviação de Scalable and Modular Architecture for CSS (Arquitetura Modular e Escalável para CSS em português), criação de Jonathan Snook, é um conjunto de práticas projetadas para desenvolver um CSS fácil de entender, fácil de extender, e que evita a guerra de especificidades do CSS.

Estas práticas são reforçadas por medidas como: não usar IDs para aplicar estilos e limitando a nidificação de seletores o tanto quanto possível. A idéia básica é que categorizar o CSS como base, layout, módulos, estados e temas . Estruturar CSS em torno destas categorias e seguir as convenções de nomenclatura que fazem alusão a essas categorias faz das práticas como SMACSS legíveis e imediatamente significativas. Isso evita nomes de classe que têm estilos arbitrários associados a elas. A idéia básica da categorização segue a seguinte convenção de nomenclatura.

Base: sem nome (elementos padrão, sem classes)
Layout: .layout, .grid, .grid-column, .grid-column.five.columns
Modulos: .btn (nome do módulo), .btn-default, .btn-calltoaction; .modal, .modal-header
Estado: .is-hidden, .is-active (Implica gatilhos de javascript para alterações de classe)
Tema: .theme-background, .theme-border, .font-1, .font-2

Estes tipos de classes descrevem sua funcionalidade e categoria. As regras de SMACSS funcionam mais como "diretrizes" e paradigmas, dê uma olhada no código fonte do Pure CSS para ver exemplos de SMACSS em ação.

Mergulhando

Primeiro, vamos criar um diretório de projeto simples usando o HTML5 Boilerplate , substituindo Normalize.css por Pure. Para este tutorial, vamos usar o link CDN YUI do Pure, <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">. Também vamos usar Font Awesome, uma coleção de ícones fonte do Twitter, e adicionar uma linha para o nosso CSS (instruções retiradas de weloveiconfonts ). Pelo código, você verá ícones definidos com classes como "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">

Estamos prontos para começar a usar essas ferramentas! Defeniremos um esqueleto CSS dentro do qual, colocaremos nossos elementos. Vamos colocar o seguinte em nosso '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>

Decidimos usar uma paleta de cores chamada Yellow Tree Frog do usuário LJK que encontramos no site colourlovers.

Por enquanto, vamos referenciá-los em um comentário no topo do arquivo CSS.

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

Dica: Você pode se beneficiar das palavras-chave de cores CSS e encontrar/substituir os códigos hexadecimais mais tarde, assim você não tem que copiar e colar o código hexadecimal constantemente.

Definindo o Menu

Pure CSS nos oferece um módulo de Menu drop-in que podemos usar para definir um menu para o nosso painel. Começamos por usar nomenclatura de módulos baseado em classe que o Pure nos oferece, seguindo as orientações de 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>

Note que este menu não será funcional para este tutorial. Visualizando a página, podemos ver nosso menu foi criado com um estilo horizontal padrão. Seguindo em frente mudamos o fundo do menu para um preto semi-transparente.

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

Aqui, vemos uma adoção das convenções utilizadas por SMACSS e Pure. Nós definimos duas novas classes, "pure-menu-blackbg" e "pure-menu fixed", e em seguida, os sub-estilos necessários para prover suporte à estas classes. Também sobrescrevemos algumas das classes subjacentes (como a classe existente "pure-menu" a qual alteramos para que a fonte fique mais leve).

Criando um Módulo de Painel

Agora, criaremos um módulo do painel. Usaremos alguns estilos básicos para o nosso bloco base.

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

Agora que temos este módulo base definido, vamos estender criando novas classes com o prefixo 'dashboard-piece'. Primeiro, vamos criar as classes de cor de fundo.

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

Em seguida, vamos definir a marcação para as diferentes peças de painel. Incluímos um SVG embutido do logotipo Envato, que estenderá por toda a largura da grade.

1	<section class="dashboard pure-g-r clearfix">
2	<div class="pure-u-1 dashboard-piece dashboard-piece-redbg dashboard-piece-logo">
3	<h1>
4	<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">
5	<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
6	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
7	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
8	c14.784,11.696,36.239,9.194,47.936-5.57C74.349,52.822,73.333,2.971,73.333,2.971z"/></g>
9	</svg>
10	</h1>
11	</div>
12	<div class="pure-u-1-3 dashboard-piece dashboard-piece-bluebg">
13	<div class="dashboard-content">
14	<h2><i class="fontawesome-twitter"></i></h2>
15	<p class="dashboard-metric">+20 followers<span class="light"><i class="fontawesome-angle-up"></i>6.8%</span></p>
16	</div>
17	</div>
18	<div class="pure-u-1-3 dashboard-piece dashboard-piece-orangebg">
19	<div class="dashboard-content">
20	<h2><i class="fontawesome-github"></i></h2>
21	<p class="dashboard-metric">
22	142 Commits
23	<div class="light bar-horizontal">
24	<div class="bar-horizontal-bar" style="width:57%">
25	57% Capacity
26	</div>
27	</div>
28	</p>
29	</div>
30	</div>
31	<div class="pure-u-1-3 dashboard-piece dashboard-piece-yellowbg">
32	<div class="dashboard-content">
33	<p class="dashboard-metric">
34	<h2><i class="fontawesome-check"></i></h2>
35	<div class="dashboard-metric">
36	<strong>63 / 90</strong><br><small>Tasks Complete</small>
37	</div>
38	</p>
39	</div>
40	<div class="bar-vertical" style="height:70%;"></div>
41	</div>
42	</section>

Há muita coisa para analizar neste código. Primeiramente, usamos 'pure-u-1-3' (e outras classes pure-u-*) dentro de um elemento de linha da grade, 'pure-g-r'. Estas classes são uma parte do sistema de grades do Pure. Para entender completamente os detalhes do sistema, confira a documentação completa, o conceito básico é que a largura da classe de grade 'pure-u-1-3' é 1/3 da largura da grade completa; uma classe de pure-u-3-4 seria 3/4 da largura da grade. O módulo com o logotipo possui a classe pure-u-1, o que lhe permite estender a toda a largura da grade.

Os outros elementos das peças do painel são utilizados para mostrar tipos diferentes de métricas. As seguintes regras CSS são utilizadas para apresentar essas métricas e outras partes internas das peças do painel.

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

Nós também definimos as classes das barras horizontais e verticais separadamente dos módulos do painel com conteúdo.

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

Finalmente, usamos mais módulos integrados do Pure para criar uma tabela para um módulo de "eventos", e reutilizamos a classe barra horizontal para o módulo de clima. Nós estendemos essas classes com CSS personalizados também. Aqui está o código para os dois últimos módulos.

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

E as classes de tabela extendidas do Pure.

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

Lastly, we want to slightly pad the top of the weather module so that it fits more in line with the events module. We do so by simply utilizing the extra "weather" class and adjusting the top padding. Along with these last pieces, we'll add some simple footer styling to match the top nav menu.

Por último, queremos um pouco de padding na parte superior do módulo de clima para que ele fique alinhado com o módulo de eventos. Fazemos isso simplesmente utilizando a classe extra "weather", ajustando o padding do topo. Junto com essas últimas peças, vamos adicionar alguns estilos simples ao rodapé para que este combine com menú de navegação.

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

Estendendo a Responsividade

Pure já vem com elementos de grade responsivos incluídos. Eles são definidos com o seguinte seletor.

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

Este é um seletor complicado à primeira vista (dê uma olhada em 30 seletores CSS você deve memorizar para explicações detalhadas), que primeiramente aponta para os filhos diretos dos elementos ".pure-g-r". Estes elementos filhos devem, então, possuir um atributo de classe que começa com o prefixo "pure-u". Ufa.

O seletor aponta, por exemplo, para esta div:

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

Este seletor é usado dentro de @media queries para recolher a grade. No entanto, estes elementos unitários recolhem a 100% abaixo 767px. Queremos mudar isso para permitir que os elementos recolham até 50% do tamanho entre 480 e 767. Fazemo-lo com as seguintes query de @media.

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

Uma Pitada de JavaScript

Em 'main.js', vamos escrever um pouco de JavaScript para certificar-nos de que todos os módulos em uma única linha possuam a mesma altura

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

}());

Este JavaScript define uma função que percorre cada um dos elementos com uma classe de "dashboard-piece" em cada linha, e, posteriormente, encontra o módulo mais alto nessa linha. Em seguida, ele define a altura de todos os elementos nesta linha para que todos possuam a mesma altura do elemento mais alto da mesma.

Conclusão

Este tutorial mostra apenas alguns dos módulos do Pure. Com padrões como os usados neste tutorial, você pode criar CSS fácil de manter, legível e escalável. Usando uma pequena biblioteca como Pure permite que você aproveite uma solução poderosa, testada e bem documentada para problemas comuns.

O que mais você faria com Pure? Escreva um comentário!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!