Развернуть реагирующие элементы за пределами сетки?

Question

Я делаю отзывчивый веб-сайт, используя Foundation 5. Все идет гладко, но одна проблема, которую я испытываю, - это PSD, созданный дизайнером, который в значительной степени следует за сеткой из 12 столбцов, которая великолепна. Однако есть несколько элементов дизайна, которые расширяются за пределами сетки в крайнем левом или дальнем правом углу. Также на некоторых «строках» будут два элемента, расположенные бок о бок, но каждый элемент будет занимать по 7 пространств сетки.

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

Answer 1

Я использую два отдельных пути приближения к этому типу расположения:

Используйте отрицательные поля тянуть влево/вправо.

Например, если ваш элемент вытаскивает из левого края сетки по 25px, вы должны использовать:

.element{ 
    margin-left: -25px 
} 

До тех пор, пока вы с использованием сетки Fluid элементов в потечет для заполнения пробела.

Это самый простой подход, который используется очень часто в реализации Bootstrap, поэтому я не предвижу, что Фонд сильно отличается (для полного раскрытия: я не использовал Foundation). если вы используете измерения-значения, чтобы вытащить наружу, хотя вам нужно будет убедиться, что они работают по различным видам/медиа-запросам.

Развернуть по сетке.

Это, вероятно, наиболее актуально, когда вы упоминаете, что у вас есть сетка 2x7 на странице. Если у вас есть что-то в дизайне, которое значительно падает за пределами используемой сетки, используйте новое имя класса и используйте это, чтобы изменить поведение сетки в этой конкретной точке страницы.

Помните, что независимо от структуры, которую вы собираетесь использовать, она предназначена только в качестве отправной точки: вы должны чувствовать себя комфортно и уверенно в модификации и построении поверх нее в соответствии с вашими потребностями (и с дизайном вашего дизайнера!).