Skip to content

Instantly share code, notes, and snippets.

@jackmcmorrow

jackmcmorrow/index.html

Created January 15, 2013 21:11
Show Gist options
  • Save jackmcmorrow/4542100 to your computer and use it in GitHub Desktop.
Save jackmcmorrow/4542100 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by jackmcmorrow. Fixing list of span blocks in Boostrap
Raw
index.html
<body>
<div class="container">
<hr />
<div class="row-fluid">
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
<div class="span1">Span1</div>
</div>
<hr />
<div class="row-fluid">
<div class="span2">Span2</div>
<div class="span2">Span2</div>
<div class="span2">Span2</div>
<div class="span2">Span2</div>
<div class="span2">Span2</div>
<div class="span2">Span2</div>
<div class="span2">Span2</div>
<div class="span2">Span2</div>
</div>
<hr />
<div class="row-fluid">
<div class="span3 ">Span3</div>
<div class="span3 ">Span3</div>
<div class="span3 ">Span3</div>
<div class="span3 ">Span3</div>
<div class="span3 ">Span3</div>
<div class="span3 ">Span3</div>
<div class="span3 ">Span3</div>
<div class="span3 ">Span3</div>
<div class="span3 ">Span3</div>
<div class="span3 ">Span3</div>
</div>
<hr />
<div class="row-fluid">
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
</div>
<hr />
<div class="row-fluid">
<div class="span6">Span 6 </div>
<div class="span6">Span 6 </div>
<div class="span6">Span 6 </div>
<div class="span6">Span 6 </div>
<div class="span6">Span 6 </div>
<div class="span6">Span 6 </div>
<div class="span6">Span 6 </div>
<div class="span6">Span 6 </div>
</div>
<hr />
<div class="row-fluid">
<div class="span12">Span 12</div>
<div class="span12">Span 12</div>
<div class="span12">Span 12</div>
<div class="span12">Span 12</div>
<div class="span12">Span 12</div>
<div class="span12">Span 12</div>
<div class="span12">Span 12</div>
</div>
</div>
Raw
script.js
//This mixin changes the way spans are treated
//Instead of putting a margin in each span, with this
//mixin I remove margin if I'm trying to make a list of boxes, for example.
//It only really works with row-fluid, tho... Since it calculates how many can fit in a line of spans.
//Obviously, it also only works in reasonable amounts of spans with the same size: 12 span1, 6 span2, 4 span3, 3 span4, 2 span6 and 1 span12. The others produce a fraction number, that clumbers the output CSS a bit.
//HAVEN'T TESTED MIXED SPANS YET
//Português
//Esse mixin muda como os spans são tratados.
//Ao invés de botar uma margem para cada span, ele remove a margem caso pule linha, se eu estiver fazendo uma lista de caixas, por exemplo.
//Só funciona dentro de row-fluid, no entanto, visto que calcula quantos spans de tamanho igual cabem em uma linha.
//Obviamente, também só funciona com quantidades razoáveis que tenham tamanho igual: 12 span1, 6 span2, 4 span3, 3 span4, 2 span6 e 1 span12. O resto dá número fracionado, sujando um pouco o CSS final, mas nada demais, acho.
//FALTA TESTAR QUANTIDADES MISTAS DE SPANS
Raw
style.scss
@import "compass";
@mixin realejo-span-correction {
//by cav_dan at www.realejo.com.br
.row-fluid {
$rlj-span: 1;
$rlj-span-max: 13;
@while $rlj-span < $rlj-span-max {
.span#{$rlj-span}:nth-child(#{12/$rlj-span}n + 1) {
margin-left: 0 !important;
}
$rlj-span: $rlj-span + 1;
}
}
}
@include realejo-span-correction;
body { background-color: #f0f0f0; padding: 40px;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment