Как правильно определить контейнеры в Singularity в разных видовых окнах

Question

Я дал Singularity открутку для нового проекта. До сих пор я использовал Сьюзи. Обычно я предпочитаю отдельно задавать вопросы, но в данном случае вопросы связаны с одной центральной точкой. Настройка следующая.

Моя главная страница - это заголовок с фоновым изображением и нижний колонтитул с градиентом, а контейнер с содержимым должен быть окружен полями. Основной скелет разметки выглядит следующим образом:

<div class="mainwrap"> 
    <header class="container"></header> 
    <div class="container"></div> 
</div> 
<div class="footwrap"> 
    <footer class="container"> 
</div> 

Основной стиль из оберток и контейнеров выглядит как:

%wrap { 
    width:100%; 
    @extend %clearfix; 
} 

.mainwrap { 
    @extend %wrap; 
    background: image-url('texturetastic_gray.png') repeat top left; 
    @include box-shadow(black 0.2em 0.2em 0.5em); 
    margin-bottom:1em; 
} 
.footwrap { 
    @extend %wrap; 
    background-color: #484d51; 
    @include background-image(linear-gradient(left, rgb(72, 77, 81), rgb(22, 25, 28))); 
    @include filter-gradient(rgb(72, 77, 81), rgb(22, 25, 28), horizontal); 
} 

.container { 
    @include background-grid; 
    max-width:900px; 
    margin: 0 auto; 
    @extend %clearfix; 
} 

Теперь у меня есть два вопроса:

1) Есть два пробела на странице

диафрагменное первая из них фиксируется с переполнением-x: hidden; на% wrap или .mainwrap. Но второй разрыв между .mainwrap и .footwrap не может быть исправлен с этим. Желаемый взгляд на границу между .mainwrap и .footwrap должен выглядеть следующим образом. Сноска визуально под mainwrap и mainwrap имеет видимый Dropshadow:

Но с описанной HTML и настройки CSS я получаю всегда разрыв, как уже видели выше:

Любые идеи почему? :(

2) Установка контейнера Это самая неопределенная часть. У меня есть большинство моих проблем и спросите себя, какова может быть лучшая практика. Мои основные параметры:

$grids: 4; 
$grids: add-grid(6 at 550px); 
$grids: add-grid(9 at 750px); 
$grids: add-grid(12 at 900px); 
$grids: add-grid(16 at 1200px); 
$grids: add-grid(18 at 1400px); 

$gutters:0.25; 
$gutters: add-gutter(.20 at 900px); 
$gutters: add-gutter(.15 at 1200px); 

и для .container я добавил:

padding-left: gutter-span(); 
padding-right: gutter-span(); 

, как предложено в одном из темы форума для Singularity на Github. Но я все еще не уверен, что может быть лучшей практикой. В основном у меня было бы минимальное заполнение, которое переключается на margin: 0 auto; когда достигнута заданная максимальная ширина для контейнера. Является ли путь с прописью слева/справа и полостью желоба, а также макс-шириной соответствующим образом?

Это означает, что вы должны определить базовый номер столбца и максимальную ширину для контейнера. Когда эта максимальная ширина достигнута, вы изменяете максимальную ширину вверх и переопределяете настройку активной сетки с помощью add-grid() и корректируете отступы. Вы продолжаете это до тех пор, пока максимальная ширина позволяет сканировать 1400 или 1600 пикселей для контейнера. А на контрольных точках для более широких видовых экранов вы должны использовать кратность разлома. Подсчитано, что это будет выглядеть, например. что?

$grids: 4; 
$grids: add-grid(8 at 600px); 
$grids: add-grid(12 at 900px); 
$grids: add-grid(16 at 1400px); 

$gutters:0.25; 
$gutters: add-gutter(.20 at 600px); 
$gutters: add-gutter(.15 at 900px); 
$gutters: add-gutter(.10 at 1400px); 

.container { 
    @include background-grid; 
    max-width:600px; 
    @include breakpoint(600px) { 
     max-width: 900px; 
    } 
    @include breakpoint(900px) { 
     max-width: 1400px; 
    } 
    @include breakpoint(1400px) { 
     max-width: 1600px; 
    } 

    margin: 0 auto; 
    padding-left: gutter-span(); 
    padding-right: gutter-span(); 
    @include breakpoint(600px) { 
     padding-left: gutter-span(2); 
     padding-right: gutter-span(2); 
    } 
    @include breakpoint(900px) { 
     padding-left: gutter-span(3); 
     padding-right: gutter-span(3); 
    } 
    @include breakpoint(600px) { 
     padding-left: gutter-span(4); 
     padding-right: gutter-span(4); 
    } 
    @extend %clearfix; 
} 

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

С наилучшими пожеланиями Ральф

Answer 1

второй зазор между .mainwrap и .footwrap не поправимо с этим. Желаемый взгляд на границу между .mainwrap и .footwrap должен выглядеть следующим образом. Сноска визуально под mainwrap и mainwrap имеет видимый Dropshadow:

Вы получили margin-bottom: 1em применительно к .mainwrap. Прокомментируйте это, и вы хорошо пойдете.

---

я до сих пор неизвестно, что может быть лучшей практикой. В основном у меня было бы минимальное заполнение, которое переключается на margin: 0 auto; когда достигнута заданная максимальная ширина для контейнера.

1. Почему вы дублируете медиа-запросы? Вы можете написать как max-width, так и padding стилей в пределах тех же breakpoint звонков. Но дело в том, что вам не нужно менять максимальную ширину. Установите максимальную ширину статически ТОЛЬКО с наибольшим максимальным значением.
2. Вы можете использовать max-width, padding и margin 0 auto одновременно. Не нужно применять их выборочно. Просто будьте осторожны, с какими элементами вы применяете эти стили.
3. Если вы в порядке со статическим дополнением, e. г. padding: 0 1em, тогда вам даже не нужны точки останова. Если вам требуется отступы относительно размера сетки, то не стесняйтесь использовать контрольные точки. Если вы чувствуете, что они громоздкие, создайте микс.