Framework Foundation 4 – Componentes CSS – Parte 1

Dando continuidade a introdução do Framework Foundation 4, neste artigo vamos analisar os componentes CSS presentes no Framework segundo a documentação oficial da Zurb.

Componentes CSS

Na documentação do Foundation existe uma seção chamada componentes CSS, que basicamente são estilos prontos de CSS para componentes básicos de layout, por exemplo um painel, caixa de alerta e etc. A intenção deste artigo é analisar os componentes mais importantes presentes na documentação padrão pois nem todos são realmente necessários para construção de um website.

Note que para compreender corretamente os itens abordados você vai precisar de um prévio conhecimento do Framework ou é recomendado antes dar uma olhada no post de introdução ao Foundation.

Os componentes CSS disponíveis segundo a documentação são:

  • Global Styles
  • Alert Boxes
  • Panels
  • Pricing Tables
  • Progress Bars
  • Tables
  • Thumbnails
  • Flex Video

Não vamos abordar o primeiro item “Global Styles” porque para este item é necessário conhecimento no minimo intermediário em CSS e não vamos analisar todos os itens pois o intuito é apresentar os mais funcionais para o desenvolvimento padrão de websites.

Alert Boxes

Como o próprio nome diz, é uma caixa de alerta que você pode configurar para aparecer quando algum processo é executado no website ou por exemplo quando algum campo da form não está correto quando clicado no botão enviar.

Foundation AlertBoxes Exemplo

Note que para vários elementos do Framework são utilizadas as classes CSS round, radius, disabled, alert, success secondary que estilizam as bordas dos elementos e sua funcionalidade mediante a cor como na imagem.

Considere a seguinte marcação para o exemplo da imagem:

 
<div data-alert class="radius alert alert-box">
 borda radius, caixa de alerta
 <a href="#" class="close">&times;</a>
</div>
<div data-alert class="round success alert-box">
 borda round, alert-box de operação bem sucedida
 <a href="#" class="close">&times;</a>
</div>
<div data-alert class="alert-box">
 borda padrão, alert-box padrão
 <a href="#" class="close">&times;</a>
</div>
<div data-alert class="secondary alert-box">
 borda padrão, alert-box secundário
 <a href="#" class="close">&times;</a>
</div>

Uma observação importantes sobre este componente é que comparado a outros, não é só utilizar uma classe para que ele ative sua funcionalidade 100%, no caso das alert-boxes você precisa saber onde deve implementar e como implementar (com JavaScript por exemplo para apresentar a box quando clicado um botão por exemplo), uma caixa de alerta não fica visível em uma pagina a não ser que seja para mostrar uma informação importante ou momentânea por exemplo.

Panels

O Panel é um componente CSS do Foundation que da a possibilidade de se criar, digamos, um painel para enfase de conteúdo. É muito utilizada para transformar uma DIV em um quadro para uma imagem por exemplo, ou um quadro que apresenta um texto, pois estiliza os atributos margin e padding do quadro, como na imagem:

Foundation Panel Examplo

Considere o seguinte código para o resultado da imagem:

 
<div class="row">
<div class="large-6 columns">

<div class="callout panel">
<!-- start slipsum code -->
<h2>Hold on to your butts</h2>
Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?
<!-- end slipsum code -->
</div>

</div>

<div class="large-6 columns">

<div class="panel">
<!-- start slipsum code -->
<h2>Hold on to your butts</h2>
Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?
<!-- end slipsum code -->
</div>

</div>
</div>

Você deve estar se perguntando “e se eu desejar utilizar de outra cor?”, neste caso o Foundation da algumas opções de customização que vão desde a alteração do atributo CSS na classe dos Panels até a criação de uma nova classe para abordar a necessidade. Confira aqui exemplos para alterar o Panel.

Pricing Tables

Esse também é um item bastante interessante que tem pouca utilização, que é uma tabela de preço pronta, basta apenas você declarar as informações que nela vão ser apresentadas. Vamos analisar a imagem:

Foundation Princing Table Exemplo

Podemos considerar o seguinte código para a imagem:

 
<ul class="pricing-table">
  <li class="title">Standard</li>
  <li class="price">$99.99</li>
  <li class="description">An awesome description</li>
  <li class="bullet-item">1 Database</li>
  <li class="bullet-item">5GB Storage</li>
  <li class="bullet-item">20 Users</li>
  <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
</ul>

Neste item não temos muitas informações para abordar pois basta declarar as informações pertinentes aos respectivos campos, mas vale notar que a estilização de componentes padrão pode ser utilizada livremente nos elementos que aceitarem a mesma.

No próximo post vamos abordar os componentes restantes, mas como prévia temos o ultimo exemplo que na verdade é um link que apresenta um exemplo funcional das várias funcionalidade do Framework.

Exemplos funcionais do Framework Foundation

Qualquer duvida encaminhe um comentário.

🙂