Я попробовал Singularity для нового проекта. До сих пор я использовал Susy. Обычно я предпочитаю публиковать вопросы по отдельности, но в данном случае вопросы связаны с одной центральной точкой. Настройка следующая.
Моя главная страница представляет собой заголовок с фоновым изображением и нижний колонтитул с градиентом, а контейнер с содержимым должен быть окружен полями. Основной скелет разметки выглядит следующим образом:
<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) На странице два пробела
Первое можно исправить с помощью overflow-x: hidden; на %wrap или .mainwrap. Но второй разрыв между .mainwrap и .footwrap этим не исправить. Желаемый вид границы между .mainwrap и .footwrap должен выглядеть следующим образом. Нижний колонтитул визуально находится под основной оболочкой, а у основной оболочки есть видимая тень:
Но с описанной настройкой 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; когда достигнута определенная максимальная ширина контейнера. Подходит ли путь с padding-left/right и gutter-span, а также с максимальной шириной?
Означает ли это, что вам нужно определить базовый номер столбца и максимальную ширину контейнера. Когда эта максимальная ширина достигнута, вы увеличиваете максимальную ширину и переопределяете активную настройку сетки с помощью 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;
}
Но в основном это привело бы к довольно большому количеству точек останова, если вы хотите детально контролировать вещи в контейнере? Или есть более элегантное решение?
С уважением Ральф
