Foundation 5 больше не использует xlarge и xxlarge размеры сетки - программирование
Подтвердить что ты не робот

Foundation 5 больше не использует xlarge и xxlarge размеры сетки

Проблема

В Foundation 5.0.2 и выше он не использует размеры сетки xlarge и xxlarge. Они работали в предыдущих версиях 5.0.0 и 5.0.1.

Поэтому, когда вы входите в css файл из фонда, он будет показывать только малые, средние и большие размеры сетки.

По-видимому, ни одна версия Foundation 5 не имеет xlarge и xxlarge блочных сеток.

Вопрос

Есть ли способ заставить их работать снова?

Испытания

Я пошел на их сайт и загрузил последнюю версию 5.1.1, и у нее была такая же проблема в файле foundation.css.

Я создаю его сам с Sass, а также попытался добавить в него переопределенные переменные вручную:

// Here we define the lower and upper bounds for each media size
$small-range: 0em, 40em // 0, 640px
$medium-range: 40.063em, 64em // 641px, 1024px
$large-range: 64.063em, 90em // 1025px, 1440px
$xlarge-range: 90.063em, 120em // 1441px, 1920px
$xxlarge-range: 120.063em // 1921px

$screen: "only screen"

$landscape: "#{$screen} and (orientation: landscape)"
$portrait: "#{$screen} and (orientation: portrait)"

$small-up: $screen
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"
4b9b3361

Ответ 1

В вашем файле settings раскомментируйте и установите для него значение true (строка для меня 32):

$include-xl-html-grid-classes: true;

Затем перекомпилируйте и должны присутствовать классы xlarge и xxlarge. (Убедитесь, что вы избавились от своих переопределений, на случай конфликта)

Ответ 2

Это было изменено в Foundation 6. В _settings.scss теперь вы найдете список $breakpoint-classes и добавьте дополнительные классы, которые вы хотите. например.

$breakpoint-classes: (small medium large xlarge);