Rytm pionowy dla Bootstrapa na Twitterze

Question

Czy istnieją jakieś wtyczki/rozszerzenia/metody utrzymywania pionowego rytmu dla projektu Bootstrap na Twitterze?

Wykonanie dobrych szablonów rytmów pionowych to dość pracochłonne zadanie, wolałbym raczej użyć wstępnie upieczonego rozwiązania. Jestem otwarty na kreatywne sugestie, chcę tylko, aby moje strony były dobrze wyrównane na końcu.

---

Edycja: W celu wyjaśnienia, co jestem po ...

pionowy rytm jest to technika stosowana w celu zapewnienia, że ​​każdy element na linii założyć stronę według poziomej siatki. Osiąga się to poprzez ustawienie wysokości, wypełnienia i marginesu każdego elementu, aby dostosować go do standardowego rozmiaru linii jednostki. Jeśli wiersz tekstu w akapicie ma wysokość 20 pikseli (w tym margines i dopełnienie), wówczas nagłówek 4 będzie miał również wysokość 20 pikseli, a nagłówek 1 może mieć wysokość 40 pikseli. Utrzymuje rytm tekstu w kolumnach.

Chcę użyć tej techniki w połączeniu z bootstrapem (z twittera), ale byłoby całkiem sporo pracy, aby wszystko wyglądało ładnie. Na przykład wszystkie przyciski będą musiały być zgodne z tą samą definicją wysokości w pionie, co tekst akapitowy itp. W bootstrapie stosowane są inne standardowe elementy sterujące, które również wymagają reguł, aby odpowiednio określić ich wysokość.

Mógłbym zacząć od ogólnego rozwiązania dla pionowego rytmu, który znacznie przyczyniłby się do osiągnięcia tego, czego chcę, ale chciałem się dowiedzieć, czy ktoś inny to rozpoczął, lub ma jakiś pomysł na inny sposób osiągnięcia tego.

---

Edit: Zakładając, że nie ma nic, czego chcę ...

Może po prostu dobry rytm pionowym szablon css oparty byłby dobry punkt wyjścia. Korzystnie coś, co jest nadal rozwijane, jest już użyteczne, dobrze przemyślane i możliwe do dostosowania.

Answer 1

Ponieważ nikt związany z rzeczywistą pionowego rytmu boilerplate jak zasugerował, wziąłem z którego korzystam, komentuje je i stworzył repo GitHub dla niego tutaj https://github.com/jonschlinkert/vertical-rhythm

Jak mówi w readme, to to punkt wyjścia dla twojego własnego projektu.

Answer 2

Myślę, że rozumiesz, o co ci chodzi. Problem polega na tym, że szukasz schematu siatki w jednym wymiarze ("pionowy rytm" ustawiony na przykład na proporcjonalnych wysokościach linii ... co, w pewnym sensie, mierzy i wyrównuje rzeczy wzdłuż danej strony Oś Y) ... ale robienie rzeczy w ten sposób może być potencjalnie sprzeczne z istniejącym już 12-kolumnowym systemem Bootstrap (który, w przeciwieństwie, mierzy i wyrównuje rzeczy wzdłuż osi X strony). Chcesz "proporcjonalizować" wysokość każdego "wiersza" w strukturze. ALE: należy pamiętać, że projekt Bootstrap ma na celu promowanie nie tylko proporcjonalności za pomocą kolumn wyłącznie ze względu na ładne wyglądanie, ale także na to, aby strony mogły "przepływać" wokół siebie. w pionie i gniazdować płynnie. I w tym sensie kwestie odnoszące się do wysokości elementów mierzonych wzdłuż osi Y mogą już być uwzględnione ... Przypominam, że większość elementów typograficznych w bazowym pliku CSS ma proporcjonalne rozmiary em i/lub podobnie proporcjonalny wierzchołek i dolna wyściółka itp. Ogólnie rzecz biorąc, rzeczy nie są tak arbitralne, że ramy krzyczą o potrzebie dodatkowej stylizacji w sposób, który rozważasz.

Mimo to: podstawowy plik CSS Bootstrapa nie jest tak ekstrawertycznie rozległy, że niemożliwe jest poprawienie wysokości różnych klas elementów i identyfikatorów bez większych problemów. W każdym razie jest bardzo mało prawdopodobne, że będziesz musiał to zrobić z każdym stylizowanym elementem, prawda? W rzeczywistości, jako framework, Bootstrap zawiera stylizację wielu elementów, które mogą nawet nie występować w aplikacji, dla której projektujesz front end. (PRZYKŁAD: czy twoja aplikacja ma menu rozwijane? Świetnie, możesz ustawić "pionowy rytm" rozwijanych menu, ALE: czy używasz też pigułek lub zakładek w pasku nawigacji? Nie mówisz o pigułkach?Cóż, możesz po prostu usunąć kilkaset linii kodu w arkuszu stylów i zaoszczędzić sobie wysiłku związanego z koniecznością zastosowania "pionowego rytmu" do niepotrzebnych elementów.) W przeciwnym razie dla elementów, które pozostały i które w rzeczywistości są do potrzebujesz, po prostu użyj edytora tekstu, aby znaleźć - zastąp wartości dla wysokości linii, górnego i dolnego marginesu, marginesów, rozmiaru czcionki, itp ... i przetestuj to. Jako szkielet CSS, jest całkiem jasne, jak wygląda Bootstrap; odpowiednie elementy są dobrze sortowane i pogrupowane w kodach arkusza stylów w przeważającej części. Po zakończeniu modyfikowania podstawowego pliku CSS wystarczy zminimalizować zmieniony arkusz stylów ... aby zastąpić istniejącą już wersję minifikowaną ... lub, być może, po prostu udostępnić ją w CloudFront, jeśli chcesz ją zoptymalizować.

Answer 3

Czy obejrzałeś strukturę CSS Square Grid?

http://thesquaregrid.com/

prosty framework CSS dla projektantów i programistów, na podstawie 35 równa szerokości kolumn. Ma on na celu ograniczenie czasu opracowywania i pomoc w tworzeniu pięknych stron internetowych o określonej strukturze.

Square Grid zapewnia standardową siatkę poziomą, ale utrzymuje również pionową siatkę, używając standardowego "kwadratu" o wielkości 28 pikseli. Jest to tak naprawdę tylko siatka, a nie pełna biblioteka CSS, taka jak Bootstrap (tzn. Bez przycisków, menu itp.).

Kiedyś do jednego projektu i okazało się, że jest dość intuicyjne, ale ostatecznie zdecydowałem, że to zbyt trudne dla mnie, aby śledzić zarówno pionową i poziomą siatkę, zwłaszcza gdy myślisz o responsywnej konstrukcji.

Być może będziesz w stanie połączyć te dwa lub przynajmniej przyjrzeć się kwadratowemu kodowi źródłowemu siatki, który jest całkiem prostym CSSem, aby uzyskać kilka pomysłów na dostosowanie Bootstrap do twoich potrzeb.

Answer 4

Urządzenie Compass CSS Authoring Framework ma wyraźne wsparcie dla typografii opartej na . Na początek możesz sprawdzić ten krótki video tutorial.