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

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

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

Изменить: уточнить, что я делаю после...

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

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

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

Изменить: Предполагая, что нет ничего, что я хочу...

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

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

Compass CSS Authoring Framework имеет явную поддержку вертикальный ритм. Для начала вы можете проверить этот короткий видеоурок.

Ответ 4

Вы посмотрели на CSS-рамки Square Grid?

http://thesquaregrid.com/

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

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

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

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