css - español - bootstrap tutorial
Ritmo vertical para el Bootstrap de Twitter (4)
¿Has mirado el marco de Square Grid CSS?
Un marco simple de CSS para diseñadores y desarrolladores, basado en 35 columnas de igual ancho. Su objetivo es reducir el tiempo de desarrollo y ayudarlo a crear sitios web bellamente estructurados.
Cuadrícula cuadrada proporciona una cuadrícula horizontal estándar, pero también mantiene una cuadrícula vertical, utilizando un "cuadrado" estándar de 28px. En realidad es solo una cuadrícula, no una biblioteca CSS completa como Bootstrap (es decir, sin botones, menús, etc.).
Solía hacerlo para un proyecto y me pareció bastante intuitivo, aunque al final decidí que era demasiado difícil para mí realizar un seguimiento tanto de la cuadrícula vertical como de la horizontal, especialmente cuando pensaba en un diseño sensible.
Puede combinar los dos, o al menos echar un vistazo al código fuente de la cuadrícula cuadrada que es un CSS bastante simple para obtener algunas ideas sobre cómo adaptar Bootstrap para satisfacer sus necesidades.
¿Existen complementos / extensiones / métodos para mantener el ritmo vertical para el proyecto Bootstrap de Twitter?
Es una tarea bastante laboriosa crear buenas plantillas de ritmo vertical, prefiero usar una solución precocida. Estoy abierto a sugerencias creativas, solo quiero que mis páginas estén bien alineadas al final.
Edit: para aclarar lo que estoy después ...
El ritmo vertical es una técnica que se utiliza para garantizar que cada elemento de una página se alinee de acuerdo con una cuadrícula horizontal. Esto se logra al configurar la altura, el relleno y el margen de cada artículo para que se ajusten a un tamaño de línea de unidad estándar. Si una línea de texto en un párrafo tiene 20px de altura (incluidos el margen y el relleno), quizás un encabezado 4 también tenga 20px de altura, y un encabezado 1 podría tener 40px de altura. Esto mantiene el ritmo del texto a través de columnas.
Quiero usar esta técnica en combinación con bootstrap (de twitter), pero sería bastante trabajo hacer que todo se vea bien. Por ejemplo, todos los botones deberían ajustarse a la misma definición de altura vertical que el texto de párrafo, etc ... Hay otros controles estándar utilizados en bootstrap que también necesitarían reglas para definir su altura de manera adecuada.
Podría comenzar con una solución genérica para el ritmo vertical, que ayudaría mucho a lograr lo que quiero, pero quería saber si alguien más ha empezado esto, o tiene alguna idea de otra manera de lograrlo.
Edit: Suponiendo que no hay nada como lo que quiero ...
Tal vez solo una buena plantilla css basada en ritmo vertical sería un buen punto de partida. Preferiblemente, algo que continúe desarrollándose, ya sea utilizable, bien pensado y adaptable.
Creo que lo que buscas es entendido. El problema es que está buscando un esquema de cuadrícula en una dimensión (un "ritmo vertical" establecido de acuerdo con, por ejemplo, alturas de líneas proporcionales ... que, como una manera de hablar, mide y alinea las cosas a lo largo de una página dada Eje Y) ... pero hacer las cosas de esa manera podría estar en desacuerdo con el sistema de cuadrícula de 12 columnas preexistente de Bootstrap (que, en contraste, mide y alinea las cosas a lo largo del eje X de la página). Desea "proporcionalizar" la altura de cada "fila" en el marco. PERO: tenga en cuenta que el diseño de Bootstrap está destinado a promover no solo la proporcionalidad a través de columnas únicamente para que se vea bien, sino también para hacer que las páginas respondan , es decir, permitir que los elementos de la página "fluyan" uno alrededor del otro verticalmente, y Nido con fluidez. Y, en ese sentido, los problemas relacionados con la altura de los elementos medidos a lo largo del eje Y ya se pueden tener en cuenta ... Recuerdo que la mayoría de los elementos tipográficos en el archivo CSS base tienen tamaños em proporcionales, y / o también proporcionalmente. y relleno inferior, etc. En términos generales, las cosas no son tan arbitrarias que el marco indica la necesidad de un estilo adicional en la forma en que lo está considerando.
Aun así: el archivo CSS básico de Bootstrap no es tan intolerablemente extenso que sería imposible para usted ajustar la altura de varias clases de elementos e ID sin mayores problemas. En cualquier caso, es muy poco probable que realmente tengas que hacer eso con cada elemento de estilo, ¿verdad? De hecho, como marco, Bootstrap incluye un estilo para muchos elementos que puede que ni siquiera estén en la aplicación para la que estás diseñando el extremo delantero. (EJEMPLO: ¿Su aplicación tiene menús desplegables? Genial. Puede diseñar el "ritmo vertical" de los menús desplegables. PERO: ¿también está usando píldoras o pestañas en la barra de navegación? ¿Ninguna píldora, dice? Bueno, puede simplemente elimine un par de cientos de líneas de código en la hoja de estilo y ahórrese el esfuerzo de tener que aplicar su "ritmo vertical" a esos elementos innecesarios. De lo contrario, para los elementos que permanecen y que de hecho necesita, solo use un texto Editor para buscar y reemplazar los valores de altura de línea, relleno superior e inferior, márgenes, tamaño de fuente, etc. y probarlo. Como un marco CSS, está bastante claro cómo se presenta Bootstrap; los elementos relevantes están bien ordenados y agrupados dentro del código de la hoja de estilo en su mayor parte. Una vez que haya completado el ajuste del archivo CSS base, simplemente minimice su hoja de estilo revisada ... para reemplazar la versión minified preexistente ... o, quizás, simplemente sirva desde CloudFront si desea optimizar.
Dado que nadie se ha vinculado a una plantilla de ritmo vertical real como usted sugirió, tomé el que uso, lo comenté y creé un repositorio de github aquí https://github.com/jonschlinkert/vertical-rhythm
Como se dice en el archivo Léame, este es un punto de partida para su propio proyecto.
Compass CSS Authoring Framework tiene soporte explícito para tipografía basada en ritmo vertical . Para empezar puedes ver este breve video tutorial .