Framework Foundation 4 – Componentes CSS – Parte 2

Neste post vamos dar continuidade ao tutorial de introdução aos componentes CSS do Framework Foundation 4.

No post anterior finalizamos com o item Princing Tables, então vamos dar continuidade com o proximo item da lista, Progress Bar, qualquer duvida relacionada aos itens anteriores podem ser sanadas na primeira parte do tutorial.

Progress Bar

O Foundation conta com uma forma simples e fácil de adicionar barra de progresso a alguma função do seu website. Vale ressaltar que praticamente todos os componentes CSS do Framework seguem o mesmo padrão de classes, o que torna cabível a configuração da barra de progresso por parte do desenvolvedor.

Foundation Progress Bar Example

Para testar o exemplo da imagem basta inserir o seguinte código:

<div class="progress large-2 success round">
<span class="meter" style="width: 20%"></span>
</div>
<div class="progress large-4 alert radius">
<span class="meter" style="width: 40%"></span>
</div>
<div class="progress large-6 secondary">
<span class="meter" style="width: 60%"></span>
</div>
<div class="progress large-8 ">
<span class="meter" style="width: 80%"></span>
</div>

Note os parâmetros utilizados para configurar o funcionamento da barra de rolagem pois são esses os parâmetros que você pode configurar para automatizar a barra de progresso como por exemplo, fazer com que ela preencha automaticamente a barra conforme o usuário preenche um formulário.

Para mais informações e exemplos visite a seção da documentação oficial do Framework.

Tables

O Foundation estiliza automaticamente qualquer tabela que você tenha configurada em sua página, pois o estilo CSS é empresado para a tag table. Segue imagem e exemplo da aplicação.

Foundation Table Exemplo

<table>
 <thead>
  <tr>
   <th width="200">Table Header</th>
   <th>Table Header</th>
   <th width="150">Table Header</th>
   <th width="150">Table Header</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Content Goes Here</td>
   <td>This is longer content.</td>
   <td>Content Goes Here</td>
   <td>Content Goes Here</td>
  </tr>
  <tr>
   <td>Content Goes Here</td>
   <td>This is longer content.</td>
   <td>Content Goes Here</td>
   <td>Content Goes Here</td>
  </tr>
  <tr>
   <td>Content Goes Here</td>
   <td>This is longer content.</td>
   <td>Content Goes Here</td>
   <td>Content Goes Here</td>
  </tr>
 </tbody>
</table>

Como todos os componentes CSS do Framework, você pode entrar no código CSS e estiliza-lo da maneira que achar melhor, mas por padrão a tabela não tem pré estilos configurados além deste.

Maiores informações sobre essa seção na documentação oficial do Framework.

Thumbnails

Esse componente é indicado para quem deseja fazer um link em uma imagem para por exemplo visualizar ela ampliada. O framework estiliza a imagem em questão criando uma espécie de miniatura thumb, bem parecido com a maneira que o windows apresenta suas fotos. Vamos analisar a imagem.

Framework Foundation Thumbnails Example

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

<a class="th radius" href="../img/demo.png">
 <img src="../img/demo.png">
</a>

Note que você pode utilizar a class th radius em qualquer imagem, mas faça uso do bom senso para não causar conflitos de usabilidade.

Flex Video

Esse componente é utilizado para corrigir problemas de visualização de videos em dispositivos móveis, ele torna responsivos os videos presentes na pagina.

Para utilizar esse recurso, basta colocar o embbed do video dentro de uma <div class=”flex-video”>, segue exemplo:

<div class="flex-video">
  <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
</div>

Esse componente conta com duas variações de classe, a widescreen, que deixa o video com spec wide e o  vimeo, que adapta a div para videos do vimeo.

Kitchen Sink

Esse não é um componente do Framework Foundation, na verdade é uma página com um exemplo live de todos os elementos apresentados até agora nesses tutoriais de introdução ao Foundation.

Link para Kitchen Sink

Com isso encerramos esta etapa de introdução aos componentes CSS do Framework Foundation 4, no próximo e ultimo tutorial vamos analisar algumas funções JavaScript presentes no Framework e como utiliza-las em projetos.

Qualquer duvida encaminhe um comentário.

🙂