Grid, spacing y units
Columns
Las columnas se pueden usar como layout elements independientes o anidados dentro de un div con Wrapper class to display side-by-side. Por ejemplo, puede combinar Column 6 col Center Element para obtener un centerered content block 6 columnas. O nest Column 4 column y Column Auto Col inside a Column Wrapper div para lograr unlayout de lado a lado.
Viewport-Based Columns
Las columnas basadas en viewports son excelentes para cuando necesitas aterrizar con precisión en el grid. Por ejemplo, una sidebar lateral de 4 columnas o un content block centrado de 8 columnas. El aspecto útil de las unidades VW es que, a diferencia de las unidades porcentuales, mantienen su tamaño independientemente del tamaño del contenedor.
Una regla general es usar unidades VW cuando el ancho de las columnas (en relación al grid) es primordial y columnas basadas en porcentajes cuando el número de columnas es primordial.
Hay dos razones para evitar measurements de 100VW o combinar columnas que suman 100VW. Una es que los diferentes navegadores tienen en cuenta las barras de desplazamiento de diferentes maneras, por lo que siempre querrá dejar 20 píxeles de margen de maniobra para esas situaciones. La otra es que los errores de redondeo a veces calculan que una columna es 1 píxel demasiado corta o demasiado larga. Para resolver estos casos, se recomienda definir una columna como Column Auto Col , que simplemente se estirará para completar el espacio restante. Entonces, en lugar de usar Column 8 Col y Column 6 Col , usarías Column 8 Col y Column Auto Col .
Percentage-Based Columns
Las columnas basadas en porcentajes son mejores cuando necesitas repetir un block content una y otra vez. Por ejemplo, un diseño de 3 cards repetidas. Los porcentajes le darán la flexibilidad de dividir el espacio de manera uniforme, incluso si el div principal no tiene exactamente 12 columnas porque las unidades de porcentaje se ajustan al tamaño de su div principal.
Ajustando Columns entre Viewports
El column suite tiene un conjunto de clases para cada viewport, por lo que se pueden realizar ajustes sobre la marcha apilando clases. Por ejemplo, puede usar Column 6 Col 8 Col Tab 10 Col Mob para un div que se ensancha en pantallas más pequeñas. O podrías tener dos columnas con las clases Columnn La mitad Whole mob que se alineará uno al lado del otro en el desktop, pero se apilará en la versión mobile.
Margin Offsets
Es importante que los elementos repetidos tengan un padding equilibrado para que sean intercambiables entre sí y entre viewports. Por ejemplo, un conjunto de cards de testimonios puede ser 3 en desktop, 2 en la tableta y 1up en mobile. Por lo tanto, no deseas hacer malabarismos con muchos paddings laterales específicos para diferentes viewports. Es preferible padding en todos los lados para que las tarjetas se puedan apilar de la forma que sea necesario sin necesidad de ajustar de nuevo el padding. El problema es que el all-sides padding va a sacar los bordes exteriores del grid.
CSS Grid abordó esto moviendo el padding al parent div. Pero usando negative margins, podemos lograr cards secuenciales intercambiables sin desviarnos del grid. Por ejemplo, si tus inner columns usan Padding - S , añadiendo Margin Offset - S al parent div ( Column Wrapper ) se aplicará el margen negativo de compensación.
Cuando aplicas un Margin Offset al Column Wrapper , deberá estar anidado dentro de otro div para lograr bottom margin porque no puede aplicar dos márgenes diferentes al mismo lado del mismo elemento.
Las líneas del grid que se muestran en la captura de pantalla anterior son accesibles en cualquier momento a través Body ( All Pages) .
Padding y spacing
Knockout usa unidades VW para el padding y el spacing porque acomodan mejor el contenido en todos los viewports, se ajustan junto con el grid y son más predecibles de usar que las unidades porcentuales. Al usar unidades de píxeles o REM, cualquier padding o margins tendrá el mismo tamaño, ya sea que el viewport tenga 992 píxeles de ancho o 1439 píxeles de ancho, lo que obligará al contenido a ajustarse o reducirse a medida que el viewport se reduce. Con las unidades VW, el padding y los margins crecen o se reducen junto con el viewport, lo que reduce la carga del contenido para cambiar el tamaño. El padding y los margins también se pueden lograr con unidades porcentuales, pero dado que el porcentaje es relativo al parent div, el 25 % de un div de ancho completo será el doble de padding que el 25 % de un div que solo abarca la mitad del viewport Las unidades de VW nos brindan un margin y un padding de comportamiento responsive que se pueden aplicar de manera predecible a cualquier elemento.
Las unidades de píxeles a veces son más adecuadas para el spacing de componentes interiores, cuando no es necesario expandir o contraer el spacing. Además, es probable que cualquier medida por debajo de media columna deba definirse en unidades de píxeles en viewports más pequeños para evitar que se reduzca demasiado.
Typography
Para el tamaño de letra, Knockout utiliza unidades de píxeles para optimizar la legibilidad en todos los viewports. Ausencia de compatibilidad con Webflow para funciones CSS avanzadas como min/max/clamp , que permiten un control más granular de la escala, es probable que el uso de unidades responsive dé como resultado un tipo optimizado en el punto medio de un viewport, pero demasiado grande o demasiado pequeño en los extremos. Así que usamos píxeles para la previsibilidad.
Sin embargo, en ventanas de visualización más grandes, las unidades VW permitirán el aumento de tamaño lineal, eliminando la creación de espacios negativos no deseados. Y los píxeles son fáciles de convertir matemáticamente a unidades VW por encima de 1440px.
Para los aspectos typography que son relevantes para el tamaño de la fuente, usamos relative unites: porcentaje o EM para line height y EM para letter spacing. Esto elimina la necesidad de volver a calcular las unidades de píxeles si el tamaño de la fuente cambia en algún momento en el futuro, conservando el tamaño relativo.
Dicen que hay varias formas diferentes de pelar una batata. Y lo mismo ocurre con muchas cosas en CSS. Es por eso que los frameworks pueden ser algo personal para los desarrolladores. Creemos que las unidades REM son excelentes para ciertos casos, especialmente cuando se escala el tipo de forma proporcional entre viewports. En Edgar Allan, reservamos el tamaño de fuente del cuerpo para el estilo predeterminado de type y confiamos en el zoom scaling de los navegadores para abordar las necesidades de accesibilidad. Pero si prefieres usar unidades REM, Knockout se puede personalizar para admitirlas actualizando los cálculos de CSS en el tipo de viewport grande incrustado dentro del Custom Code symbol.