No início tínhamos 960.gs. Uma grade fixa. Então, o web design responsivo foi lançado e todos migraram para grades baseadas em porcentagem.
As grades baseadas em porcentagem funcionavam bem, mas quebraram quando você começou a aninhá-las. Imagine que você tenha 2 elementos lado a lado em um contêiner de 1000px. Eles têm 49% de largura e têm uma margem de 2% entre eles. Isso funciona bem. Você acaba com colunas de 490 px de largura e uma medianiz de 20 px.
Mas quando você se aninha, as coisas se quebram. 2% de 1000px é maior do que 2% de 490px.
Isso era um problema real porque confundia toda a sua grade se as colunas não estavam em sincronia.
Essa era a grade do Bootstrap 2.
As pessoas finalmente se reuniram para resolver o problema. 2 soluções vieram dele.
- Grades baseadas em preenchimento CSS
- Grades de proporção de pré-processador
Grades baseadas em preenchimento são semelhantes ao que o Bootstrap 3 e o Foundation usam. Eles contornam o problema da sarjeta, mas em troca, você precisa escrever elementos extras sempre que quiser que eles tenham um fundo ou borda.
Tutorial da galeria deste problema
Grades de proporção de pré-processador são o que coisas como Susy, Jeet, Singularity e Bourbon Neat usam. Eles são muito bons porque contornam os dois problemas ilustrados, mas também são ruins porque você tem que se repetir muito na linguagem do pré-processador.
Por exemplo, com Jeet você tem que escrever a proporção do contexto pai para cada elemento que está aninhado para que sua fórmula saiba o tamanho das calhas.
É assim de alguma forma ou estilo para todos os sistemas de grade de proporção.
Há outro problema que você não pode especificar uma calha fixa com grades de proporção. Você apenas tem que “avaliar” e definir sua calha de acordo.
Ainda acho que isso é melhor do que escrever toneladas de marcações extras, então sou um fã de grades de proporção de pré-processador.
Agora … e se pudéssemos ter uma grade de proporção com os seguintes recursos:
- Calhas fixas para dimensionamento personalizado
- Larguras de proporção (frações) para grades dinâmicas
- Sem marcação extra
- Nenhum estilo extra para aninhamento
Bem, isso é o que doce, doce, faz.calc()
É por isso que fiz Elf e Dragon (Dragon é apenas Elf condensado em um único mixin).
Se você não precisa de suporte para Android ou IE8 antigo, então sugiro que você mude de qualquer sistema de grade que você está usando atualmente para Elf ou Dragon, já que está perdendo algumas grades realmente leves, bonitas e flexíveis.