Framework Pure – O que é, porque considerar e como utilizar

Neste artigo vamos analisar o Framework CSS “Pure”, que auxilia na criação de layouts totalmente responsivo de forma rápida e fácil. Framework by Yahoo!

Porque criar um layout responsivo?

Web Design Responsivo nos ultimos anos vem se tornando um dos principais assuntos relacionados a desenvolvimento web.
A questão é: Porque atualizar seu website? A resposta é lógica, visto que hoje existe diferentes tipo de usuário acessando a internet e consumindo conteúdo em diferentes dispositivos.

Desenvolvedores web precisam se adaptar a este novo padrão de telas e desenvolver aplicações que interajam com todos os dispositivos de uma forma homogênea. Essa é a proposta do Framework Pure, assim como outros disponíveis na web.
Vale salientar que design responsivo não é só uma maneira de otimizar o website, é pensar na experiência que esse usuário vai ter ao acessar seu portal de serviços independente do dispositivo que utiliza para tal.

O que é o Pure?

De acordo com o website do projeto, Pure é um Framework CSS responsivo, que pode ser utilizado em qualquer projeto web. O Framework é baseado no projeto Normalize.css, que é uma biblioteca que ajuda o navegador a renderizar elementos com maior consistência, está de acordo com os padrões modernos de desenvolvimento e funciona em navegadores antigos.

A biblioteca desse Framework é realmente leve, pesando em torno de 4.2 KB, e para deixar seu projeto ainda mais leve você pode linkar os módulos que você vai utilizar do Framework no projeto.

Um fator bastante interessante desse Framework é que você tem a opção de estender suas funcionalidades adicionando seu próprio código de customização e pode utilizar ele em conjunto com outro Framework como por exemplo o Bootstrap.

Módulos básicos disponíveis:

  • Base
  • Grid
  • Forms
  • Buttons
  • Tables
  • Menus

Esse é um Framework novo que todo desenvolvedor web deve conhecer, porém não é muito aconselhado para utilização em grandes projetos. A versão atual possui alguns problemas que você provavelmente não vai encontrar utilizando outros Frameworks como o Foundation ou Bootstrap.

Por outro lado, é bom se interessar em aprender um Framework que está iniciando agora podendo, você pode acompanhar seu desenvolvimento e evoluir desde o começo com o projeto, que amanhã pode ser um dos projetos mais interessantes da web em relação a desenvolvimento.

Pure em ação

Vamos analisar alguns exemplos de layout produzidos com o Framework.
*Exemplos extraídos do website do Pure.

Padrão

marketing@2x

Galeria de imagens

gallery@2x

Email

email@2x

Exemplos de utilização do código

O Pure tem alguns elementos pré carregados em seu código que minimiza bastante o tempo de trabalho do programador, vamos listar alguns exemplos de utilização desses elementos para dar ideia de como o código deve ser manuseado. Note que o esse é o padrão que deve ser utilizado ao escrever o código se baseando no Framework com suas classes pré definidas.

Para testar os exemplos você precisa de um arquivo HTML linkado com o arquivo CSS do Pure e do Normalize.css.

Para linkar os arquivos CSS adicione as seguintes linhas de comando dentro da tag <head> do seu arquivo html:

&lt;link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css"&gt;
&lt;link rel="stylesheet" href="http://necolas.github.io/normalize.css/2.1.3/normalize.css"&gt;

Base

Heading – apenas declarar código, por exemplo <h1>, para obter o texto estilizado de acordo com a imagem

Pure Heading Typography

Listas – apenas declarar código, por exemplo <ul> <li> </li> </ul>, para obter a lista estilizada de acordo com a imagem

Pure List

Blockquotes – adicionar texto dentro da tag <blockquote> </blockquote>

Pure Blockquote

Outros exemplos de marcação de text estão disponíveis na documentação do Normalize.css e no link purecss.io/base

Grid

Grid do Pure funciona da seguinte forma, considere pure-g uma linha e pure-u-*-* a coluna. Cada pure-g pode ter várias colunas. As colunas tem várias classes que representam suas medidas.
Por exemplo: pure-u-1-2 tem largura de 50%, e pure-u-1-5 teria de 20%.
Note que todas as colunas são um membro da grid, observe o exemplo:


&lt;div class="pure-g"&gt;
    &lt;div class="pure-u-1-3"&gt;
        &lt;!--
        Por padrão as colunas não tem nenhum parâmetro de margin ou padding
        Caso necessite, adicione em um dos membros filho
        --&gt;
        &lt;p&gt;Três&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="pure-u-1-3"&gt;
        &lt;p&gt;Três&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="pure-u-1-3"&gt;
        &lt;p&gt;Três&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

O Pure diferencia as colunas entre responsivas ou não da seguinte forma, vamos analisar um grid sem responsividade:


&lt;div class="pure-g"&gt;

    &lt;div class="pure-u-1-3"&gt; ... &lt;/div&gt;
    &lt;div class="pure-u-1-3"&gt; ... &lt;/div&gt;
    &lt;div class="pure-u-1-3"&gt; ... &lt;/div&gt;

&lt;/div&gt;

Agora um com a classe responsiva para a grid, note que mudamos a classe para “pure-g-r”:


&lt;div class="pure-g-r"&gt;

    &lt;div class="pure-u-1-3"&gt; ... &lt;/div&gt;
    &lt;div class="pure-u-1-3"&gt; ... &lt;/div&gt;
    &lt;div class="pure-u-1-3"&gt; ... &lt;/div&gt;

&lt;/div&gt;

Considerações sobre a Grid:

  • Possibilidade de escolher se o seu site vai ser responsivo ou não
  • Ajusta automaticamente as imagens a coluna de acordo com o tamanho da tela
  • Trabalha com quantas colunas você desejar

Form

Form Padrão – apenas adicione a classe

pure-form

 na tag <form>

Pure Form


&lt;form class="pure-form"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;A compact inline form&lt;/legend&gt;

        &lt;input type="email" placeholder="Email"&gt;
        &lt;input type="password" placeholder="Password"&gt;

        &lt;label for="remember"&gt;
            &lt;input id="remember" type="checkbox"&gt; Remember me
        &lt;/label&gt;

        &lt;button type="submit" class="pure-button pure-button-primary"&gt;Sign in&lt;/button&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;

Form na vertical – apenas adicione a classe

pure-form-stacked

na tag <form>

Pure Form Stacked


&lt;form class="pure-form pure-form-stacked"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;A Stacked Form&lt;/legend&gt;

        &lt;label for="email"&gt;Email&lt;/label&gt;
        &lt;input id="email" type="email" placeholder="Email"&gt;

        &lt;label for="password"&gt;Password&lt;/label&gt;
        &lt;input id="password" type="password" placeholder="Password"&gt;

        &lt;label for="state"&gt;State&lt;/label&gt;
        &lt;select id="state"&gt;
            &lt;option&gt;AL&lt;/option&gt;
            &lt;option&gt;CA&lt;/option&gt;
            &lt;option&gt;IL&lt;/option&gt;
        &lt;/select&gt;

        &lt;label for="remember" class="pure-checkbox"&gt;
            &lt;input id="remember" type="checkbox"&gt; Remember me
        &lt;/label&gt;

        &lt;button type="submit" class="pure-button pure-button-primary"&gt;Sign in&lt;/button&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;

Form alinhada – apenas adicione a classe

pure-form-aligned

 na tag <form>

Pure Form Aligned


&lt;form class="pure-form pure-form-aligned"&gt;
    &lt;fieldset&gt;
        &lt;div class="pure-control-group"&gt;
            &lt;label for="name"&gt;Username&lt;/label&gt;
            &lt;input id="name" type="text" placeholder="Username"&gt;
        &lt;/div&gt;

        &lt;div class="pure-control-group"&gt;
            &lt;label for="password"&gt;Password&lt;/label&gt;
            &lt;input id="password" type="password" placeholder="Password"&gt;
        &lt;/div&gt;

        &lt;div class="pure-control-group"&gt;
            &lt;label for="email"&gt;Email Address&lt;/label&gt;
            &lt;input id="email" type="email" placeholder="Email Address"&gt;
        &lt;/div&gt;

        &lt;div class="pure-control-group"&gt;
            &lt;label for="foo"&gt;Supercalifragilistic Label&lt;/label&gt;
            &lt;input id="foo" type="text" placeholder="Enter something here..."&gt;
        &lt;/div&gt;

        &lt;div class="pure-controls"&gt;
            &lt;label for="cb" class="pure-checkbox"&gt;
                &lt;input id="cb" type="checkbox"&gt; I've read the terms and conditions
            &lt;/label&gt;

            &lt;button type="submit" class="pure-button pure-button-primary"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;

Para analisar todos os tipo disponíveis de formulário acesse purecss.io/forms

Button

Para criar um botão com o Pure, basta adicionar a classe

pure-button

para tag <a> ou <button> . Também funciona com outras tags, porém da a função de botão ao item.

Exemplo:

Pure Button


&lt;a class="pure-button" href="#"&gt;A Pure Button&lt;/a&gt;
&lt;button class="pure-button"&gt;A Pure Button&lt;/button&gt;

O Pure possui uma série de funcionalidades para os botões, confira todas no link: purecss.io/buttons

Tabelas

Para estilizar a tabela com o Pura basta adicionar a classe

pure-table

na tag <table>.

Exemplo:

Pure Table


&lt;table class="pure-table"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;#&lt;/th&gt;
            &lt;th&gt;Make&lt;/th&gt;
            &lt;th&gt;Model&lt;/th&gt;
            &lt;th&gt;Year&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;

    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;Honda&lt;/td&gt;
            &lt;td&gt;Accord&lt;/td&gt;
            &lt;td&gt;2009&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Toyota&lt;/td&gt;
            &lt;td&gt;Camry&lt;/td&gt;
            &lt;td&gt;2012&lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
            &lt;td&gt;3&lt;/td&gt;
            &lt;td&gt;Hyundai&lt;/td&gt;
            &lt;td&gt;Elantra&lt;/td&gt;
            &lt;td&gt;2010&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

O Pure também possui mais estilos para tabelas, confira todas no link: purecss.io/tables

Menus

Um dos pontos fortes do Pure são os Menus que realmente são bem feitos levando em conta os atuais padrões de usabilidade.
Para adicionar um menu você precisa adicionar a seguinte classe em uma tag <div> 

pure-menu pure-menu-open pure-menu-horizontal

 e declarar os itens do menu em formato de lista.
Você também pode adicionar a classe

pure-menu-selected

para marcar o item principal do menu e se desejar da um titulo ao menu, basta inserir a tag <a> com a classe

pure-menu-heading

fora da lista que vai agregar os valores do menu.

Exemplo:

Pure Menu


&lt;div class="pure-menu pure-menu-open pure-menu-horizontal"&gt;
    &lt;a href="#" class="pure-menu-heading"&gt;Site Title&lt;/a&gt;

    &lt;ul&gt;
        &lt;li class="pure-menu-selected"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Flickr&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Messenger&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Sports&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Finance&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

Também existem outras variações do Menu com Pure, confira no Link: purecss.io/menus

Qualquer duvida encaminhe um comentário.

🙂