Singularitygs: мобильная сетка, сохраняющая все размеры экрана

Question

По какой-то причине моя сетка показывает только мобильную (3 колонки) сетку на всех размерах экрана. Я использую значения ниже и не понимаю, что я делаю неправильно. Любые предложения будут приветствоваться

@include add-grid(3);
@include add-grid(6 at 320px);
@include add-grid(12 at 740px);
@include add-gutter(1/3);

Я использую драгоценные камни ниже

Using sass 3.3.14
Using breakpoint 2.5.0
Using singularitygs 1.2.1

Answer 1

Недостаточно определить контекст сетки.

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

@import "breakpoint";
@import "singularitygs";

@include add-grid(3);
@include add-grid(6 at 320px);
@include add-grid(12 at 740px);
@include add-gutter(1/3);

@include add-gutter(0.25);

.foo {

  background-color: deeppink;
  min-height: 10em;

  // Mobile grid
  @include float-span(1);

  // Medium grid
  @include breakpoint(320px) {
    @include float-span(1);
  }

  // Large grid
  @include breakpoint(740px) {
    @include float-span(1);
  }
}

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