Ritmo vertical para Twitter Bootstrap

Question

¿Existen plugins/extensiones/métodos para mantener el ritmo vertical del proyecto Bootstrap de Twitter?

Es una tarea bastante laboriosa crear buenas plantillas de ritmos verticales, prefiero usar una solución precocida. Estoy abierto a sugerencias creativas, solo quiero que mis páginas estén bien alineadas al final.

---

Editar: Para aclarar lo que busco ...

ritmo vertical es una técnica que se utiliza para asegurar que cada elemento de una página se alinea de acuerdo con una rejilla horizontal. Esto se logra al establecer la altura, el relleno y el margen de cada elemento para que se ajuste a un tamaño de línea de unidad estándar. Si una línea de texto en un párrafo tiene 20px de alto (incluyendo margen y relleno) entonces tal vez un título 4 también tendrá 20px de alto, y un título 1 podría tener 40px de alto. Esto mantiene el ritmo del texto a través de las columnas.

Quiero utilizar esta técnica en combinación con bootstrap (de twitter), pero sería mucho trabajo conseguir que todo se vea bien. Por ejemplo, todos los botones necesitarían ajustarse a la misma definición de altura vertical que el texto de párrafo, etc. ... Hay otros controles estándar usados ​​en el arranque que también necesitarían reglas para definir su altura de manera apropiada.

Podría comenzar con una solución genérica para el ritmo vertical, que me ayudaría a lograr lo que quiero, pero quería saber si alguien más ha empezado esto, o si tiene alguna idea de otra forma de lograrlo.

---

Editar: Suponiendo que no hay nada como lo que quiero ...

Tal vez sólo una buena plantilla css basado en el ritmo vertical, sería un buen punto de partida. Preferiblemente, algo que continúa desarrollándose ya es utilizable, bien pensado y adaptable.

Answer 1

Puesto que nadie ha relacionado con un texto modelo actual ritmo vertical como usted sugiere, que tomó el que yo uso, comentó ella, y creó un acuerdo de recompra github de aquí https://github.com/jonschlinkert/vertical-rhythm

Como se dice en el readme, este es un punto de partida para su propio proyecto.

Answer 2

Creo que se entiende lo que está buscando. 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ínea proporcionales ... que, por así decirlo, mide y alinea cosas a lo largo de una página determinada Eje Y) ... pero hacer las cosas de esa manera podría estar en desacuerdo con el sistema de grillas preexistente de 12 columnas de Bootstrap (que, por el contrario, mide y alinea 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 no solo promueve la proporcionalidad a través de las columnas por el simple hecho de verse bien, sino también para hacer que las páginas respondan --es decir, para permitir que los elementos de la página "fluyan" uno alrededor del otro verticalmente, y para anidar con fluidez. Y, en ese sentido, los problemas relacionados con la altura de los elementos medidos a lo largo del eje Y ya pueden tenerse en cuenta ... Recuerdo que la mayoría de los elementos tipográficos en el archivo CSS base tienen tamaños de em proporcionales, y/o proporcionalmente superior y relleno de fondo, etc. En términos generales, las cosas no son tan arbitrarias como para que el marco requiera un estilo adicional de la manera que usted está considerando.

Aún así: el archivo CSS base de Bootstrap no es tan extensamente extenso que sería imposible para ti ajustar la altura de varias clases de elementos e identificadores tú mismo sin demasiados problemas. En cualquier caso, es muy poco probable que realmente deba hacer eso con cada elemento diseñado, ¿verdad? De hecho, como marco, Bootstrap incluye estilos para muchos elementos que pueden no estar incluidos en la aplicación para la que está diseñando la interfaz. (EJEMPLO: ¿Tiene su aplicación menús desplegables? Genial. Puede ajustar el "ritmo vertical" de los menús desplegables. PERO: ¿también está usando pastillas o pestañas en su barra de navegación? ¿No tiene pastillas, usted dice?Bueno, puedes eliminar un par de cientos de líneas de código en la hoja de estilo y ahorrarte el esfuerzo de tener que aplicar tu "ritmo vertical" a esos elementos innecesarios.) De lo contrario, para los elementos que quedan y que haz de hecho Necesito, simplemente use un editor de texto para buscar-reemplazar los valores de altura de línea, relleno superior e inferior, márgenes, tamaño de fuente, etc. ... y pruébelo. Como 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 complete el ajuste del archivo CSS base, solo minimice su hoja de estilo revisada ... para reemplazar la versión reducida preexistente ... o, tal vez, solo publíquela desde CloudFront si desea optimizarla.

Answer 3

¿Has mirado el marco de cuadrícula CSS cuadrada?

http://thesquaregrid.com/

un marco CSS sencilla para los diseñadores y desarrolladores, basado en 35 columnas tengan la misma anchura. Su objetivo es reducir el tiempo de desarrollo y ayudar a a crear sitios web de hermosa estructura.

Square Grid 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 completa de CSS como Bootstrap (es decir, sin botones, menús, etc.).

Solía ​​hacer un proyecto y me pareció bastante intuitivo, aunque al final decidí que era muy difícil para mí hacer un seguimiento de la cuadrícula vertical y horizontal, especialmente cuando pensaba en un diseño receptivo.

Puede combinar los dos, o al menos echar un vistazo al código fuente de la cuadrícula cuadrada que es bastante simple CSS para obtener algunas ideas sobre cómo adaptar Bootstrap para satisfacer sus necesidades.

Answer 4

El Compass CSS Authoring Framework tiene soporte explícito para la tipografía basada en vertical rhythm. Para empezar, puedes echar un vistazo a este corto video tutorial.