Soru Twitter'ın Bootstrap için dikey ritim


Twitter'ın Bootstrap projesi için dikey ritim sürdürmek için mevcut eklentiler / uzantılar / yöntemler var mı?

İyi dikey ritim şablonları oluşturmak oldukça zahmetli bir iştir, önceden pişirilmiş bir çözüm kullanmayı tercih ederim. Yaratıcı önerilere açığım, sayfalarımın sonunu güzelce hizalamak istiyorum.


Düzenleme: Sonra ne olduğumu açıklığa kavuşturmak için ...

Dikey ritim, bir sayfadaki her öğenin yatay bir ızgaraya göre hizalanmasını sağlamak için kullanılan bir tekniktir. Bu, standart birim büyüklüğüne uymak için her öğenin yüksekliğini, dolgusunu ve kenar boşluğunu ayarlayarak elde edilir. Paragraftaki bir metin satırı 20 piksel yüksekliğinde ise (kenar boşluğu ve dolgu dahil), belki de 4 numaralı bir yön de 20px yüksek olacak ve 1 numaralı yön 40px yüksek olabilir. Bu, metnin sütunlar boyunca ritmini korur.

Bu tekniği bootstrap ile (twitter) birlikte kullanmak istiyorum ama her şeyin güzel görünmesini sağlamak için epeyce iş olurdu. Örneğin, tüm düğmelerin paragraf metni vb. İle aynı dikey yükseklik tanımına uyması gerekir. Önyüklemede kullanılan diğer standart denetimler de vardır; bunların hepsi de yüksekliklerini uygun şekilde tanımlamak için kurallara gereksinim duyarlar.

Dikey ritm için genel bir çözümle başlayabilirdim, ki istediğimi elde etmenin uzun bir yolunu bulabilirdim, ama başka birinin bunu başlatıp başlamadığını öğrenmek istedim, ya da bunu başarmak için başka bir yol hakkında bir fikri var.


Düzenleme: İstediğim gibi bir şey olmadığını varsayarsak ...

Belki sadece iyi bir dikey ritim tabanlı css şablonu iyi bir başlangıç ​​noktası olacaktır. Tercihen geliştirilmeye devam eden bir şey zaten kullanılabilir, iyi düşünülmüş ve uyarlanabilirdir.


23
2018-03-17 15:30


Menşei


Gerçek şu ki, hiç kimse sana karşı bir ödül almanıza rağmen cevap vermedi. Sorunuz çok belirsiz. Daha fazla bilgi vermeniz gerekiyor: Neye ulaşmaya çalışıyorsunuz? Şimdiye kadar ne yaptın? Vb. - HerrSerker
Sanırım 'dikey ritim şablonları' bir endüstri terimidir, bu yüzden kimse ne hakkında konuştuğunuzu bilmiyor. - Matthew Darnell
İnsanların aradığınızı anlayabileceğini sanmıyorum ... - Daniel Ribeiro
OP'in ne hakkında konuştuğuna dair bazı bilgiler: Ölçülen aralıklarla dikey boşluk ekleme ve silme ve Dikey ritim ile CSS. Önyükleme Bootstrap (ki şu anda da çalışıyorum), denemeye kadar ne kadar zor olduğunu bilmezsiniz. Sonra paketleyebilir ve başkalarının da kullanabileceği şekilde bırakabilirsiniz. :) - Jared Farrish
Son zamanlarda sorulmadığını fark ettim. @BillyMoon, hiç bir şey anladın mı? - Jared Farrish


Cevaplar:


Hiç kimse önerdiğin gibi gerçek bir dikey ritim kalayına bağlanmadığından, kullanıyorum, yorumladım ve burada bir github repo oluşturdum. https://github.com/jonschlinkert/vertical-rhythm

Readme'de dediği gibi, bu kendi projeniz için bir başlangıç ​​noktasıdır.


7
2018-04-01 09:54





Ben sonra ne olduğunu anladım düşünüyorum. Sorun şudur: Bir boyutta şematik bir şema arıyorsunuz (örneğin, dikey bir yüksekliğe göre ayarlanmış bir "dikey ritim"), belirli bir sayfadaki şeyleri konuşma, ölçme ve hizalama. Y ekseni) ... ama bu şekilde bir şeyler yapmak, Bootstrap'in önceden var olan 12 kolonlu ızgara sistemi ile (muhtemelen, X ekseni boyunca bir şeyleri ölçüp hizalayan) bir olasılıkla olabilir. Çerçevedeki her "satırın" yüksekliğini "orantılı hale getirmek" istersiniz. AMA: Unutmayın ki, Bootstrap'in tasarımı sadece orantılılığı değil, sütunlar sadece güzel görünmek uğruna ama aynı zamanda sayfalar yapmak için duyarlı--i.e., sayfa öğelerinin birbirine dikey olarak "akmasını" ve akışkan olarak yuvalanmasını sağlamak. Ve, bu anlamda, Y ekseni boyunca ölçülen elemanların yüksekliğiyle ilgili konular zaten hesaba katılabilir ... Temel CSS dosyasındaki tipografik öğelerin çoğunun orantısal em boyutlarına ve / veya benzer şekilde orantılı olduğunu hatırlıyorum. ve alttan doldurma, vb. Genel olarak konuşursak, işler o kadar rasgele değildir ki, çerçeve, düşündüğünüz şekilde ek bir stile ihtiyaç duymaktadır.

Öyle bile olsa: Bootstrap'in temel CSS dosyası, çok fazla sorun olmaksızın, çeşitli öğe sınıflarının ve kimliklerini yüksekliğinin ayarlanmasının imkansız olamayacağı kadar dayanılmaz derecede geniş değildir. Her halükarda, muhtemelen her tarz elemanla bunu yapmak zorunda kalacaksın, değil mi? Aslında, bir çerçeve olarak, Bootstrap, ön uçu tasarladığınız uygulamada bulunmayan birçok öğe için stil yaratır. (ÖRNEK: Uygulamanızın menüleri açılır mı? Harika. Açılır menülerin "dikey ritmini" düzenleyebilirsiniz. AMA: Ayrıca nav çubuğunuzdaki hapları veya sekmeleri kullanıyor musunuz? Sadece birkaç yüz satırlık kodu stil sayfasından silin ve kendinize "dikey ritminizi" bu gereksiz elemanlara uygulamak zorunda olduğunuzdan tasarruf edin.) Ayrıca, kalan elemanlar için ve yap Aslında ihtiyacınız, sadece satır yüksekliği, üst ve alt dolgu, kenar boşlukları, yazı tipi boyutu vb. değerleri bulmak ve test etmek için bir metin editörü kullanın. Bir CSS çerçevesi olarak, Bootstrap'in nasıl ortaya konulduğu oldukça açık; İlgili elemanlar iyi sıralanır ve çoğu zaman için stil sayfasının kodu içinde gruplanır. Temel CSS dosyasının ayarlanmasını tamamladıktan sonra, önceden küçültülmüş versiyonunu değiştirmek için gözden geçirilmiş stil sayfanızı küçültün ... veya belki de optimize etmek istiyorsanız CloudFront'dan sunun.


5
2017-12-30 10:16



Adam. Bunlar monolitik paragraflardır. Ruen'in sırlarının o hiyerogliflerde saklanmadığından emin miyiz? Kısacası, paragraflarınızı biraz daha kırın lütfen. - Jared Farrish


Pusula CSS Yazma Çerçevesi için açık destek dikey ritim temel tipografi. Yeni başlayanlar için bu kısa listeye göz atabilirsiniz. video öğretici.


4
2018-06-23 19:27





Square Grid CSS çerçevesine baktınız mı?

http://thesquaregrid.com/ 

35'e dayanan tasarımcılar ve geliştiriciler için basit bir CSS çerçevesi   eşit genişlikli sütunlar. Geliştirme süresini kısaltmayı ve yardım etmeyi amaçlıyor   güzel yapılandırılmış web siteleri oluşturursunuz.

Square Grid standart bir yatay ızgara sağlar, ancak standart bir "kare" 28px kullanarak dikey bir ızgarayı korur. Bu sadece bir ızgaradır, Bootstrap gibi tam bir CSS kütüphanesi değildir (yani düğmeler, menüler vb.).

Bir proje için kullandım ve oldukça sezgisel olduğunu keşfettim, sonuçta özellikle duyarlı tasarım hakkında düşünürken hem dikey hem de yatay ızgarayı takip etmenin çok zor olduğuna karar verdim.

İkisini birleştirebilir veya en azından basit bir CSS olan kare ızgara kaynak kodunu gözden geçirebilir ve Bootstrap'i ihtiyaçlarınızı karşılayacak şekilde nasıl uyarlayacağınıza dair fikir edinebilirsiniz.


2



pusula + susy da dikey ritmi destekler - Evgeny