Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Construindo um Painel Modular com Pure

by
Difficulty:IntermediateLength:MediumLanguages:

Portuguese (Português) translation by Gabriel Garbin (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.

pure-base

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.

pure-smacss

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

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

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

pure-frog

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

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

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.

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

pure-menu

Criando um Módulo de Painel

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

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.

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.

pure-envato-logo

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.

pure-modules

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

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.

E as classes de tabela extendidas do Pure.

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.

Estendendo a Responsividade

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

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:

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.

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

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.