Flexbox Grid Pro

Введение

Flexbox Grid Pro - это богатая модульная сеточная система для создания адаптивных, отзывчивых макетов. Сетка доступна в двух вариантах - как набор предопределенных css-классов и как набор sass-миксинов. То есть вы можете либо в html-разметке проставить нужным элементам небходимые классы, либо же в вашем sass-коде в селекторах подключить необходимые миксины, как показано ниже. Оба варианта равнозначны и дают аналогичные результаты. Каким из них воспользоваться - лишь вопрос ваших предпочтений:

HTML

<div class="wrapper container">
  <header class="page-header row">
    <div class="logo col-2"></div>
    <nav class="main-nav col"></nav>
  </header>

  <main class="page-main row">
    <section class="left-sidebar col-3"></section>
    <section class="page-content col-6"></section>
    <section class="right-sidebar col-3"></section>
  </main>

  <footer class="page-footer row">
    <div class="footer-menu col-4"></div>
    <div class="license col-8"></div>
  </footer>
</div>

Sass ( Scss syntax )

.wrapper {
  @include container();
}

.page-header,
.page-main,
.page-footer {
  @include row();
}

.logo {
  @include col(2);
}

.main-nav {
  @include col();
}

.left-sidebar,
.right-sidebar {
  @include col(3);
}

.page-content {
  @include col(6);
}

.footer-menu {
  @include col(4);
}

.license {
  @include col(8);
}

Библиотека содержит следующие разделы наборов css-классов и соответствующих sass-миксинов:

Выравнивание
Направление располжения ячеек в сетке
Смещение колонок
Упорядочивание ячеек
Скрытие и отображение элементов

Для того чтобы создать адаптивную сетку, нужно в разметку добавить элемент контейнера container, содержащий элементы строк с необходимым количеством столбцов внутри. В примере ниже представлена сетка, состоящая из трёх строк row, каждая из которых в свою очередь содержит по три колонки col одинаковой ширины:

col

HTML

<div class="container">
  <div class="row">
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col"></div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.row {
  @include row();
}

.col {
  @include col();
}

Колонки заданной ширины

По умолчанию сетка состоит из двенадцати колонок. Просто задайте элементу необходимый класс или подключите в селекторе нужный миксин:

col-12

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-7

col-5

col-8

col-4

col-9

col-3

col-10

col-2

col-11

col-1

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">col-12</div>
  </div>

  <div class="example row">
    <div class="example__col col-1">col-1</div>
    <div class="example__col col-11">col-11</div>
  </div>

  <div class="example row">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-10">col-10</div>
  </div>

  <div class="example row">
    <div class="example__col col-3">col-3</div>
    <div class="example__col col-9">col-9</div>
  </div>

  <div class="example row">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-8">col-8</div>
  </div>

  <div class="example row">
    <div class="example__col col-5">col-5</div>
    <div class="example__col col-7">col-7</div>
  </div>

  <div class="example row">
    <div class="example__col col-6">col-6</div>
    <div class="example__col col-6">col-6</div>
  </div>

  <div class="example row">
    <div class="example__col col-7">col-7</div>
    <div class="example__col col-5">col-5</div>
  </div>

  <div class="example row">
    <div class="example__col col-8">col-8</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row">
    <div class="example__col col-9">col-9</div>
    <div class="example__col col-3">col-3</div>
  </div>

  <div class="example row">
    <div class="example__col col-10">col-10</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="example row">
    <div class="example__col col-11">col-11</div>
    <div class="example__col col-1">col-1</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &:first-child {

    .example__col {
      @include col(12);
    }
  }

  &:nth-child(2) {

    .example__col:first-child {
      @include col(1);
    }

    .example__col:nth-child(2) {
      @include col(11);
    }
  }

  &:nth-child(3) {

    .example__col:first-child {
      @include col(2);
    }

    .example__col:nth-child(2) {
      @include col(10);
    }
  }

  &:nth-child(4) {

    .example__col:first-child {
      @include col(3);
    }

    .example__col:nth-child(2) {
      @include col(9);
    }
  }

  &:nth-child(5) {

    .example__col:first-child {
      @include col(4);
    }

    .example__col:nth-child(2) {
      @include col(8);
    }
  }

  &:nth-child(6) {

    .example__col:first-child {
      @include col(5);
    }

    .example__col:nth-child(2) {
      @include col(7);
    }
  }

  &:nth-child(7) {

    .example__col:first-child {
      @include col(6);
    }

    .example__col:nth-child(2) {
      @include col(6);
    }
  }

  &:nth-child(8) {

    .example__col:first-child {
      @include col(7);
    }

    .example__col:nth-child(2) {
      @include col(5);
    }
  }

  &:nth-child(9) {

    .example__col:first-child {
      @include col(8);
    }

    .example__col:nth-child(2) {
      @include col(4);
    }
  }

  &:nth-child(10) {

    .example__col:first-child {
      @include col(9);
    }

    .example__col:nth-child(2) {
      @include col(3);
    }
  }

  &:nth-child(11) {

    .example__col:first-child {
      @include col(10);
    }

    .example__col:nth-child(2) {
      @include col(2);
    }
  }

  &:nth-child(12) {

    .example__col:first-child {
      @include col(11);
    }

    .example__col:nth-child(2) {
      @include col(1);
    }
  }
}

Выравнивание

Для горизонтального и вертикального выравнивания колонок воспользуйтесь необходимыми классами или миксинами.

Горизонтальное

col-2

HTML

<div class="container">
  <div class="example row justify-content-start">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="example row justify-content-center">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="example row justify-content-end">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="example row justify-content-space-between">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>

  <div class="examplerow justify-content-space-around">
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
    <div class="example__col col-2">col-2</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {
      @include justify-content(flex-start);
    }

    &:nth-child(2) {
      @include justify-content(center);
    }

    &:nth-child(3) {
      @include justify-content(flex-end);
    }

    &:nth-child(4) {
      @include justify-content(space-between);
    }

    &:nth-child(5) {
      @include justify-content(space-around);
    }

    &__col {
      @include col(2);
    }
  }
}

Вертикальное

col-4

HTML

<div class="container">
  <div class="example row align-items-start">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row align-items-center">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row align-items-end">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row align-items-stretch">
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
    <div class="example__col col-4">col-4</div>
  </div>

  <div class="example row">
    <div class="example__col col-4 align-self-start">col-4</div>
    <div class="example__col col-4 align-self-center">col-4</div>
    <div class="example__col col-4 align-self-end">col-4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {
      @include align-items(flex-start);
    }

    &:nth-child(2) {
      @include align-items(center);
    }

    &:nth-child(3) {
      @include align-items(flex-end);
    }

    &:nth-child(4) {
      @include align-items(stretch);
    }

    &:nth-child(5) {

      .example__col:first-child {
        @include align-self(flex-start);
      }

      .example__col:nth-child(2) {
        @include align-self(center);
      }

      .example__col:nth-child(3) {
        @include align-self(flex-end);
      }
    }

    &__col {
      @include col(4);
    }
  }
}

Направление расположения главной оси

Чтобы задать направление расположения столбцов в строке, воспользуйтесь необходимыми классами или миксинами:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-3">1</div>
    <div class="example__col col-3">2</div>
    <div class="example__col col-3">3</div>
    <div class="example__col col-3">4</div>
  </div>

  <div class="example row direction-row-reverse">
    <div class="example__col col-3">1</div>
    <div class="example__col col-3">2</div>
    <div class="example__col col-3">3</div>
    <div class="example__col col-3">4</div>
  </div>

  <div class="example row direction-column">
    <div class="example__col col-3">1</div>
    <div class="example__col col-3">2</div>
    <div class="example__col col-3">3</div>
    <div class="example__col col-3">4</div>
  </div>

  <div class="example row direction-column-reverse">
    <div class="example__col col-3">1</div>
    <div class="example__col col-3">2</div>
    <div class="example__col col-3">3</div>
    <div class="example__col col-3">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:nth-child(2) {
      @include direction(row-reverse);
    }

    &:nth-child(3) {
      @include direction(column);
    }

    &:nth-child(4) {
      @include direction(column-reverse);
    }

    &__col {
      @include col(3);
    }
  }
}

Порядок расположения колонок

Для указания порядка расположения столбцов в строке воспользуйтесь нужными классами или миксинами:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-2 order-2">1</div>
    <div class="example__col col-2 order-1">2</div>
    <div class="example__col col-2 order-4">3</div>
    <div class="example__col col-2 order-3">4</div>
    <div class="example__col col-2 order-6">5</div>
    <div class="example__col col-2 order-5">6</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &__col {
      @include col(2);

      &:first-child {
        @include order(2);
      }

      &:nth-child(2) {
        @include order(1);
      }

      &:nth-child(3) {
        @include order(4);
      }

      &:nth-child(4) {
        @include order(3);
      }

      &:nth-child(5) {
        @include order(6);
      }

      &:last-child {
        @include order(5);
      }
    }
  }
}

Смещение колонок

Для смещения колонок используйте нужные классы или миксины:

of-1

of-2

of-3

of-4

of-5

of-6

of-7

of-8

of-9

of-10

of-11

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-1 offset-right-1">of-1</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-2">of-2</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-3">of-3</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-4">of-4</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-5">of-5</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-6">of-6</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-7">of-7</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-8">of-8</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-9">of-9</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 offset-right-10">of-10</div>
  </div>

  <div class="example row">
    <div class="example__col col-1 no-v-gutters offset-right-11">of-11</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &:first-child {

    .example__col {
      @include offset-right(1);
    }
  }

  &:nth-child(2) {

    .example__col {
      @include offset-right(2);
    }
  }

  &:nth-child(3) {

    .example__col {
      @include offset-right(3);
    }
  }

  &:nth-child(4) {

    .example__col {
      @include offset-right(4);
    }
  }

  &:nth-child(5) {

    .example__col {
      @include offset-right(5);
    }
  }

  &:nth-child(6) {

    .example__col {
      @include offset-right(6);
    }
  }

  &:nth-child(7) {

    .example__col {
      @include offset-right(7);
    }
  }

  &:nth-child(8) {

    .example__col {
      @include offset-right(8);
    }
  }

  &:nth-child(9) {

    .example__col {
      @include offset-right(9);
    }
  }

  &:nth-child(10) {

    .example__col {
      @include offset-right(10);
    }
  }

  &:nth-child(11) {

    .example__col {
      @include offset-right(11);
    }
  }

  &:nth-child(12) {

    .example__col {
      @include offset-right(12);
    }
  }
}

Скрытие и отображение элементов

Скрытие

Для скрытия элементов используйте нужные классы или миксины. В примере ниже вторая и четвертая колонки будут скрыты при ширине вьюпорта 960px и меньше:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">1</div>
    <div class="example__col col hide-laptop-md">2</div>
    <div class="example__col col">3</div>
    <div class="example__col col hide-laptop-md">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:nth-child(2),
  &:nth-child(4) {
    .example__col {
      @include hide(laptop-md);
    }
  }
}

Отображение

Для отображения элементов используйте нужные классы или миксины. В примере ниже вторая и четвертая колонки будут скрыты при ширине вьюпорта 960px и меньше, но снова отобразятся при ширине вьюпорта 768px:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">1</div>
    <div class="example__col col hide-laptop-md show-tablet-landscape">2</div>
    <div class="example__col col">3</div>
    <div class="example__col col hide-laptop-md show-tablet-landscape">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:nth-child(2),
  &:nth-child(4) {
    .example__col {
      @include hide(laptop-md);
      @include show(tablet-landscape);
    }
  }
}

Обнуление внешних отступов у элементов строк и колонок

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

col

HTML

<div class="container">
  <div class="example row no-v-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>

  <div class="example row no-v-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>

  <div class="example row">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:first-child,
  &:nth-child(2) {
    @include no-v-gutters();
  }
}

В следующем примере вертикальные внешние отступы сброшены у колонок во второй строке:

col

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>

  <div class="example row no-children-v-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:nth-child(2) {
    @include no-children-v-gutters();
  }
}

В следующем примере у колонок во второй строке сброшены горизонтальные внешние отступы:

col

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>

  <div class="example row no-children-h-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();
  }

  &:nth-child(2) {
    @include no-children-h-gutters();
  }
}

В следующем примере у первой колонки сброшены вертикальные внешние отступы:

col

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col no-v-gutters">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();

    &:first-child {
      @include no-v-gutters();
    }
  }
}

В следующем примере у первой колонки сброшены горизонтальные внешние отступы:

col

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col no-h-gutters">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();

  &__col {
    @include col();

    &:first-child {
      @include no-h-gutters();
    }
  }
}

В следующем примере у колонок сброшены как горизонтальные, так и вертикальные внешние отступы:

col

HTML

<div class="container">
  <div class="example row no-children-gutters">
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
    <div class="example__col col">col</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();
}

.example {
  @include row();
  @include no-children-gutters();

  &__col {
    @include col();
  }
}

Колоночные классы

По умолчанию сетка состоит из двенадцати колонок и соответственно содержит двенадцать "колоночных" классов:

col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

Контрольные точки ( breakpointns )

По умолчанию система использует восемь предопределенных контрольных точек в стиле desktop-first:

Контрольная точка	Размер вьюпорта
desktop	1280px
laptop	1024px
laptop-md	960px
tablet-landscape	768px
phone-landscape	640px
phone	480px
phone-md	360px
phone-sm	320px

"Отзывчивые" колоночные классы

Исходя из предопределенного числа используемых в сетке столбцов и названий контрольных точек ( по умолчанию ) система включает набор "отзывчивых" колоночных классов:

col-desktop-1 - col-desktop-12
col-laptop-1 - col-laptop-12
col-laptop-md-1 - col-laptop-md-12
col-tablet-landscape-1 - col-tablet-landscape-12
col-phone-landscape-1 - col-phone-landscape-12
col-phone-1 - col-phone-12
col-phone-md-1 - col-phone-md-12
col-phone-sm-1 - col-phone-sm-12

Кастомизация сетки

Наряду с готовым css-файлом библиотека доступна в виде исходных файлов Sass. При этом доступен как sass-, так и scss-синтаксис. При использовании Sass у вас есть возможность использовать набор готовых переменных и миксинов для кастомизации сетки и её гибкой настройки. Все предопределённые классы сетки используют те же переменные и миксины для предоставления целого набора готовых к использованию класоов для быстрого создания адаптивных макетов.

Переменные

Переменные и карты определяют ширину контейнера сетки и его внутренние горизонтальные отступы, количество столбцов и расстояние между ними по горизонтали и вертикали, контрольные точки для медиазапросов, а также части библиотеки, которые будут включены в сформированный css-файл. Они используются для генерации заданных классов сетки, а также для миксинов, использованных в примерах выше.

Миксины

В директории grid/mixins/ содержатся миксины, которые используются вместе с переменными сетки для генерации css. Все генерируемые классы библиотеки используют эти же миксины.

Исходные файлы Sass

Сетка

В файле grid/grid.scss содержатся все переменные и настройки сетки, которые вы можете переопределить:

Sass ( Scss syntax )

$container-width: 1140px !default;
$container-padding: 15px !default;
$h-gutter: 30px !default;
$v-gutter: $h-gutter !default;
$columns: 12 !default;
$mobile-first: false !default;

@function query-direction() {
  @if($mobile-first) {
    @return min;
  } @else {
    @return max;
  }
}

$media-query: query-direction();

$grid-breakpoints: (
  desktop: 1280px,
  laptop: 1024px,
  laptop-md: 960px,
  tablet-landscape: 768px,
  phone-landscape: 640px,
  phone: 480px,
  phone-md: 360px,
  phone-sm: 320px
) !default;

$partials: (
  alignment,
  direction,
  hide,
  offset,
  ordering,
  show,
  gutters
) !default;

@import 'mixins/mixins';
@import 'partials/alignment';
@import 'partials/ordering';
@import 'partials/direction';
@import 'partials/hide';
@import 'partials/show';
@import 'partials/offset';
@import 'partials/gutters.scss';
@import 'base';

Для того чтобы переопределить переменные по умолчанию, задайте им свои значения перед импортом основного файла библиотеки grid/grid.scss:

Sass ( Scss syntax )

$container-width: 1920px;
$container-padding: 10px;
$h-gutter: 15px;
$columns: 24;
$mobile-first: true;

$grid-breakpoints: (
  lg: 1280px,
  md: 960px,
  sm: 768px,
  xs: 480px
);

@import 'path/to/grid/grid.scss'

container-width - ширина контейнера
container-padding - внутренние отступы контейнера
h-gutter - расстояние между колонками сетки по горизонтали
v-gutter - расстояние между колонками сетки по вертикали
columns - количество колонок сетки
mobile-first - булев флаг, указывающий, какой подход будет использован при формировании медиазапросов - mobile first или desktop first
media-query - переменная принимает одно из двух значений - min или max. Какое значение примет переменная, зависит от значения переменной mobile-first. Эта переменная служит для определения того, по какому принципу будут сформированы медиазапросы сетки - mobile first или desktop first.
grid-breakpoints - карта контрольных точек ( breakpoints ) сетки. По умолчанию доступно восемь контрольных точек. Карта используется миксинами системы, а также частями библиотеки grid/partials, отвечающими за генерацию "отзывчивых" колоночных и иных классов. Например, исходя из имен ключей карты и их значений в собранном конечном css-файле библиотеки будут сгенерированы классы и медиазапросы для них, как показано ниже.
partials - список частей библиотеки, отвечающих за генерацию определенных разделов html-классов. Чтобы уменьшить размер конечного css-файла библиотеки, вы можете присвоить этой переменной значение false перед импортом основного файла библиотеки. Это предотвратит генерацию большого количества предопределенных классов.

"Отзывчивые" классы на основе карты контрольных точек

Ниже представлены классы сетки, сгенерированные на основе карты контрольных точек $grid-breakpoints и срабатывающие при заданной ширине вьюпорта. Имена классов генерируются на основе имён ключей карты $grid-breakpoints, значения же ширины вьюпорта в медиазапросах для этих классов генерируются на основе значений соответствующих ключей. Если вы хотите назначить свои имена для классов и свои значения для ширин вьюпорта, просто переопределите переменную $grid-breakpoints перед импортом основного файла библиотеки grid.scss. Чтобы увидеть, как будет перестраиваться сетка при различной ширине вьюпорта, просто поизменяйте размер окна браузера.

Количество колонок в строке при различной ширине вьюпорта - col-desktop-5, col-laptop-2, col-tablet-landscape-3, col-phone-md-12 и т.д.:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">1</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">2</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">3</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">4</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">5</div>
    <div class="example__col col-2 col-laptop-3 col-laptop-md-4 col-tablet-landscape-6 col-phone-landscape-12">6</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &__col {
      @include col(2);
      @include col(3, laptop);
      @include col(4, laptop-md);
      @include col(6, tablet-landscape);
      @include col(12, phone-landscape);
    }
  }
}

Горизонтальное выравнивание колонок в строке при различной ширине вьюпорта: justify-content-desktop-start, justify-content-desktop-center, justify-content-laptop-end и т.д.:

HTML

<div class="container">
  <div class="example row justify-content-laptop-center justify-content-laptop-md-end justify-content-tablet-landscape-between justify-content-phone-landscape-around">
    <div class="example__col col-2">1</div>
    <div class="example__col col-2">2</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();
    @include justify-content(center, laptop);
    @include justify-content(flex-end, laptop-md);
    @include justify-content(space-between, tablet-landscape);
    @include justify-content(space-around, phone-landscape);

    &__col {
      @include col(2);
    }
  }
}

Вертикальное выравнивание колонок в строке при различной ширине вьюпорта: align-items-desktop-start, align-items-desktop-center, align-items-laptop-end, align-items-tablet-landscape-stretch, align-items-phone-baseline и т.д.:

HTML

<div class="container">
  <div class="example row align-items-start align-items-laptop-center align-items-laptop-md-end align-items-tablet-landscape-stretch align-items-phone-landscape-baseline">
    <div class="example__col col">1</div>
    <div class="example__col col">2</div>
    <div class="example__col col">3</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();
    @include align-items(flex-start);
    @include align-items(center, laptop);
    @include align-items(flex-end, laptop-md);
    @include align-items(stretch, tablet-landscape);
    @include align-items(baseline, phone-landscape);

    &__col {
      @include col();
    }
  }
}

Вертикальное выравнивание отдельно взятой колонки в строке при различной ширине вьюпорта: align-self-desktop-start, align-self-desktop-center, align-self-laptop-end, align-self-tablet-landscape-stretch, align-self-phone-baseline и т.д.:

HTML

<div class="container">
  <div class="example row align-items-start">
    <div class="example__col col align-self-laptop-center align-self-laptop-md-end align-self-tablet-landscape-stretch align-self-phone-landscape-baseline">1</div>
    <div class="example__col col">2</div>
    <div class="example__col col">3</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();
    @include align-items(flex-start);

    &__col {
      @include col();

      &:first-child {
        @include align-self(center, laptop);
        @include align-self(end, laptop-md);
        @include align-self(stretch, tablet-landscape);
        @include align-self(baseline, phone-landscape);
      }
    }
  }
}

Направление расположения колонок в строке при различной ширине вьюпорта: direction-desktop-column, direction-desktop-row-reverse, direction-laptop-column, direction-laptop-row-reverse и т.д.:

HTML

<div class="container">
  <div class="example row align-items-start align-items-laptop-md-stretch direction-laptop-row-reverse direction-laptop-md-column direction-tablet-landscape-column-reverse">
    <div class="example__col col">1</div>
    <div class="example__col col">2</div>
    <div class="example__col col">3</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();
    @include align-items(flex-start);
    @include align-items(stretch, laptop-md);
    @include direction(row-reverse, laptop);
    @include direction(column, laptop-md);
    @include direction(column-reverse, tablet-landscape);

    &__col {
      @include col();

      &:first-child {
        @include align-self(center, laptop);
        @include align-self(end, laptop-md);
        @include align-self(stretch, tablet-landscape);
        @include align-self(baseline, phone-landscape);
      }
    }
  }
}

Смещение колонок в строке при различной ширине вьюпорта: offset-desktop-right-2, offset-laptop-left-4, offset-tablet-landscape-left-9, offset-phone-left-11 и т.д.:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col-2 offset-laptop-right-2 offset-laptop-md-right-4 offset-tablet-landscape-right-6 offset-phone-landscape-right-auto">1</div>
  </div>

  <div class="example row">
    <div class="example__col col-2 offset-laptop-md-right-auto">2</div>
  </div>

  <div class="example row">
    <div class="example__col col-2 offset-right-auto offset-desktop-left-auto">3</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {

      .example__col {
        @include offset(right, 2, laptop);
        @include offset(right, 4, laptop-md);
        @include offset(right, 6, tablet-landscape);
        @include offset(right, auto, phone-landscape);
      }
    }

    &:nth-child(2) {

      .example__col {
        @include offset(right, auto, laptop-md);
      }
    }

    &:nth-child(3) {

      .example__col {
        @include offset(right, auto);
        @include offset(left, auto, desktop);
      }
    }

    &__col {
      @include col(2);
    }
  }
}

Изменение порядка колонок в строке: order-desktop-1, order-laptop-3, order-laptop-md-5, order-phone-first, order-phone-sm-last и т.д.:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col order-laptop-2">1</div>
    <div class="example__col col order-laptop-1">2</div>
    <div class="example__col col order-laptop-4">3</div>
    <div class="example__col col order-laptop-3">4</div>
  </div>

  <div class="example row">
    <div class="example__col col order-laptop-last">1</div>
    <div class="example__col col">2</div>
    <div class="example__col col">3</div>
    <div class="example__col col order-laptop-first">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {

      .example__col:first-child {
        @include order(2, laptop);
      }

      .example__col:nth-child(2) {
        @include order(1, laptop);
      }

      .example__col:nth-child(3) {
        @include order(4, laptop);
      }

      .example__col:last-child {
        @include order(3, laptop);
      }
    }

    &:last-child {

      .example__col:first-child {
        @include order(last, laptop);
      }

      .example__col:last-child {
        @include order(first, laptop);
      }
    }

    &__col {
      @include col();
    }
  }
}

Скрытие и отображение элементов сетки при различной ширине вьюпорта: hide-desktop, hide-laptop, hide-tablet-landscape, hide-phone-sm, show-desktop, show-laptop, show-tablet-landscape и т.д.:

HTML

<div class="container">
  <div class="example row">
    <div class="example__col col hide-laptop">1</div>
    <div class="example__col col">2</div>
  </div>

  <div class="example row">
    <div class="example__col col">3</div>
    <div class="example__col col hide show-laptop">4</div>
  </div>
</div>

Sass ( Scss syntax )

.container {
  @include container();

  .example {
    @include row();

    &:first-child {

      .example__col:first-child {
        @include hide(laptop);
      }
    }

    &:last-child {

      .example__col:last-child {
        @include show(laptop);
      }
    }

    &__col {
      @include col();
    }
  }
}

Также, как и другие переменные по умолчанию, вы можете переопределить значение переменной $grid-breakpoints, задав для контрольных точек более традиционные названия и размеры вьюпорта:
Sass ( Scss syntax )
```
$grid-breakpoints: (
  lg: 1280px,
  md: 960px,
  sm: 768px,
  xs: 480px
);
```

Это сгенерирует классы вида col-lg-12, col-md-4, justify-content-sm-center, offset-xs-2, order-lg-9, direction-sm-column, hide-sm, show-xs и т.д.

Части

Директория partials содержит список частей библиотеки, отвечающих за генерацию категорий классов и медиазапросов. С целью уменьшения сформированного css-файла библиотеки вы можете переопределить список, оставив лишь те элементы, названия которых соответствуют тем частям библиотеки, классы которых вы будете использовать. Ниже ещё будет сказано, какие части за что отвечают. Либо же, если вместо расстановки классов на элементах в разметке для построения сетки вы предпочитаете использовать Sass и предопределенные миксины, вы можете присвоить переменной partials значение false ( не null ) или любое другое "не null" значение.

Sass ( Scss syntax )

$partials: false;

Это предотвратит генерацию большого количества готовых классов, что позволит значительно уменьшить размер конечного css-файла библиотеки.

Выравнивание

Файл grid/partials/alignment.scss содержит код, генерирующий классы, отвечающие за выравнивание колонок внутри строки.

Направление расположения колонок в строке

Файл grid/partials/direction.scss содержит код, генерирующий классы, отвечающие за направление главной оси, вдоль которой выстраиваются столбцы внутри строки.

Упорядочивание колонок

Файл grid/partials/ordering.scss содержит код, генерирующий классы, отвечающие за порядок расположения колонок внутри строки.

Смещение колонок

Файл grid/partials/offset.scss содержит код, генерирующий классы, отвечающие за смещение колонок внутри строки.

Скрытие элементов

Файл grid/partials/hide.scss содержит код, генерирующий классы, отвечающие за скрытие элементов.

Отображение элементов

Файл grid/partials/visible.scss содержит код, генерирующий классы, отвечающие за отображение элементов.

Обнуление внешних отступов у элементов строк и колонок

Файл grid/partials/gutters.scss содержит код, генерирующий классы, отвечающие за обнуление внешних отступов у элементов строк и колонок.

Базовая инициализация сетки

Файл grid/base.scss содержит код, генерирующий базовые классы сетки.

Компиляция исходных sass-файлов

При использовании библиотеки flexbox-grid-pro в виде sass-файлов, настоятельно рекомендуется использовать минификаторы group-css-media-queries и csso. Это значительно сократит объём собранного css-файла библиотеки.

Справочная таблица по классам и миксинам

Выравнивание

Классы

Соответствующий миксин

Описание

justify-content-start,

justify-content-center,

justify-content-end,

justify-content-space-between,

justify-content-space-around

justify-content( $align, $breakpoint )

Выравнивает столбцы в строке согласно параметру $align, который должен принимать одно из следующих значений: flex-start, flex-end, center, space-between, space-around. Применяется к элементам строки ( row ) сетки. Если передан аргумент $breakpoint, выравнивание сработает в медиазапросе согласно значению этого аргумента. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
align	String	flex-start, center, flex-end, space-between, space-around,	flex-start	Задаёт способ выравнивания столбцов
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, выравнивание сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Выравнивают столбцы в строке в соответствии со свойствами flex-контейнера: flex-start, center, flex-end, space-between, space-around. Применяются к элементу строки.

align-items-start,

align-items-center,

align-items-end,

align-items-stretch,

align-items-baseline

align-items( $align, $breakpoint )

Выравнивает столбцы в строке согласно параметру $align, который должен принимать одно из следующих значений: flex-start, flex-end, center, stretch, baseline. Применяется к элементам строки ( row ) сетки. Если передан аргумент $breakpoint, выравнивание сработает в медиазапросе согласно значению этого аргумента. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
align	String	flex-start, center, flex-end, stretch, baseline	flex-start	Задаёт способ выравнивания столбцов
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, выравнивание сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Выравнивают столбцы в строке в соответствии со свойствами flex-контейнера: flex-start, center, flex-end, stretch, baseline. Применяются к элементу строки.

align-self-start,

align-self-center,

align-self-end,

align-self-stretch,

align-self-baseline

align-self( $align, $breakpoint )

Выравнивает отдельно взятый столбец в строке согласно параметру $align, который должен принимать одно из следующих значений: flex-start, flex-end, center, stretch, baseline. Применяется к элементам столбца ( col ) сетки. Если передан аргумент $breakpoint, выравнивание сработает в медиазапросе согласно значению этого аргумента. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
align	String	flex-start, center, flex-end, stretch, baseline,	flex-start	Задаёт способ выравнивания отдельно взятого столбца в строке.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, выравнивание сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Выравнивают отдельно взятый столбец в строке в соответствии со свойствами flex-контейнера: flex-start, center, flex-end, stretch, baseline. Применяются к элементу столбца.

Направление расположения главной оси

Классы

Соответствующий миксин

Описание

direction-row,

direction-row-reverse,

direction-column,

direction-column-reverse

direction( $direction, $breakpoint )

Задает направление главной оси, вдоль которой выстраиваются колонки в строке. В качестве аргумента для первого параметра $direction должно быть передано одно из следующиех значений: row, row-reverse, column, column-reverse. Если вторым аргументом передано значение, соответствующее одному из имен ключей глобального объекта $grid-breakpoints, правило будет применено в медиазапросе.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
direction	String	row, row-reverse, column, column-reverse	row	Задаёт направление главной оси, вдоль которой выстраиваются колонки в строке.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, установка направления главной оси сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Задают направление главной оси, вдоль которой выстраиваются колонки в стрке, в соответствии со свойствами flex-контейнера: row, row-reverse, column, column-reverse. Применяются к элементу строки row.

Смещение колонок

Классы

Соответствующий миксин

Описание

offset-left-1 - offset-left-12,

offset-right-1 - offset-right-12,

offset-left-auto,

offset-right-auto

offset( $direction, $offset, $breakpoint )

Смещает колонку в строке на $offset - целое число колонок, вправо - $direction: right или влево - $direction: left. Если в качестве второго аргумента передано значение auto, колонка смещается на свободное пространство в ту или иную сторону. Если значение аргумента $breakpoint соответствует одному из имен ключей глобального объекта $grid-breakpoints, правила применяются в соответствующем медиазапросе.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
direction	String	left, right	right	От этого параметра зависит, в какую сторону будет происходить смещение колонок - вправо или влево.
offset	Number\|String	целое число колонок, auto	auto	Число колонок, на которое будет смещена колонка. Если передано значение auto, колонка сместится вправо/влево ( зависит от второго параметра direction ) на всё доступное свободное пространство.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, смещение для колонки сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Смещают колонки в строке на определённое число колонок вправо или влево.

Порядок расположения колонок

Классы

Соответствующий миксин

Описание

order-0 - order-12,

order-first,

order-last,

order( $order, $breakpoint )

Упорядочивает колонки в строке согласно параметру $order - целому числу, определяющему порядок следования колонок - чем меньше число, тем ближе к началу строки будет расположена колонка. Если при вызове миксина ему будет передан второй аргумент $breakpoint, и при этом его значение будет соответствовать одному из имён ключей глобального объекта $grid-breakpoints, то правило упорядочивания будет срабатывать лишь в соответствующем медиазапросе. Применяется к элементу строки row

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
order	Number\|String	0 - общее число колонок, first, last	0	Целое число или строка, определяющие визуальное положение колонки в строке сетки. Чем меньше число, тем ближе к началу строки будет расположена колонка.
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, сещение для колонки сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Задают порядок визуального расположения колонок в строке. Применяются к элементу строки row.

Сброс внешних отступов ( margins )

Классы

Соответствующий миксин

Описание

no-gutters

no-gutters( $breakpoint )

Обнуляет внешние отступы элемента. Применяется к любому элементу сетки.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
$breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, сброс отступов для элемента сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Обнуляют все внешние отступы у элемента. Применяются как к элементу строки, так и к элементу сетки.

no-h-gutters

no-h-gutters( $breakpoint )

Обнуляет внешние горизонтальные отступы элемента. Применяется как к элементу строки, так и к элементу колонки.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, сброс отступов для элемента сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Обнуляют внешние горизонтальные отступы элемента. Применяются как к элементу строки, так и к элементу колонки.

no-v-gutters

no-v-gutters( $breakpoint )

Обнуляет внешние вертикальные отступы элемента. Применяется как к элементу строки, так и к элементу колонки.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, сброс отступов для элемента сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Обнуляют внешние вертикальные отступы элемента. Применяются как к элементу строки, так и к элементу колонки.

no-children-gutters

no-children-gutters( $breakpoint )

Обнуляет внешние отступы элементов колонок в строке. Применяется к элементу строки.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, сброс отступов для элемента сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Обнуляют внешние отступы элементов колонок в строке. Применяются к элементу строки.

no-children-h-gutters

no-children-h-gutters( $breakpoint )

Обнуляет внешние горизонтальные отступы элементов колонок в строке. Применяется к элементу строки.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, сброс отступов для элемента сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Обнуляют внешние горизонтальные отступы элементов колонок в строке. Применяется к элементу строки.

no-children-v-gutters

no-children-v-gutters( $breakpoint )

Обнуляет внешние вертикальные отступы элементов колонок в строке. Применяется к элементу строки.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, сброс отступов для элемента сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Обнуляют внешние горизонтальные отступы элементов колонок в строке. Применяются к элементу строки.

Скрытие элементов

Классы

Соответствующий миксин

Описание

hide

hide( $breakpoint )

Скрывает элемент, устанавливая его свойство display в none. Если значение аргумента $breakpoint соответствует одному из имен ключей глобального объекта $grid-breakpoints, правило будет применено в соответствующем медиазапросе. Применяется к любому элементу сетки.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
breakpoint	String	desktop, laptop, laptop-md, tablet-landscape, phone-landscape, phone, phone-md, phone-sm	null	Необязательный параметр. Если для него передано значение, скрытие для элемента сработает в медиазапросе согласно этому значению. Значением аргумента должно быть одно из имен ключей глобального объекта $grid-breakpoints.

Скрывает элемент, устанавливая его свойство display в none. Применяется к любому элементу сетки.

Отображение скрытых элементов

Классы

Соответствующий миксин

Описание

show

show( $display, $breakpoint )

Отображает скрытые элементы, устанавливая его свойство display в любое доступное для этого свойства значение, отличное от none. Применяется к любому элементу сетки.

Параметр	Тип	Доступные значения	Значение по умолчанию	Описание
display	String	Любое доступное для css-свойства display значение, кроме none.	initial	Устанавливает свойство display элемента в указанное значение.