Apresentação

Uma ferramenta para facilitar a criação de layouts com o objetivo de interferir o mínimo possível no layout, dando flexibilidade ao desenvolvedor (menos estilos, menor a necessidade de sobrescrever regras), além de semântica idêntica ao português falado (quatro colunas e já temos um grid!).

Se você está começando com CSS e procura por um projeto de fácil compreensão e em português ou quer apenas um framework que não fique no seu caminho te obrigando a escrever mais !important do que estilos propriamente ditos, fique conosco!

Como usar

1. Faça o download.
2. Adicione a pasta css ao seu projeto.
3. Adicione o código abaixo ao head do seu html.

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/organico.min.css">

Grid

O grid responsivo é composto por 12 colunas que se adaptam ao tamanho da janela ou dispositivo.

• Linhas (.linha) devem ser colocadas dentro de um container (.container) para alinhamento apropriado.
• Use linhas para criar seções horizontais de colunas.
• O conteúdo deve ser inserido em colunas (.coluna ou .colunas) que devem ser filhas imediatas de linhas (.linha).
• Colunas são criadas especificando uma quantidade (uma a doze) e o termo apropriado de acordo com a quantidade, coluna ou colunas.
• É importante seguir esta ordem pois cada elemento introduzido anteriormente, produz um efeito sobre os espaçamentos do layout.
• Flexbox é utilizado para facilitar a disposição do conteúdo, além de evitar hacks com floats e clears.

Exemplo

<div class="linha">
  <div class="uma coluna">UMA</div>
  <div class="onze colunas">ONZE</div>
</div>
  <div class="linha">
  <div class="duas colunas">DUAS</div>
  <div class="dez colunas">DEZ</div>
</div>
  <div class="linha">
  <div class="tres colunas">TRÊS</div>
  <div class="nove colunas">NOVE</div>
</div>
  ...
<div class="linha">
  <div class="quatro colunas">QUATRO</div>
  <div class="quatro colunas">QUATRO</div>
  <div class="quatro colunas">QUATRO</div>
</div>

Tipografia

Cabeçalhos são identificados pelo respectivo elemento padrão. Nenhuma classe é necessária. O tamanho de fonte padrão (font-size) para o corpo do texto é de 16px, com altura de linha (line-height) de 1.6.

Exemplo

Cabeçalho 1

Cabeçalho 2

Cabeçalho 3

Cabeçalho 4

Cabeçalho 5

Cabeçalho 6

Parágrafo em negrito com itálico, um pouco de sublinhado e marcação.

Pra finalizar, um link.

<h1>Tipografia</h1>
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
<p>Parágrafo em <strong>negrito</strong> com <em>itálico</em>, um pouco de <u>sublinhado</u> e <mark>marcação</mark>.</p>
<p>Pra finalizar, um <a href="#">link</a>.</p>

Botões

Botão padrão

Botão com o mínimo de estilo, criado simplesmente inserindo um elemento que resulte em um botão, ou adicionando a classe .botao a um link (a).

<button>Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<a href="#" class="botao">Link</a>

Botão destacado

Botão em contraste com a cor padrão, criado ao adicionar as classes .botao e .destacado aos elementos que resultem em botões.

<button class="botao destacado">Button</button>
<input type="button" value="Input" class="botao destacado">
<input type="submit" value="Submit" class="botao destacado">
<a href="#" class="botao destacado">Link</a>

Formulários

Dentro ou fora de um formulário (form), os elementos input dos tipos email, number, search, text, tel, url e password, textarea, select e label recebem estilos sem a necessidade de adicionar classes.

Para que o elemento em questão ocupe a largura total da coluna em que está inserido, pode-se utilizar a classe utilitária .u-width-100, que faz com que o elemento ocupe 100% da largura.

Exemplo

<form>
  <div class="linha">
    <div class="seis colunas">
      <label for="nome">Nome</label>
      <input type="text" id="nome" class="u-width-100">
    </div>
    <div class="seis colunas">
      <label for="assunto">Assunto</label>
      <select id="assunto" class="u-width-100">
        <option value="1">Opção 1</option>
        <option value="2">Opção 2</option>
        <option value="3">Opção 3</option>
      </select>
    </div>
  </div>
  <div class="linha">
    <div class="doze colunas">
      <label for="mensagem">Mensagem</label>
      <textarea id="mensagem" rows="10" class="u-width-100"></textarea>
    </div>
  </div>
  <label>
    <input type="checkbox"> Aceitar os termos
  </label>
  <input type="submit" value="Enviar" class="botao destacado">
</form>

Listas

Os elementos que compõem listas são estilizados diretamente, não havendo assim a necessidade da adição de classes. Ainda, é possível inserir listas dentro de listas.

Exemplo

<ul>
  <li>Listas sem ordem tem estilo básico</li>
  <li>
    E podem ter até um nível interno
    <ul>
      <li>Lorem ipsum</li>
      <li>Dolor sit amet</li>
    </ul>
  </li>
  <li>Lorem ipsum dolor</li>
</ul>

Códigos

Para facilitar a apresentação de pequenos trechos de código, estilos são aplicados aos elementos code e pre. Havendo necessidade de se apresentar longos trechos de código, recomenda-se o uso de uma biblioteca apropriada para a formatação, como highlight.js, utilizada nos exemplos por aqui.

Exemplo

Código em linha assim

.alguma-classe {
  background-color: blue;
}

<p>Código em linha <code>assim</code></p>
<pre><code>.alguma-classe {
  background-color: blue;
}</code></pre>

Tabelas

Uma tabela é estilizada diretamente também, evitando o uso de classes. Para atingir o resultado de largura total, é aconselhável o uso da classe utilitária .u-width-100.

Exemplo

<table class="u-width-100">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Idade</th>
      <th>Sistema</th>
      <th>Cidade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bill Jobs</td>
      <td>24</td>
      <td>Linux</td>
      <td>Oiapoque</td>
    </tr>
    <tr>
      <td>João Ninguém</td>
      <td>30</td>
      <td>Windows</td>
      <td>Lugar Algum</td>
    </tr>
  </tbody>
</table>

Utilidades

Conjunto de classes utilizadas com frequência em diversos elementos.

• .u-width-100 - Expande um elemento a 100% da largura do elemento em que ele está contido. Comum em formulários e imagens.

Imagens responsivas

É possível tornar uma imagem responsiva adicionando a classe .u-width-100 a ela.

Exemplo

<div class="linha">
  <div class="seis colunas">
    <img src="img/exemplo1.jpg" class="u-width-100">
  </div>
  <div class="seis colunas">
    <img src="img/exemplo2.jpg" class="u-width-100">
  </div>
</div>