Accounting for rounding errors Grid
I am looking for the perfect pixel grid. I've tried basic structures, but both have obvious rounding errors. I was hoping to start a conversation about how you guys account for such mistakes when trying to achieve perfect pixel design.
Chrome seems to look best with no visible error. Safari is the worst.
Here is a screenshot of the Bootstrap Grid screen in Safari
HTML:
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
<div class="col-md-1"><div class="content"></div></div>
</div>
<div class="row">
<div class="col-md-2"><div class="content"></div></div>
<div class="col-md-2"><div class="content"></div></div>
<div class="col-md-2"><div class="content"></div></div>
<div class="col-md-2"><div class="content"></div></div>
<div class="col-md-2"><div class="content"></div></div>
<div class="col-md-2"><div class="content"></div></div>
</div>
<div class="row">
<div class="col-md-3"><div class="content"></div></div>
<div class="col-md-3"><div class="content"></div></div>
<div class="col-md-3"><div class="content"></div></div>
<div class="col-md-3"><div class="content"></div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="content"></div></div>
<div class="col-md-4"><div class="content"></div></div>
<div class="col-md-4"><div class="content"></div></div>
</div>
<div class="row">
<div class="col-md-6"><div class="content"></div></div>
<div class="col-md-6"><div class="content"></div></div>
</div>
<div class="row">
<div class="col-md-12"><div class="content"></div></div>
</div>
</div>
(jsFiddle: http://jsfiddle.net/gnrhca1p/ )
Here's an example of a Foundation grid in Safari HTML:
</div>
<div class="row">
<div class="medium-2 columns"><div class="content"></div></div>
<div class="medium-2 columns"><div class="content"></div></div>
<div class="medium-2 columns"><div class="content"></div></div>
<div class="medium-2 columns"><div class="content"></div></div>
<div class="medium-2 columns"><div class="content"></div></div>
<div class="medium-2 columns"><div class="content"></div></div>
</div>
<div class="row">
<div class="medium-3 columns"><div class="content"></div></div>
<div class="medium-3 columns"><div class="content"></div></div>
<div class="medium-3 columns"><div class="content"></div></div>
<div class="medium-3 columns"><div class="content"></div></div>
</div>
<div class="row">
<div class="medium-4 columns"><div class="content"></div></div>
<div class="medium-4 columns"><div class="content"></div></div>
<div class="medium-4 columns"><div class="content"></div></div>
</div>
<div class="row">
<div class="medium-6 columns"><div class="content"></div></div>
<div class="medium-6 columns"><div class="content"></div></div>
</div>
<div class="row">
<div class="medium-12 columns"><div class="content"></div></div>
</div>
(jsFiddle: http://jsfiddle.net/ )
source to share
Liquid grids for perfect pixel design?
Bootstrap and Foundation are both fluid. You can create your own grid system using percentages up to the breakpoint, say something under 600px and then at 600px minimum width, 900px, 1200px, etc., Start creating pixel-sized containers and columns ... This is what you see with some realizations of Freemasonry.
source to share
I made a grid with no rounding errors and where the first and last cell matches the edges, which I use everywhere:
https://jsfiddle.net/8hz0wycv/
css is compiled from this less CSS:
@colBaseUnit: 8.5%;
.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12 {
float: left;
margin-left: 2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:first-child {
margin-left: 0;
}
}
.span1 {width: ((1 * @colBaseUnit) - 2%)}
.span2 {width: ((2 * @colBaseUnit) - 2%)}
.span3 {width: ((3 * @colBaseUnit) - 2%)}
.span4 {width: ((4 * @colBaseUnit) - 2%)}
.span5 {width: ((5 * @colBaseUnit) - 2%)}
.span6 {width: ((6 * @colBaseUnit) - 2%)}
.span7 {width: ((7 * @colBaseUnit) - 2%)}
.span8 {width: ((8 * @colBaseUnit) - 2%)}
.span9 {width: ((9 * @colBaseUnit) - 2%)}
.span10 {width: ((10 * @colBaseUnit) - 2%)}
.span11 {width: ((11 * @colBaseUnit) - 2%)}
.span12 {width: ((12 * @colBaseUnit) - 2%)}
This works because 102% / 12 is 8.5% Everything except the first cells is (8.5% * X) - 2% wide, but with 2% left margin. Since the first cell has no left margin, it still adds up to 100% for sure.
Cells are required to have a spacing of 2%, but luckily this is usually a pretty good spacing width, not too little or too many.
It will have a slight rounding error, sometimes around one pixel, depending on the overall width, this is inevitable. But since the percentages themselves have no rounding errors, this is just the last step, where the width is made in whole pixels, where the error appears. And it looks like it always rounds, so it never overflows the width. And if you choose the maximum width that gives rounded numbers when multiplied by 0.085, you will almost never see a 1px rounding error.
The best thing about this system is that since there are no left and right margins, you can nest it (without using complex negative margin tricks) and it just works (the inner spacing will be slightly different). It is for this reason that I decided to create my own grid system.
source to share