Как добавить левый и правый отступ в контейнеры в Susy 2.0

Я использую Susy 2.0. Я строю сайт фиксированной ширины (который станет отзывчивым на более позднем этапе). Тем не менее, я думаю, что мой вопрос применим при использовании Сьюзи в качестве статического или жидкого.

Вот мои глобальные настройки:

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: static, 
 gutters: 1/3,
);

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

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

Какой лучший способ сделать это? Если я просто применю padding-left и padding-right (в простом CSS) к моему элементу контейнера, это нарушит сетку. Контейнер больше не достаточно широк, чтобы содержать вычисления ширины столбца Сьюзи.

У меня "CSS-размер" универсально установлен на "border-box". Если я переопределю это в моем элементе контейнера с помощью 'content-box', то сетка будет работать правильно. Я бы на самом деле ожидал обратного?

Является ли решение применить 'box-sizing: content-box' к моим элементам контейнера? Или в Сьюзи есть настройка, которую я могу применить, что мне не хватает? Я чувствую, что, вероятно, есть. Я бы предпочел, чтобы Сьюзи по возможности выполняла все расчеты сетки

Мой вопрос также относится и к адаптивному / текучему дизайну, поскольку у меня все еще остается та же проблема, даже если я задаю контейнеру заданную ширину и удаляю настройки 'column-width' и 'math'.

Источник

4 ответа

Решение

На данный момент настройка content-box на контейнере и добавление собственных отступов - лучший способ. В то время как border-box более разумно для большинства вещей, бывают времена, когда content-box имеет смысл, и на мой взгляд, это отличный пример. Это работает, потому что Сьюзи устанавливает ширину вашего контейнера, и ваш отступ добавляет к этому, а не вычитается, что означает, что у вас все еще есть место, необходимое для сетки.

Я был бы готов рассмотреть какой-то тип grid-padding Опять же, но в Susy 1 казалось, что это вызвало больше проблем, чем решило. Я должен подумать о лучших способах, которыми мы могли бы сделать это. Если есть идеи, мне всегда интересно!

Источник

Для заполнения сетки я обычно делаю что-то вроде этого. Прекрасно работает и нет необходимости в дальнейших осложнениях:)

.container {
  @include container($susy); 
  padding-left: 15px; 
  padding-right: 15px; 
}
Источник

Если вы согласны с добавлением некоторого поля в том же режиме (относительном или фиксированном), что и ширина самого контейнера, вы можете просто уменьшить ширину контейнера и использовать margin: 0 auto центрировать это в его родителе.

Вот так, для 5% заполнения с каждой стороны:

.my-container {
    @include container(90%);
    margin: 0 auto;
}

Если Susy будет поддерживать функции CSS в качестве ширины контейнера, вы сможете использовать фиксированное количество пикселей даже при относительной ширине контейнера, например, для 10 пикселей на каждой стороне:

.my-container {
    @include container(calc(100% - 20px));
    margin: 0 auto:
}

К сожалению, это не работает. Конечно, если вы можете добавить div обертки вокруг вашего контейнера, вы можете установить ширину и поле там и использовать container(100%),

Источник

Как правило, вам нужно добавить ключевое слово "static" в контейнер, который дает вам статический сайт, но вам нужно включить "math: fluid" в настройки, чтобы дать вам сайт, основанный на процентах. В противном случае, как вы упомянули в своем вопросе, "контейнер больше не достаточно широк, чтобы содержать вычисления ширины столбца Сьюзи".

Настройки Susy

У вас все еще может быть сайт, основанный на рамке. Добавьте global-box-sizing: border-box к настройкам. Вам также нужно изменить "math: static" на "math: жидкость", чтобы все ваши единицы были в процентах.

Граница включает в себя

Добавьте "@include border-box-sizing;" за пределами настроек @suzy. Возможно, вам придется включить компас с "@import "compass";"

Контейнер

Вы должны включить "статический" в качестве параметра. Контейнер принимает параметр "макет" ( http://susydocs.oddbird.net/en/latest/toolkit/). Переменная "layout" состоит из ключевых слов ( http://susydocs.oddbird.net/en/latest/shorthand/). "Ключевые слова" включают "статические" ( http://susydocs.oddbird.net/en/latest/shorthand/).

Полный пример

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: fluid,
 global-box-sizing: border-box,
 gutters: 1/3
);

@include border-box-sizing;

.container {
     @include container(static);
     padding: 1%;
}

Заполнение теперь можно добавить в контейнер или любой другой элемент, не нарушая сайт.

Источник
Другие вопросы по тегам