Представляем sGrid: систему Flexbox Grid на основе стилуса

Отзывчивые особенности sGrid

Когда вы просматриваете скомпилированный CSS-код в демоверсии CodePen, вы заметите использование медиа-запросов. Это мобильный первый подход. Когда область просмотра больше, чем переменная breakpoints[md] В противном случае это два ряда, один за другим.

Так что же такое breakpoints[md] Это глобальная переменная из файла s-grid-settings , внутри которой определены точки останова по умолчанию и которую вы можете перезаписать.

Использование вспомогательных классов sGrid

Давайте посмотрим, как мы можем построить тот же пример, используя вспомогательные классы sGrid. Если нам нужно использовать вспомогательные классы, мы можем заменить код тела в файле index.html чем-то вроде следующего:

 <div class="my-grid s-grid-top">
  <div class="my-cell s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6">
    First cell
  </div>
  <div class="my-cell s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6">
    Second cell
  </div>
</div>

А в файле main.styl мы можем использовать только функцию center() Все остальные вещи, которые мы добавили, могут быть удалены. Итоговый код будет таким:

 .my-grid
  background-color #E9E9EA
  margin-top rem-calc(100)
  center(500)
  .my-cell
    padding rem-calc(10)
    background-color #D5D5D7

Как вы можете видеть с этим подходом, у нас есть намного более сложная структура HTML, но нам не нужно использовать функции в файле Stylus. Эффект одинаков в обоих случаях, что можно подтвердить, открыв файл index.html в браузере.

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

 <div class="my-grid s-grid-top s-grid-sm-12 s-grid-md-6">
  <div class="s-grid-cell my-cell">First cell</div>
  <div class="s-grid-cell my-cell">Second cell</div>
</div>

Эффект здесь тот же. Проверьте документы для получения дополнительной информации о вспомогательных классах.

Изменение вертикального выравнивания ячеек

Следующий пример покажет, как легко мы можем изменить вертикальное выравнивание ячеек. Давайте подготовим наш файл index.html и main.styl. body

 <div class="my-grid">
  <div class="label">
    <strong>Vertical Top</strong>
  </div>
  <div class="my-cell-1">
    First cell
  </div>
  <div class="my-cell-2 top">
    Second cell
  </div>
</div>
<div class="my-grid">
  <div class="label">
    <strong>Vertical Center</strong>
  </div>
  <div class="my-cell-1">
    First cell
  </div>
  <div class="my-cell-2 middle">
    Second cell
  </div>
</div>
<div class="my-grid">
  <div class="label">
    <strong>Vertical Bottom</strong>
  </div>
  <div class="my-cell-1">
    First cell
  </div>
  <div class="my-cell-2 bottom">
    Second cell
  </div>
</div>

И наш файл main.styl будет иметь следующий код:

 @import 's-grid-settings'
@import 's-grid-functions'
@import 's-grid-classes'

.my-grid
  background-color #E9E9EA
  margin-top rem-calc(100)
  center(500)
  grid()
  .label
    stack()
    text-align center
  .my-cell-1, .my-cell-2
    stack()
    padding rem-calc(10)
    background-color #D5D5D7
  @media screen and (min-width: rem-calc(breakpoints[md]))
    .my-cell-1
      height rem-calc(300)
      cell(2, 3)
    .my-cell-2
      &.top
        cell(1, 3, align: 'top')
      &.middle
        cell(1, 3, align: 'center')
      &.bottom
        cell(1, 3, align: 'bottom')

Теперь, когда мы перекомпилируем наш файл main.css и запустим index.html в браузере, мы увидим, как выравнивается вторая ячейка во всех трех случаях. В основном вы используете атрибут align Вы заметите, что первая ячейка также шире. Это потому, что мы установили его на 2/3, а второй на 1/3. Первый имеет статическую высоту, объявленную только для демонстрационных целей.

Вы можете поиграть с этим примером на CodePen в демоверсии ниже: