Tableless

Busca Menu

nth-child() e calc() – Uma proposta para o abandono de frameworks de grids responsivos

Seja o primeiro a comentar por

Apesar da adoção do Tableless para construção de layouts o conceito de tabela ainda persiste através de inúmeros frameworks de grids responsivos.

Além da semântica, o conceito Tableless prega, sempre que possível, levar a responsabilidade do layout para o CSS. O problema dos frameworks CSS focados em grids é que a especificação do layout continua dentro do HTML, descrita através de classes CSS, ancoradas diretamente aos elementos HTML, e de forma intrusiva, ou seja, os elementos <table> antigamente utilizados foram substituídos por elementos <div class=”col-“> para a criação do layout.

Exemplo de Grid Layout

Enquanto a especificação “CSS Grid Layout Module” ainda está no forno, proponho uma alternativa simples aos frameworks de grids responsivos, através da dupla dinâmica nth-child() e calc() presentes no CSS3, e que são suportadas pelos navegadores modernos, inclusive o IE9 (veja mais opções de compatibilidade aqui e aqui). Para um rápido entendimento destes recursos também confira estes artigos: http://tableless.com.br/nth-child/ e http://www.maujor.com/tutorial/css3-funcao-css-calc.php

Exemplo de formulário

Antes de partimos para o CSS, sempre que possível, precisamos usar elementos HTML5 semânticos, atributos WAI-ARIA, entre outros padrões de acessibilidade. Para este exemplo, o uso dos elementos de entradas de dados seguirão as técnicas preconizadas pelo eMAG 3.1 (ver http://emag.governoeletronico.gov.br/).

Para cada elemento de entrada de dados presente na estrutura form -> fieldset o seguinte padrão será seguido:

<label>
    <span>XXX:</span>
    <input type="text" value="">
</label>

Agora podemos aplicar o seguinte CSS para todos os elementos <label> presentes neste padrão.

form fieldset > label {
    display: block;
    float: left;
    width: calc(100% - 10px);
    height: 55px;
    margin-top: 10px;
    margin-right: 10px;
}
form fieldset label > input {
    float: left;
}
label > input {
    display: block;
    width: 100%;
}

Por termos utilizado o margin-right com 10px, este valor foi contabilizado na largura do label (uso da função calc) com a finalidade de que sua margem não ultrapasse os limites do contêiner. Isto foi feito para que possamos alterar o layout de uma coluna para múltiplas colunas diretamente pelo CSS. Com este estilo, cada campo de entrada de dados aparecerá disposto como uma lista, e se adaptará a largura do contêiner.

Exemplo de Código para Criação de Formulário

O próximo passo é poder criar mais de uma “coluna”, para que o campo Código e Nome fiquem na mesma “linha” quando o tamanho da tela for grande. O campo Código terá uma largura fixa de 80px e o campo Nome preencherá o restante do espaço do contêiner descontando a largura do campo Código juntamente com a margem de 10px dos dois labels.

Exemplo de Código para Criação de Formulário Responsivo

Com estes recursos podemos alterar o layout da página HTML diretamente pelo CSS sem que a estrutura do layout fique no próprio HTML. Além de criar colunas que se adaptam a largura do contêiner, é possível criar colunas com tamanhos fixos, evitando também o uso de classes CSS, que só é encorajado quando for realmente necessário.

O código fonte completo e a Demo deste exemplo encontra-se em http://codepen.io/rogeriodegoiania/pen/GJQmzb

Publicado no dia