Вертикальный ритм для Twitter Bootstrap
Существуют ли какие-либо плагины / расширения / методы для поддержания вертикального ритма проекта Twitter Bootstrap?
Создать хорошие шаблоны вертикального ритма - довольно трудоемкая задача. Я бы предпочел использовать готовое решение. Я открыт для творческих предложений, я просто хочу, чтобы мои страницы были хорошо выровнены в конце.
Изменить: чтобы уточнить, что я после...
Вертикальный ритм - это метод, используемый для обеспечения того, чтобы каждый элемент на странице выстраивался в соответствии с горизонтальной сеткой. Это достигается установкой высоты, отступов и полей каждого элемента в соответствии со стандартным размером единичной линии. Если строка текста в абзаце имеет высоту 20px (включая поля и отступы), возможно, заголовок 4 также будет иметь высоту 20px, а заголовок 1 может быть высотой 40px. Это поддерживает ритм текста в столбцах.
Я хочу использовать эту технику в сочетании с начальной загрузкой (из твиттера), но было бы довольно много работы, чтобы все выглядело хорошо. Например, все кнопки должны соответствовать тому же определению высоты по вертикали, что и текст абзаца и т. Д. В начальной загрузке используются другие стандартные элементы управления, которые также должны были бы иметь правила для правильного определения их высоты.
Я мог бы начать с общего решения для вертикального ритма, которое будет иметь большое значение для достижения того, что я хочу, но я хотел знать, если кто-то еще начал это, или есть какие-либо идеи о другом способе достижения этого.
Изменить: при условии, что нет ничего, что я хочу...
Может быть, просто хороший шаблон CSS на основе вертикального ритма будет хорошей отправной точкой. Предпочтительно что-то, что продолжает развиваться, уже пригодно для использования, хорошо продумано и адаптируемо.
4 ответа
Поскольку никто не связывался с фактическим шаблоном вертикального ритма, как вы предложили, я взял тот, который я использую, прокомментировал его и создал репозиторий github для него здесь https://github.com/jonschlinkert/vertical-rhythm
Как говорится в файле readme, это отправная точка для вашего собственного проекта.
Я думаю, что вы собираетесь после того, как поняли. Проблема заключается в том, что вы ищете сеточную схему в одном измерении ("вертикальный ритм", установленный, например, в соответствии с пропорциональными высотами линий... который, если можно так выразиться, измеряет и выравнивает объекты по данной странице). Ось Y)... но выполнение таких действий потенциально может противоречить уже существующей 12-колоночной системе сетки Bootstrap (которая, напротив, измеряет и выравнивает объекты по оси X страницы). Вы хотите "пропорционально" высоту каждой "строки" в каркасе. НО: имейте в виду, дизайн Bootstrap призван способствовать не только пропорциональности по столбцам исключительно для того, чтобы выглядеть красиво, но и к тому, чтобы сделать страницы отзывчивыми - т.е. позволить элементам страницы "обтекать" друг друга по вертикали и Гнездо плавно. И, в этом смысле, проблемы, относящиеся к высоте элементов, измеренных вдоль оси Y, уже могут быть учтены... Напомню, что большинство типографских элементов в базовом файле CSS имеют пропорциональные размеры em и / или аналогично пропорциональную вершину. и нижнее заполнение и т. д. В общем, все не так произвольно, что фреймворк требует дополнительной стилизации в соответствии с тем, что вы рассматриваете.
Даже в этом случае: базовый CSS-файл Bootstrap не настолько нетерпелив, что вы не сможете без особых проблем настроить высоту различных классов элементов и идентификаторов. В любом случае, маловероятно, что вам действительно понадобится делать это с каждым элементом стиля, верно? Фактически, в качестве основы Bootstrap включает стилизацию для многих элементов, которых может даже не быть в приложении, для которого вы разрабатываете интерфейс. (ПРИМЕР: есть ли в вашем приложении выпадающие меню? Отлично. Вы можете стилизовать "вертикальный ритм" выпадающих меню. НО: вы также используете таблетки или вкладки в панели навигации? Нет таблеток, говорите? Ну, вы можете просто удалите пару сотен строк кода в таблице стилей и избавьте себя от необходимости применять свой "вертикальный ритм" к этим ненужным элементам.) В противном случае, для элементов, которые остаются и которые вам действительно нужны, просто используйте текст редактор для поиска и замены значений высоты строки, верхнего и нижнего отступов, полей, размера шрифта и т. д. и их проверки. Как CSS-фреймворк, довольно ясно, как устроен Bootstrap; соответствующие элементы хорошо отсортированы и по большей части сгруппированы в коде таблицы стилей. Как только вы закончите настройку базового CSS-файла, просто сверните свою пересмотренную таблицу стилей... чтобы заменить уже существующую минимизированную версию... или, возможно, просто подайте ее из CloudFront, если вы хотите оптимизировать.
Compass CSS Authoring Framework имеет явную поддержку типографии на основе вертикального ритма. Для начала вы можете проверить этот короткий видеоурок.
Вы смотрели на CSS-каркас Square Grid?
Простой CSS-фреймворк для дизайнеров и разработчиков, основанный на 35 столбцах одинаковой ширины. Он призван сократить время разработки и помочь вам создать красивые структурированные веб-сайты.
Квадратная сетка обеспечивает стандартную горизонтальную сетку, но также поддерживает вертикальную сетку, используя стандартный "квадрат" размером 28 пикселей. На самом деле это просто сетка, а не полная библиотека CSS, такая как Bootstrap (то есть без кнопок, меню и т. Д.).
Я использовал для одного проекта и нашел его довольно интуитивно понятным, хотя в конечном итоге я решил, что мне будет слишком сложно отслеживать как вертикальную, так и горизонтальную сетку, особенно если подумать об адаптивном дизайне.
Вы можете объединить их или, по крайней мере, взглянуть на исходный код квадратной сетки, который является довольно простым CSS, чтобы получить некоторые идеи о том, как адаптировать Bootstrap для удовлетворения ваших потребностей.