Ritmo verticale per Bootstrap di Twitter

Question

Esistono plugin/estensioni/metodi esistenti per mantenere il ritmo verticale per il progetto Bootstrap di Twitter?

È un compito piuttosto laborioso creare buoni modelli di ritmo verticale, preferirei utilizzare una soluzione pre-cotta. Sono aperto a suggerimenti creativi, voglio solo che le mie pagine siano allineate bene alla fine.

---

Edit: Per chiarire quello che sono dopo ...

ritmo verticale è una tecnica utilizzata per assicurare che ogni elemento in una pagina allinea secondo una griglia orizzontale. Ciò si ottiene impostando l'altezza, il riempimento e il margine di ogni articolo per conformarsi a una linea di misura standard. Se una riga di testo in un paragrafo è alta 20px (incluso margine e riempimento), allora anche una rubrica 4 sarà alta 20px e una rubrica 1 potrebbe essere alta 40px. Ciò mantiene il ritmo del testo attraverso le colonne.

Voglio usare questa tecnica in combinazione con bootstrap (da twitter), ma sarebbe un bel po 'di lavoro per rendere tutto bello. Ad esempio, tutti i pulsanti dovrebbero essere conformi alla stessa definizione di altezza verticale del testo di paragrafo ecc ... Esistono altri controlli standard usati nel bootstrap che dovrebbero anche avere regole per definire la loro altezza in modo appropriato.

Potrei iniziare con una soluzione generica per il ritmo verticale, che farebbe molto per ottenere ciò che voglio, ma volevo sapere se qualcun altro ha iniziato questo o ha qualche idea di un altro modo per raggiungere questo obiettivo.

---

Edit: Supponendo non c'è niente come quello che voglio ...

Forse solo un buon modello css a base verticale del ritmo sarebbe un buon punto di partenza. Preferibilmente, qualcosa che continua a essere sviluppato, è già utilizzabile, ben congegnato e adattabile.

Answer 1

Dal momento che nessuno è collegato a un vero e proprio testo standard ritmo verticale come lei ha suggerito, ho preso quello che uso, ha commentato, e ha creato un repo github per esso qui https://github.com/jonschlinkert/vertical-rhythm

Come si dice nel readme, questo è un punto di partenza per il tuo progetto.

Answer 2

Penso che quello che stai cercando sia capito. Il problema è: stai cercando uno schema di griglia in una dimensione (un "ritmo verticale" impostato in base, ad esempio, alle altezze delle linee proporzionali ... che, per modo di dire, misura e allinea le cose lungo una determinata pagina Asse Y) ... ma fare le cose in questo modo potrebbe essere potenzialmente in disaccordo con il sistema di griglia a 12 colonne preesistente di Bootstrap (che, al contrario, misura e allinea le cose lungo l'asse X della pagina). Vuoi "proporzionare" l'altezza di ogni "riga" nel framework. MA: tenere a mente, il design di Bootstrap ha lo scopo di promuovere non solo la proporzionalità tramite le colonne unicamente per il gusto di apparire bello, ma anche di rendere le pagine reattivo --ie, per consentire agli elementi della pagina di "scorrere" l'uno intorno all'altro verticalmente e nidificare fluidamente. E, in questo senso, i problemi relativi all'altezza degli elementi misurati lungo l'asse Y possono già essere considerati ... Ricordo che la maggior parte degli elementi tipografici nel file CSS di base hanno dimensioni em proporzionali e/o anche proporzionali in alto e imbottitura inferiore, ecc. In generale, le cose non sono così arbitrarie che la struttura urla la necessità di uno stile aggiuntivo nel modo che stai considerando.

Anche così: il file CSS di base di Bootstrap non è così intollerabilmente esteso che sarebbe impossibile per te modificare l'altezza di varie classi di elementi e ID senza troppi problemi. In ogni caso, è altamente improbabile che tu abbia davvero bisogno di farlo con ogni elemento in stile, giusto? In effetti, come framework, Bootstrap include lo styling di molti elementi che potrebbero non essere nemmeno nell'app per cui stai progettando il front-end. (ESEMPIO: la tua app ha menu a tendina?) .Potrai definire il "ritmo verticale" dei menu a discesa. MA: stai usando anche pillole o tab nella barra di navigazione? Nessuna pillola, dici?Bene, puoi solo eliminare un paio di centinaia di righe di codice nel foglio di stile e risparmiarti lo sforzo di dover applicare il tuo "ritmo verticale" a quegli elementi non necessari.) Altrimenti, per gli elementi che rimangono e che fai fare è necessario, basta usare un editor di testo per trovare-sostituire i valori per l'altezza della linea, il riempimento superiore e inferiore, i margini, la dimensione del carattere, ecc ... e provarlo. Come framework CSS, è abbastanza chiaro come Bootstrap è strutturato; gli elementi rilevanti sono ben ordinati e raggruppati per lo più nel codice del foglio di stile. Una volta completato il tweaking del file CSS di base, basta ridimensionare il foglio di stile rivisto ... per sostituire la versione minifattante preesistente ... o, forse, semplicemente servirlo da CloudFront se si desidera ottimizzare.

Answer 3

Hai guardato il framework CSS di Square Grid?

http://thesquaregrid.com/

Un quadro CSS semplice per i progettisti e gli sviluppatori, sulla base di 35 colonne di uguale larghezza. Ha lo scopo di ridurre i tempi di sviluppo e di aiutare a creare siti Web di bella struttura.

Square Grid fornisce una griglia orizzontale standard, ma mantiene anche una griglia verticale, utilizzando un "quadrato" standard di 28 px. In realtà è solo una griglia, non una libreria CSS completa come Bootstrap (cioè senza pulsanti, menu, ecc.).

Ho usato per un progetto e l'ho trovato abbastanza intuitivo, anche se alla fine ho deciso che era troppo difficile per me tenere traccia della griglia verticale e orizzontale, specialmente quando si pensa al design reattivo.

Potrebbe essere possibile combinare i due, o almeno dare un'occhiata al codice sorgente della griglia quadrata che è piuttosto semplice CSS per avere alcune idee su come adattare Bootstrap per soddisfare le vostre esigenze.

Answer 4

Il Compass CSS Authoring Framework ha il supporto esplicito per la tipografia basata su vertical rhythm. Per cominciare puoi dare un'occhiata a questo breve video tutorial.