fa7ui - Framework CSS

Desenvolvido como atividade na cadeira de Aplicações ricas para internet.
Não foi planejado para ser utilizado em aplicações do mundo real.
Em desenvolvimento.

Colaboradores:

  • Renato Colaço
  • Bruno Maia
  • Francisco Helker

Começando

Grid

Possui 3 tipos de colunas: mobile, tablet e desktop.

Mobile: .col-mb-1

Tablet: .col-tb-1, .col-tb-2, .col-tb-3, .col-tb-4

Desktop: .col-dt-1, .col-dt-2, .col-dt-3, .col-dt-4, .col-dt-5, .col-dt-6

Tipografia

Títulos

Títulos de H1 até H6 foram normalizados e estilizados de acordo com sua ordem de importância.

Exemplos:

H1

 44px ou 2.75rem

H2

 36px ou 2.25rem

H3

 28px ou 1.75rem

H4

 20px ou 1.25rem
H5
 16px ou 1rem
H6
 13,6px ou 0.85rem

Menu

Menus horizontais podem ser usados com a adição da classe .menu-horizontal em uma <ul>.

Exemplo:

                        <div class="menu-horizontal"/>
 <ul>
   <li> <a href="#">Cadastro </a></li>
   <li> <a href="#">Lançamentos </a></li>
   <li> <a href="#">Contatos </a></li>
 <ul/>
<div/>

Tabelas

Tabelas

Produto Categoria Preço Ações
Produto 1 Alimentos 20,0 Ações
Produto 2 Limpeza 30,00 Ações
Produto 3 Bebidas 10,00 Ações

Estilos para Tabelas podem ser usados com a adição da classe .table.

Exemplo:

    
                        <table class="table"/>
 <thead class="header-tab">
   <tr>
    <th>Produtos</th>
    <th>Categorias</th>
    <th>Preços</th>
    <th>Ações</th>
   </tr> 
  <thead>
 <tbody>
  <tr>
    <th>Produto 1</th>
     <th>Alimentos</th>
     <th>20,00</th>
     <th>Preço</th>
     <th>Ações</th>
  </tr>
 </tbody>
</table>

Botões

Botões

Botões podem ser usados com a adição da classe .btn-padrao,
podendo ser usado em um <button> ou <input> elemento <p>;

Exemplo:

<button class="botao-padrao cor-alerta" type="submit" >Button <Button/>
<input class="botao-padrao" value="Input" type="button" >
<input class="botao-padrao cor-sucesso" value="Submit" type="submit" >

Palheta Cores

Cores

 Avisos de Alerta/Error !

 Avisos de Informações.

 Avisos de Sucesso !

Cores podem ser usadas com a adição da classe .cor-alerta, .cor-info, .cor-sucesso.

Exemplo:

<div class="cor-alerta">
 <strong> Avisos de Informações.<strong/>
  <a class="close" data-dismiss="alert" href="#" aria-hidden="true">x</a>
</div>
<div class="cor-info">
 <strong> Avisos de Informações.<strong/>
  <a class="close" data-dismiss="alert" href="#" aria-hidden="true">x</a>
</div>

Imagem e Vídeo

Imagem

Imagens podem se tornar responsivas com a adição da classe .fluid-image.

Exemplo:

<img src="#" class="fluid-image" alt="Imagem responsiva" />

Vídeos

Vídeos incorporados com tags video, iframe, object e embed se tornam responsivos envolvendo-os em uma div com a classe fluid-video.

Exemplo:

<div class="fluid-video">
<iframe width="560" height="315" src="..." frameborder="0" allowfullscreen> </iframe>
</div>

Vídeo 1

Video 2