created stacked pixel grid to represent a count - css

Question

I'm creating a pixel grid to represent a count (see image) and wondering what's the best way to go about it.
These tiles will need to be responsive (1px, 2px, 4px). I could build a super large sprite that contains all 196 combinations that is #4X so it scales perfectly to 2px and 1px and then build a css class...
<div class="pixel-block c-000"></div>
<div class="pixel-block c-001"></div>
...there has to be a better way?
Any ideas appreciated.

Answer 1

Here is a example of how it can be done without using a sprite with the 196 combinations, just a grid image and CSS.
The idea is simple:
Have a container that will hold:
The grid image (on top)
A "big" bar that will cover the whole height of the container.
A "small" bar that will cover only the remainder.
The "big bar" will have a width equal to the (count value / 14) * width of the hole in the grid.
The "low bar" will have a height equal to (count value % 14) * height of the hole in the grid.
I used a grid with 3px holes (2px + 1px separation), and the data- attributes to set the values of the count, and an indicator for the big bar (count / 14) and low bar (count % 14).
Here is a demo:
.box {
border:1px solid #6699aa;
width:43px;
height:43px;
position:relative;
background:#aaccff;
overflow:hidden;
display:inline-block;
}
.grid { background:url(http://i.imgur.com/w0jBLzK.png) no-repeat top left;
width:43px;
height:43px;
position:absolute;
top:0;
left:0;
z-index:3;
}
.bigbar {
height:43px;
width:0px;
background:black;
z-index:2;
float:left;
}
.lowbar {
float:left;
width:3px;
height:0px;
position:relative;
background:black;
}
.box[data-big="1"] .bigbar { width:3px; }
.box[data-big="2"] .bigbar { width:6px; }
.box[data-big="3"] .bigbar { width:9px; }
.box[data-big="4"] .bigbar { width:12px; }
.box[data-big="5"] .bigbar { width:15px; }
.box[data-big="6"] .bigbar { width:18px; }
.box[data-big="7"] .bigbar { width:21px; }
.box[data-big="8"] .bigbar { width:24px; }
.box[data-big="9"] .bigbar { width:27px; }
.box[data-big="10"] .bigbar { width:30px; }
.box[data-big="11"] .bigbar { width:33px; }
.box[data-big="12"] .bigbar { width:36px; }
.box[data-big="13"] .bigbar { width:39px; }
.box[data-big="14"] .bigbar { width:42px; }
.box[data-low="1"] .lowbar { height:3px; margin-top:39px; }
.box[data-low="2"] .lowbar { height:6px; margin-top:36px; }
.box[data-low="3"] .lowbar { height:9px; margin-top:33px; }
.box[data-low="4"] .lowbar { height:12px; margin-top:30px; }
.box[data-low="5"] .lowbar { height:15px; margin-top:27px; }
.box[data-low="6"] .lowbar { height:18px; margin-top:24px; }
.box[data-low="7"] .lowbar { height:21px; margin-top:21px; }
.box[data-low="8"] .lowbar { height:24px; margin-top:18px; }
.box[data-low="9"] .lowbar { height:27px; margin-top:15px; }
.box[data-low="10"] .lowbar { height:30px; margin-top:12px; }
.box[data-low="11"] .lowbar { height:33px; margin-top:9px; }
.box[data-low="12"] .lowbar { height:36px; margin-top:6px; }
.box[data-low="13"] .lowbar { height:39px; margin-top:3px; }
.box[data-low="14"] .lowbar { height:42px; margin-top:0px; }
<div class="box" data-count="0" data-big="0" data-low="0">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
<div class="box" data-count="5" data-big="0" data-low="5">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
<div class="box" data-count="34" data-big="2" data-low="10">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
<div class="box" data-count="196" data-big="14" data-low="0">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>