Четыре раздела в нижнем колонтитуле

Question

Я только начинаю работать с сеточной системой Singularity - постепенно осваиваюсь.

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

Наименьшая сетка @include add-grid(2);

У меня есть нижний колонтитул на странице, а внутри нижнего колонтитула четыре раздела.

Наименьший размер экрана - нижний колонтитул установлен на @include grid-span(2, 1);

Мне бы хотелось, чтобы два раздела внутри нижнего колонтитула появлялись рядом друг с другом в первом и втором столбцах. А затем следующие два раздела в следующем ряду, в течение следующих двух столбцов.

Чтобы увеличить размер экрана, я бы хотел, чтобы все четыре раздела в нижнем колонтитуле находились в одном ряду.

В чистом CSS это обычно делается с помощью float и, скажем, 25% ширины.

Мой вопрос - может ли что-нибудь сделать Sass или Singularity, чтобы сделать разметку для этих четырех разделов немного "СУХОЙ"? Или я должен установить позиции сетки и настройки диапазона сетки для всех четырех разделов и для всех точек останова?

Например

footer.section1 {
    @include grid-span(1,1); // 2 columns

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,1);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,1);
    }    
}

footer.section2 {
    @include grid-span(2,1); // 2 columns

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,3);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,5);
    }    
}

footer.section3 {
    @include grid-span(1,1); // 2 columns - how can I force this onto the next row?

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,5);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,9);
    }    
}

footer.section4 {
    @include grid-span(1,2); // 2 columns - how can I force this onto the next row?

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,7);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,13);
    }    
}

Answer 1

Таким образом, ваш вопрос - это запрос рекомендаций, а не описание конкретной проблемы, которую вы пытаетесь решить?

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

Во-вторых, вы должны понимать, что там происходит. Подход, ориентированный на мобильные устройства, рекомендованный Singularity, предлагает применять интервалы сетки, используя только min-width Медиа-запрос. Это означает, что стили, применяемые для определенной точки останова, будут сохраняться для всех больших точек останова, если вы не переопределите их.

Это позволяет вам исключить охватывающий код в некоторых точках останова, если желаемая компоновка в этих точках останова идентична компоновке соответствующих предыдущих точек останова.

Например, если количество столбцов варьируется: 2, 4, 6, 12 и т. Д., Но ваши блоки должны всегда иметь 50%/50% ширины страницы, вы можете применять интервалы только один раз для наименьших точек останова.

Есть две ошибки:

1. Если вы изменяете количество точек останова, обычно изменяется размер желоба, и промежутки, применяемые в предыдущих точках останова, становятся несовместимыми с желобами текущей точки останова. Чтобы обойти это, вам может потребоваться применить интервалы к каждой точке останова, или вы можете рассчитывать размеры столбцов и желобов для каждой последующей точки останова в таких комбинациях, чтобы размер желоба относительно ширины контейнера был одинаковым для всех точек останова.
2. Иногда может потребоваться, чтобы промежутки от предыдущей точки останова не применялись к текущей точке останова. Очень нудно исключать пролеты Сингулярности вручную, поэтому я предлагаю, чтобы, когда вы сталкиваетесь с такой необходимостью, вы изолировали свои пролеты с помощью min-width + max-width медиазапросы, чтобы они не загрязняли последующие контрольные точки.

В-третьих, вы можете использовать Breakpoint Slicer для упрощения управления точками останова. Это не экономит ваши строки кода, но облегчает работу с медиа-запросами.

В-четвертых, если вы создаете сетки миниатюр (в отличие от макетов страниц), вы можете запрограммировать миксины, которые используют циклы для генерации интервалов для всех столбцов во всех точках останова с помощью одного вызова mixin.

Вы можете найти демонстрацию такой созданной адаптивной сетки миниатюр в нижней части тестовой страницы Breakpoint Slicer. А вот код Sass, используемый для генерации этой сетки.

Тем не менее, вы ничего не можете сделать, чтобы уменьшить строительные леса, необходимые для адаптивных макетов. CSS является очень примитивным и бесхитростным языком, который предполагает много повторений. С Sass вы можете уменьшить количество дублирования кода в двух случаях:

1. Если повторный код абсолютно идентичен. Затем вы можете использовать расширяемые внешние медиа-запросы или миксины внутри медиа-запросов (последний не дедуплицирует CSS-код, но, по крайней мере, DRY - это ваш Sass-код).
2. Если повторяющийся код имеет небольшие отклонения, но эти отклонения являются регулярными (т.е. следуйте правилу, которое можно запрограммировать). Затем вы можете написать циклический миксин, который генерирует повторяющиеся леса с этими регулярными изменениями.

Но если предполагается, что повторяющиеся леса отличаются нерегулярно (что характерно для адаптивных макетов страниц), тогда вы не можете не делать все леса вручную.

PS Я описал свое понимание вопроса. Не думайте, что это абсолютная правда. Ищите другие мнения (которые могут отличаться или расширять мое мнение) и постарайтесь углубиться в вопрос достаточно глубоко, чтобы получить собственное мнение.

PPS Не имеет прямого отношения к вашему вопросу, но попробуйте использовать отступ .sass синтаксис. Это избавляет вас от рутины и двоеточий, а после привыкания к Sass вы почувствуете, что кодирование .scss это боль.

Вы все еще можете использовать .scss время от времени. Например, создавать карты с отступным синтаксисом неудобно, поэтому я держу свои карты в .scss частичные и делать все остальное с .sass,