Вертикальный ритм для Twitter Bootstrap

Question

Существуют ли какие-либо плагины / расширения / методы для поддержки вертикального ритма для проекта Twitter Bootstrap?

Создать хорошие шаблоны вертикального ритма довольно трудоемко, я бы предпочел использовать предварительно запеченное решение.Я открыт для творческих предложений, я просто хочу, чтобы мои страницы были хорошо выровнены в конце.

---

Редактировать: Чтобы уточнить, что я хочу после ...

Вертикальный ритм - техника, используемаячтобы каждый элемент на странице располагался в соответствии с горизонтальной сеткой.Это достигается путем установки высоты, отступов и полей каждого элемента в соответствии со стандартным размером единичной линии.Если строка текста в абзаце имеет высоту 20px (включая поля и отступы), возможно, заголовок 4 также будет иметь высоту 20px, а заголовок 1 может быть высотой 40px.Это поддерживает ритм текста в столбцах.

Я хочу использовать эту технику в сочетании с начальной загрузкой (из твиттера), но было бы довольно много работы, чтобы все выглядело хорошо.Например, все кнопки должны соответствовать тому же определению высоты по вертикали, что и текст абзаца и т. Д. В начальной загрузке используются другие стандартные элементы управления, которым также потребуются правила для правильного определения их высоты.

IЯ мог бы начать с общего решения для вертикального ритма, которое могло бы иметь большое значение для достижения того, чего я хочу, но я хотел знать, начал ли кто-то еще это, или имеет какое-либо представление о другом способе достижения этого.

---

Редактировать: Предполагая, что нет ничего похожего на то, что я хочу ...

Может быть, просто хороший шаблон css на основе вертикального ритма будет хорошей отправной точкой.Предпочтительно то, что продолжает развиваться, уже пригодно для использования, хорошо продумано и адаптируемо.

Answer 1

Поскольку никто не связался с фактическим шаблоном вертикального ритма, как вы предложили, я взял тот, который я использую, прокомментировал его и создал репозиторий Github для этого здесь https://github.com/jonschlinkert/vertical-rhythm

Как говорится в файле readme, это отправная точка для вашего собственного проекта.

Answer 2

Я думаю, что вы идете после того, как поняли.Проблема в том, что вы ищете сеточную схему в одном измерении («вертикальный ритм», установленный, например, в соответствии с пропорциональными высотами линий ... который, если можно так выразиться, измеряет и выравнивает объекты по данной странице).Ось Y) ... но выполнение таких действий потенциально может противоречить уже существующей 12-колоночной системе сетки Bootstrap (которая, напротив, измеряет и выравнивает объекты по оси X страницы).Вы хотите «пропорционально» высоту каждой «строки» в каркасе.НО: имейте в виду, дизайн Bootstrap призван обеспечить не только пропорциональность через столбцы исключительно для того, чтобы выглядеть красиво, но и сделать страницы отзывчивыми - т.е. разрешить страницуэлементы, чтобы «обтекать» друг друга вертикально и гнездиться плавно.И, в этом смысле, проблемы, относящиеся к высоте элементов, измеренных вдоль оси Y, уже могут быть учтены ... Напомню, что большинство типографских элементов в базовом файле CSS имеют пропорциональные размеры em и / или аналогично пропорциональную вершину.и нижние отступы и т. д. В общем, все не так произвольно, что фреймворк требует дополнительной стилизации в соответствии с тем, что вы рассматриваете.

Даже в этом случае: базовый CSS-файл Bootstrap не так уж и обширенчто вы не сможете без особых проблем настроить высоту различных классов элементов и идентификаторов самостоятельно.В любом случае, маловероятно, что вам действительно понадобится делать это с каждым элементом стиля, верно?Фактически, в качестве основы Bootstrap включает стилизацию для многих элементов, которых может даже не быть в приложении, для которого вы разрабатываете интерфейс.(ПРИМЕР: есть ли в вашем приложении выпадающие меню? Отлично. Вы можете стилизовать «вертикальный ритм» выпадающих меню. НО: вы также используете таблетки или вкладки в панели навигации? Нет таблеток, говорите? Ну, вы можетепросто удалите пару сотен строк кода в таблице стилей и избавьте себя от необходимости применять свой «вертикальный ритм» к этим ненужным элементам.) В остальном, для элементов, которые остаются и которые вы на самом деле делаете нужно, просто используйте текстовый редактор, чтобы найти и заменить значения высоты строки, верхнего и нижнего отступов, полей, размера шрифта и т. д. и проверить это.Как CSS-фреймворк, довольно ясно, как устроен Bootstrap;соответствующие элементы хорошо отсортированы и по большей части сгруппированы в коде таблицы стилей.Как только вы закончите настройку базового CSS-файла, просто сверните свою пересмотренную таблицу стилей ... чтобы заменить уже существующую уменьшенную версию ... или, возможно, просто подайте ее из CloudFront, если вы хотите оптимизировать.

Answer 3

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *. Для начала вы можете посмотреть этот короткий видеоурок .

Answer 4

Рассматривали ли вы CSS-фреймворк Square Grid?

http://thesquaregrid.com/

Простой CSS-фреймворк для дизайнеров и разработчиков, основанный на 35 столбцах одинаковой ширины,Он направлен на сокращение времени разработки и помогает создавать веб-сайты с красивой структурой.

Квадратная сетка обеспечивает стандартную горизонтальную сетку, но также поддерживает вертикальную сетку, используя стандартный "квадрат" размером 28 пикселей.,На самом деле это просто сетка, а не полная библиотека CSS, такая как Bootstrap (т.е. без кнопок, меню и т. Д.).

Я привык к одному проекту и нашел его довольно интуитивным, хотя в конечном итоге решил, что онмне было слишком сложно следить за вертикальной и горизонтальной сеткой, особенно когда речь идет об адаптивном дизайне.

Возможно, вы сможете объединить их или хотя бы взглянуть на исходный код квадратной сетки.Это довольно простой CSS, чтобы получить представление о том, как адаптировать Bootstrap для удовлетворения ваших потребностей.