Leve

4,8kb minificado, perfeito para mobile

Natural

Linguagem semântica, como no português escrito.

Inobstrusivo

Não se preocupe em sobrescrever estilos.

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

UMA
ONZE
DUAS
DEZ
TRÊS
NOVE
QUATRO
OITO
CINCO
SETE
SEIS
SEIS
SETE
CINCO
OITO
QUATRO
NOVE
TRÊS
DEZ
DUAS
ONZE
UMA
DOZE
QUATRO
QUATRO
QUATRO
<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).

Link
<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.

Link
<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

  • Listas sem ordem tem estilo básico
  • E podem ter até um nível interno
    • Lorem ipsum
    • Dolor sit amet
  • Lorem ipsum dolor
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
<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

Nome Idade Sistema Cidade
Estevan Maito 24 Linux Caxias do Sul
João Ninguém 30 Windows Lugar Algum
<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>
Fork me on GitHub