Search code examples
bourbonneat

Difference between span-columns() and row() in Bourbon Neat

What is the difference between @include span-columns(12) and @include row()? Which should I use and when?

Solution

  • Here are the 3 options you have:

    div.span-12 {
  @include span-columns(12);
}

div.row {
  @include row();
}

div.fill-parent {
  @include fill-parent();
}

    And here is their output:

    div.span-12 {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
}

div.span-12:last-child {
  margin-right: 0; 
}

div.row {
  *zoom: 1;
  display: block; 
}

div.row:before, div.row:after {
  content: " ";
  display: table; 
}

div.row:after {
  clear: both; 
}

div.fill-parent {
  width: 100%; 
}

    If you only want an element to fill its parent, then fill-parent() is the best approach. If you want to add other elements inside the full-width element, then row() will take care of clearing the floats.

    Please don't ever use @include span-columns(12) as it ends producing a lot of irrelevant code.