Configuración de Knockout
Knockout se puede personalizar para adaptarse a las necesidades de cualquier proyecto. (Consultas: Grids avanzadas ). Pero comenzar es tan fácil como aplicar el estilo de la marca (estilos de letra, colores, botones, etc.) a la guía de estilo.
Esta guía te va a guiar a través de esa aplicación.
Aplicación de estilos tipográficos
Definir los estilos de letra es la parte más complicada de la configuración, pero confía en nosotros cuando te decimos que te vas a alegrar de haberlo hecho una vez que comiences a construir porque el tiempo que de otro modo dedicarías a volver a declarar los estilos de letra en el transcurso de un proyecto realmente se va acumulando.
1. Body Type
La gran mayoría de los tipos de su sitio se heredarán de Body (All Pages) . Será el estilo predeterminado para párrafos, botones, listas y más, por lo que esta debería ser la forma predeterminada en que desea que se muestre el texto, con excepciones a estos estilos que se aplican solo según sea necesario.
Nos gusta usar unidades PX para los tamaños tipográficos con el fin de optimizar la legibilidad en una ventana de visualización determinada, y nos gusta usar porcentajes o unidades EM para la altura de línea para que no tengamos que volver a calcular si cambia el tamaño de la fuente. Y usamos unidades EM para el espaciado entre letras por la misma razón.
Además, algunos ajustes finos de tipo se pueden encontrar en el General CSS HTML incrustado dentro del símbolo de código personalizado. (Esto es especialmente útil para habilitar la font-feature-settings para fuentes específicas, pero nuestra configuración predeterminada generalmente debería funcionar de inmediato).
2. Titulares
Hay una configuración rápida de Headlines en la página de inicio de la guía de estilo que te permitirá acceder fácilmente a la definición de sus headline styles.
Pensamos en los headline styles ( XXL a XS ) como independientes de los elementos semánticos H1-H6, pero no del todo. Puede haber ocasiones en las que Headline XL es posible que deba ser un H2 o un H3 para fines de SEO, dependiendo de dónde se encuentre en la página. Por lo tanto, es importante que las clases anulen los estilos H2 o H3 predeterminados. Pero para los elementos de texto enriquecido, donde no se pueden aplicar clases individuales, queremos que los elementos semánticos y los estilos se correspondan.
Así que tendemos a aplicar la tipografía, el peso, el tamaño y & altura de línea en el nivel de elemento ( H1 (All Pages) ), luego aplique el peso, el tamaño y la altura de línea de forma redundante a su clase combinada de título correspondiente ( Headline XXL ).
Una vez que tenemos los titulares configurados como nos gustaría en el escritorio, pasamos a aplicar los ajustes necesarios en los viewports para las tabletas y dispositivos móviles, aplicando los estilos de marca a las clases de ventana gráfica (como Headline Tab XXL ) y aplicando los ajustes de tamaño necesarios en los viewports tanto a las clases de escritorio como a las clases de escritorio y elementos semánticos.
Trata de no aplicar colores a los titulares para evitar romper la herencia. Por ejemplo, si un sitio es generalmente texto negro sobre blanco, podemos cambiar el texto del cuerpo y titulares para una sección dada a texto blanco sobre negro simplemente aplicando Background - Black y Text - White al div principal sin tener para abordar cada elemento individualmente.
3. Varios. Estilos tipográficos
Hay algunas clases en Styles > Página de texto en la guía de estilo que puede ser útil para actualizar, incluidos tamaños de tipografías alternativss ( Text L , Text M , Text S ), alternate fonts ( Serif , Sans ), y alturas de línea alternativas ( Line Height 100 , Line Height 133 , etc.). Y puedes sentirte libre de agregar a estas clases si tu proyecto lo requiere.
Webflow puede tener bastantes errores cuando se trata de heredar alturas de línea, por lo que el número en el Height box no siempre es preciso. En la mayoría de los casos, el valor predeterminado (cuando el título es naranja) es relativo al tamaño de fuente Body (All Pages) . Entonces, para una clase como Text S , que se desvía del tamaño de fuente Body (All Pages) , una naranja titulada 150% sería relativo al tamaño de fuente del cuerpo, mientras que un título azul 150 % sería relativo al tamaño del Text S . Entonces, si está cambiando un tamaño de fuente con una nueva clase, generalmente es bueno seguir adelante y declarar la altura de la línea, incluso si parece correcta.
4. Tipo Viewport Grande
¿Por qué optimizar manualmente los viewports cuando no es necesario? Knockout está diseñado para escalar por encima de 1440 mediante la conversión de unidades PX a VW, y luego regrese a PX en 1920 para crear un ancho máximo. Para el tipo, esto se hace a través de un conjunto de funciones de cálculo en el tipo del viewport grande incrustado dentro del símbolo de código personalizado.
Simplemente reemplaza las variables con los tamaños de píxeles del escritorio.
La función calc divide el tamaño tipográfico del escritorio a 1440 para obtener una conversión VW para el viewport 1440, y multiplica el tamaño de fuente de desktop por 1,3333 para la conversión de ancho máximo.
Siéntate libre de agregar soporte para cualquier otra clase que tu proyecto requiera.
Si deseas eliminar el ancho máximo de 1920 px y hacer que el diseño se expanda infinitamente, el Finsweet Chrome Extension te permitirá eliminar los estilos del viewport de 1920. Solo recuerda eliminar también las funciones de cálculo de 1920 del elemento incrustado del Large Viewport Type en el símbolo Custome Code.
Colores
Hay un área de configuración rápida de color en la página de inicio de la guía de estilo que le permitirá acceder fácilmente a la aplicación de colores de marca. Sin embargo, es importante editar los colores a nivel de muestra, en lugar de a nivel de clase, porque varias clases comparten la misma muestra (es decir Text - Primary , Background - Primary , Button Primary ).
Si se necesitan colores adicionales, se pueden agregar al final como color swatches.
Botones
La página de botones le permite aplicar la marca a numerosos botones y CTA styles, cada uno con diferentes grados de herencia incorporados. Por ejemplo, ajustar el radio de la esquina de Button afectará a todos los demás estilos de botones.