Как сделать статическую ширину элемента в системе гибкой сетки в Susy2

Я новичок в CSS и стилях внешнего интерфейса, и я выбрал Sass и Susy2 в качестве двух фреймворков, с которыми я хотел бы работать.

Моя конфигурация Susy выглядит так:

$susy: (
        columns: 16,
        gutters: 1/4,
        column-width: 2rem,
        output: isolate
);

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

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

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


css sass grid susy
person Josh Elias    schedule 24.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

  • Возможно, но может быть сложно включить статические элементы в гибкий макет. Это правда, с Сюзи или без нее. Насколько это сложно, зависит от конкретного макета / отзывчивости, который вы хотите, но у Susy нет реального мнения о том или ином.
  • Если элементы не сжимаются/не расширяются, вам просто нужно решить, что произойдет с дополнительным пространством, когда его станет слишком много, и что произойдет с элементами, когда они больше не поместятся.
  • У Susy нет реального мнения о статической, текучей и смешанной сетке, но у Susy нет возможности рассчитать смешанную сетку и по-прежнему понимать ее как единую сетку. Смешивание статики и жидкости по определению нарушает сетку. вы можете это сделать, и Сюзи не заметит разницы, но вы сбились с проторенного пути.
  • Susy — это, прежде всего, математический калькулятор макетов с некоторыми дополнительными ярлыками для создания макетов CSS. В span нет ничего волшебного или обязательного, поэтому вы можете использовать его везде, где это полезно, и не использовать его, когда он мешает.

По сути, Susy создан для того, чтобы быть настолько гибким, насколько вы этого хотите. Каждый миксин Susy предоставляет ярлык для определенного CSS, связанного с макетом, который вы можете использовать по своему усмотрению. Функции Susy также дают вам прямой доступ к математике, которую вы можете использовать по своему усмотрению.

person Miriam Suzanne    schedule 29.06.2016