Uma grade CSS muito simples com caneta

Twitter Bootstrap é incrível, mas às vezes mais simples é melhor e usar um sistema completo pode ser um pouco exagero. Você não precisa de um framework CSS flexível e responsivo rico, você só precisa de um layout de grade simples e deseja manter seu CSS enxuto .

Você quer apenas aquelas classes básicas de layout CSS, mas não está com vontade de fazer você mesmo.

Bem, se você estiver no Node.js e estiver usando a caneta com a ponta , sinta-se à vontade para usar estas linhas:

// Defaults

gridColumnCount ?= 12
gridColumnWidth ?= 60
gridPadding     ?= 20

// Grid, row, cell

.l-grid
  width unit(gridColumnCount * (gridColumnWidth + gridPadding), px)
  margin 0 auto

.l-row
  margin unit(gridPadding, px) 0
  clearfix()
  &.l-compact
    margin 0

.l-cell
  float left
  display inline
  width (gridColumnWidth)px
  margin 0 unit(gridPadding / 2, px)

  .l-row
    margin 0 unit(-(gridPadding / 2), px) unit(gridPadding, px)
    &.l-compact
      margin-bottom 0

  // Generate span & offset classes
  for i in 1..gridColumnCount
    unless i is 1
      &.l-span-{i}
        width unit(i * gridColumnWidth + (i - 1) * gridPadding, px)
    unless i is gridColumnCount
      &.l-offset-{i}
        margin-left unit(gridPadding / 2 + i * (gridColumnWidth + gridPadding), px)

… ou obtenha-os diretamente desta página do GitHub .

Você pode usar as classes geradas em seu HTML assim:

<div class="l-grid">
  <div class="l-row">
    <div class="l-cell">
    <div class="l-cell">
    ...
    <div class="l-cell">
  </div>
  <div class="l-row">
    <div class="l-cell l-offset-3">
    <div class="l-cell l-offset-1 l-span-2">
    ...
    <div class="l-cell">
  </div>
</div>

As linhas também podem ser aninhadas, assim:

<div class="l-grid">
  <div class="l-row">
    <div class="l-cell">
    <div class="l-cell">
    ...
    <div class="l-cell">
  </div>
  <div class="l-row">
    <div class="l-cell l-offset-3">
    <div class="l-cell l-offset-1 l-span-2">

      <!-- Nested row -->
      <div class="l-row l-compact">
        <div class="l-cell">Nested cell content 1</div>
        <div class="l-cell">Nested cell content 2</div>
        ...
        <div class="l-cell">
      </div>

    ...
    <div class="l-cell">
  </div>
</div>