Строительство наш первый СУСИ Grid

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

$susy: (
  columns: 12,
  container: 1200px,
  gutters: 1/4,
  global-box-sizing: border-box,
  debug: (image: show)
);

На этой карте вы можете определить почти любой из глобальных настроек для сетки, из числа столбцов GUTTER ширину, все из которых перечислены в Сузи documentation ¹⁰ .Если вы не введете значение в вашей карте, Сюзи просто использовать настройки по умолчанию.Есть несколько вещей, которые нам нужно определить, чтобы создать нашу сетку:

• Количество columns мы будем использовать .
• Максимальная ширина container.Если вы не укажете ширину, ваш контейнер будет 100% ширины окна просмотра, как и любой элемент блока.Вы можете это в некоторых случаях, но, особенно в то время как мы учимся, установив максимальную ширину позволяет более ясно увидеть, что происходит на .
• Gutters.По умолчанию Сузи включает желоба, как правых полях на ваших страницах и на одну четверть (1/4) ширины столбца.Вы можете изменить соотношение желоба здесь, или использовать gutter-position11, чтобы решить, как вы хотите желоба вести себя .
• Бокс-sizing.Я всегда предпочитаю, чтобы установить это border-box.(По умолчанию Susy является content-box.)
• Отладки image.Установка этого show отображает фоновое изображение, показывая свои сетки столбцов, полезно для убедившись, что все выравнивается правильно и ваши элементы ведут себя, как они должны .

Создание основной Layout

Мы собираемся начать с создания этой простой макет, используя Сюзи:

¹²

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

<main class="wrapper">
  <header></header>
  <article></article>
  <aside></aside>
  <footer></footer>
</main>

Как я уже упоминал ранее, Сузи полностью зависит от CSS и Sass, чтобы настроить сетку, так что вам не нужно что-нибудь добавить к вашему HTML.Наиболее важной особенностью для создания сеток в суперсимметрии span примесь.Используйте @include включить подмешать в вашем Sass.Как вы можете видеть на картинке, мы хотим, чтобы наш верхний и нижний колонтитулы занять 100% ширины контейнера, так что мы не должны делать ничего здесь.Но мы должны наши ~ 28 и ~ | 29 | элементы взять восемь столбцов и четыре колонки соответственно в нашем двенадцать столбцов сетки.Для того, чтобы достичь этого, мы должны использовать span подмешать:

/* SCSS */

article {
  @include span(8 of 12);
  /* More styles here */
}

aside {
  @include span(4 of 12 last);
  /* More styles here */
}

Есть несколько вещей, чтобы отметить здесь:

1. Сузи зависит от context: мы могли бы легко написать @include span(8) для <article> элемента, который будет производить тот же результат, потому что мы уже определили наш макет в виде четырех столбцов в карте.Тем не менее, если мы хотим, чтобы переопределить карту для этого конкретного элемента (например, разделить эту область нашего макета в большем количестве колонок), мы должны указать контекстное — в этом случае, двенадцать колонн .
2. Мы хотим, <aside> быть последним в строке, так что мы добавили слово last к примесь.Это говорит Сюзи удалить запас правую на этом элементе, так что он подходит на строке .

Если мы взглянем на наш CSS файл, мы увидим выше Sass компилирует:

article {
  width: 66.10169%;
  float: left;
  margin-right: 1.69492%;
}

aside {
  width: 32.20339%;
  float: right;
  margin-right: 0;
}

Вы можете видеть, что Сузи была рассчитывается наши ширину столбцов и желобов на основе настроек, которые мы, указанных в нашей карте .

В CodepenПример я включил фиктивный контент, а также небольшой отступ и цвет фона на наших элементов.Без них наша сетка просто быть невидимым, а Сузи не имеет по умолчанию стиль .

Как мы с плавающей элементы, мы также должны помнить, чтобы очистить наш колонтитул:

    
header {
  padding: 2em;
  background-color: #FF4CA5; /* Of course, you can define your colours as variables if you prefer! */
}

article {
  @include span(8);
  padding: 2em;
  background-color: #ff007f;
}

aside {
  @include span(4 last);
  padding: 2em;
  background-color: #CC0066;
}

footer {
  clear: both;
  padding: 2em;
  background-color: #7F2653;
}

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

main.wrapper {
  @include container;
}

С этими дополнениями, мы получаем такой результат:

¹⁷

Переработка Наша Grid