Как установить разную ширину для элементов в одном элементе-контейнере в Singularity

Я все еще озадачен некоторыми аспектами применения Singularity. Меня интересует, например, одна вещь. Ниже я настроил несколько простых элементов. Синий внизу — это нижний колонтитул, желтый посередине — содержимое, а верхние три ячейки (красная, зеленая фуксия — построены с помощью grid-span) составляют заголовок. Все три части построены одним и тем же контейнером.

http://sassmeister.com/gist/8010028

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

  • Определив ширину в процентах только для элемента заголовка обертки?
  • Применив миксин макета к элементу заголовка и установив совершенно новый контекст?

Или даже невозможно иметь разную ширину для одного из трех, если все они полагаются на одни и те же настройки контейнера и контекст? С уважением Ральф


css singularitygs
person rkoller    schedule 17.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Есть много способов сделать один из контейнеров больше, и эта проблема не связана с Singularity.

Мой любимый метод — отрицательные поля. Это неприменимо к вашим стилям, потому что вы установили margin: 0 auto для своих контейнеров. Я предлагаю вместо этого использовать margin: 0 auto на body. Это потребует некоторого рефакторинга.

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

Вот чего мне удалось добиться: http://sassbin.com/gist/8030219/

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

PS Обратите внимание, что SassMeister работает на Sass 3.3, тогда как Singularity и Breakpoint не работают должным образом на Sass 3.3. Вместо этого используйте SassBin.com, который остается на Sass 3.2.

person Andrey Mikhaylov - lolmaus    schedule 18.12.2013
comment
Вау хороший! Спасибо! Хорошо, Haml и простой Sass делают вещи немного сложнее, но я думаю, что все равно это понимаю. ^^ И рекомендуемый подход будет через миксин макета? Вместо переназначения $grids было бы рекомендовано использовать миксин макета? Но рекомендуемым способом является расширение класса основного контейнера в вашем случае с отрицательными полями и выполнение определения базового размера в теле? - person rkoller; 19.12.2013
comment
Haml и Sass намного легче читать, если вы понимаете их синтаксис. Используйте миксин layout, если у вас есть сетка для всего сайта, которую вы хотите переопределить. Переопределите $grids, если вы придумываете другую сетку для каждого использования. Не существует рекомендуемого способа настройки ваших контейнеров. Это вопрос личных предпочтений и опыта. - person Andrey Mikhaylov - lolmaus; 19.12.2013
comment
хм, но возникло еще два вопроса. Ваше решение работает нормально, но если вы примете во внимание настройку моего исходного примера, я использовал цвета фона. один для mainwrap, который содержит элемент заголовка, а также основной элемент и footwrap, содержащий нижний колонтитул. оболочка нижнего колонтитула имеет цвет фона, а оболочка для заголовка и основного содержимого — другой. с вашим решением цвет фона не будет заполнять всю ширину фона или, если вы используете изображение в качестве фонового рисунка, это не так. по крайней мере, насколько я могу это понять. :/ - person rkoller; 20.12.2013
comment
Другой вопрос может показаться немного глупым, но, поскольку в Singularity нет явного миксина контейнера, он все еще немного абстрактен для меня, так как я думаю, что имя контейнера не является обязательным, чтобы Singularity знал, что такое контейнер (я привык к Susys). @include контейнер; ). Особенно в вашем примере sassbin класс контейнера не содержит никаких важных свойств, кроме clearfix. - person rkoller; 20.12.2013
comment
Означает ли это, что элемент контейнера обычно является родительским элементом дочернего элемента, к которому применяется один из миксинов, охватывающих сетку, таких как gutter-span, float-span и т. д.? Таким образом, мы могли бы переименовать классы контейнеров по отдельности, например, .cnt-header, .cnt-main, .cnt-footer или все из них, например. .banana (если взять заумный пример) вместо .container. ;) - person rkoller; 20.12.2013
comment
Хорошо, насчет моего первого вопроса. Я думаю, что нашел обходной путь, чтобы заставить вещи работать в моем первоначальном виде: sassmeister.com/gist/ 8010028 (обновленная версия) я установил максимальную ширину контейнера на ширину самого широкого контейнера. остальные я мог сузить с помощью свойства ширины. как это сделано с шириной div.container: 50%. Пробовал это раньше, но забыл, что ширина относится к ширине области просмотра окна, а не контейнера. поэтому ширина 80% ничего не сделала. причина, по которой 80% всей области просмотра все еще шире, чем максимальная ширина 750 пикселей, поэтому никаких видимых изменений - теперь она меняется. ;) - person rkoller; 20.12.2013
comment
Привет, @rpk, это обсуждение вышло за рамки формата StackOverflow, который должен быть посвящен одной конкретной проблеме. Пишите мне в Hangouts [email protected] или в Skype lolmaus_, и мы найдем решение. - person Andrey Mikhaylov - lolmaus; 21.12.2013
comment
@lolmaus извините за задержку, но последние 1,5 недели у меня не было доступа к компьютеру. И вы правы, в основном мой первоначальный вопрос содержит все различные аспекты, но это выходит за рамки вопроса о переполнении стека. на данный момент мне приходится иметь дело с некоторыми основными проблемами с драгоценными камнями, связанными с набором кодов. но до того, как они появились, я уже понял большинство оставшихся вопросов. Но когда у меня снова все пойдет гладко, я буду более чем счастлив написать вам пару строк. Большое спасибо! - person rkoller; 31.12.2013