twitter bootstrap - para - Contabilización de errores de redondeo Grilla

like bootstrap framework

Question

Estoy en busca de una cuadrícula perfecta de píxeles. He probado los principales frameworks, pero ambos tienen obvios errores de redondeo. Esperaba comenzar una conversación sobre cómo ustedes explican esos errores cuando intentan lograr el diseño perfecto de píxeles.

Chrome parece dar lo mejor con casi ningún error visible. Safari es lo peor.

Aquí hay una captura de pantalla de Bootstrap Grid en 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/ )

Aquí hay un ejemplo de la grilla de la Fundación en 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/ )

Answer 1

Aquí hay un par de soluciones que encontré pero que no he intentado:

https://github.com/zurb/foundation/issues/3230

Answer 2

Me he hecho un sistema de cuadrícula sin errores de redondeo y donde la primera y la última celda están alineadas con los bordes, que uso en todas partes:

https://jsfiddle.net/8hz0wycv/

El CSS se compila a partir de este 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%)}

Funciona porque el 102% / 12 es el 8,5%. Todas menos las primeras celdas son (8,5% * X): 2% de ancho pero con un margen izquierdo del 2%. Como la primera celda no tiene margen izquierdo, todavía suma exactamente el 100%.

Requiere que las celdas tengan un espaciado de 2% pero, afortunadamente, este ancho suele ser bastante bueno para el espaciado, no demasiado pequeño y no demasiado.

A veces tendrá un ligero error de redondeo, alrededor de un píxel, dependiendo del ancho total, esto es inevitable. Pero dado que los porcentajes en sí mismos no tienen errores de redondeo, es solo el último paso donde el ancho se convierte en píxeles enteros donde aparece el error. Y parece que siempre se redondea hacia abajo para que nunca desborde el ancho. Y si elige max-widths que dan números redondos cuando se multiplican con 0.085, casi nunca verá un error de redondeo de 1px.

Lo mejor de este sistema es que, dado que no hay márgenes a izquierda y derecha, puedes anidarlo (sin utilizar complicados trucos de márgenes negativos) y simplemente funciona (aunque el espaciado interior será algo diferente). Esta es la razón por la que decidí hacer mi propio sistema de grillas.

Answer 3

Rejillas de fluidos para un diseño perfecto de píxeles

Bootstrap y Foundation son fluidos. Puedes hacer tu propio sistema de grillas usando porcentajes hasta un punto de quiebre, digamos cualquier cosa por debajo de 600px y luego a 600px min-width, 900px, 1200px, etc., y comienza a crear contenedores y columnas con el tamaño en píxeles. Esto es lo que se ve con algunas implementaciones de Masonry.