Как использовать точки останова в Zurb Foundation 4?

В Zurb Foundation 4 я добавил среду к своим столбцам сетки следующим образом. Просто добавьте это после @import ваших базовых глобальных переменных и сетки.

@if $include-html-grid-classes != false {

  /* Styles for screens that are atleast 768px and max width 1024px */
  @media #{$small} and (max-width: 1024px) {

    @for $i from 1 through $total-columns {
      .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .row .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.medium-centered,
    .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.medium-uncentered,
    .columns.medium-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

    .column.medium-uncentered.opposite,
    .columns.medium-uncentered.opposite {
      float: $opposite-direction !important;
    }

  }

}

Теперь вы можете использовать среднюю сетку так же, как малую и большую.

https://gist.github.com/poeticninja/5985220

Новая экспериментальная функция для средней сетки. а это CSS-файл

Может быть, я опаздываю на вечеринку, но я не согласен с общим аргументом Лолмауса против Фонда (если только вам действительно не нужна супер-пупер грануляция сетки).

Для человека, который годами использовал свою собственную, доморощенную систему сетки CSS, я обнаружил, что Foundation 3 (первая версия, которую я попробовал) очень хорошо позволяет мне структурировать сайт для рабочего стола -> планшета -> телефона. предоставляя мне контроль над графически насыщенным дизайном и макетом. (И кажется, я только что прочитал, что F4 внедрила системы с малой и большой сеткой для разных форматов.)

Я не могу говорить ни с какой другой системой, потому что я их не пробовал (кроме Bootstrap, который был более всеобъемлющим, чем мне нужно), но если вы практический дизайнер и неплохо разбираетесь в HTML5/CSS3, вы Я прекрасно справлюсь с Фондом.

Если это поможет, мои настройки точки останова в F3 были 1200 или более, 1199-768 и 767 или меньше (просмотр сайта на телефоне только по горизонтали).

Можете ли вы установить средние столбцы в Zurb Foundation 4? http://adioso.com/blog/

Плавная сетка Foundation построена вокруг одной контрольной точки на 768 пикселей, поэтому в основном мобильные устройства и настольные компьютеры/планшеты. Все вращается вокруг этой концепции, поэтому у вас есть такие классы, как hide-for-small и show-for-small.

Любые дополнительные точки останова должны быть сделаны на заказ с использованием медиа-запросов, однако, поскольку Foundation представляет собой изменчивую сетку, это не так раздражает, как вы думаете. Идея состоит в том, что «большая» (например, настольная) версия вашего сайта должна разумно масштабироваться до «среднего» (планшета) окна просмотра, не требуя слишком обширного рефакторинга CSS.

Большинство сайтов, которые я создаю в F3, значительно трансформируются в точке останова 768 пикселей, а затем я пишу несколько других медиа-запросов, чтобы настроить все, что нужно выше этой точки останова (поэтому обычно у меня есть несколько настроек CSS для еще нескольких произвольных точек останова, которые зависят на дизайне, но, например, может быть 900 пикселей и 1050 пикселей на сайте с шириной строки 1150 пикселей). Планшеты в наши дни имеют довольно высокое разрешение и, как правило, в большинстве случаев отлично отображают макеты в стиле рабочего стола.

У lolmaus есть смысл в том, что Foundation — это не просто инструмент с адаптивной сеткой. Существуют и другие более легкие фреймворки, которые предоставляют гораздо более детализированные и удобные способы настройки размеров и поведения сетки, в то время как Foundation — это целая интерфейсная инфраструктура, предназначенная для быстрого прототипирования, основанная на концепции единой точки останова.

Вы также можете добавить дополнительную точку останова (например, планшет/рабочий стол) без СЛИШКОМ больших проблем, но это потребует некоторой работы. Тем не менее, я бы посоветовал вам попробовать Foundation и спросить себя, действительно ли вам нужны 3 разных набора стилей, а не 2. Раньше я создавал адаптивные сайты, ориентированные на триаду настольных компьютеров, планшетов и мобильных устройств, и, честно говоря, после этого я ни на секунду не оглядывался назад. Я начал пользоваться Foundation около полугода назад.

Тональный крем представлен в двух вариантах.

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

Другой вариант — семантическая версия SASS. Он не использует предварительно созданный файл CSS. С версией SASS вы создаете только те стили, которые вам нужны, и семантически применяете их к элементам вашего сайта.

В нижней части этой страницы описано, как создать сетку с помощью SASS.

С SASS-версией Foundation у вас нет предустановленных медиа-запросов, и вы можете задать свои собственные — столько, сколько вам нужно.

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

Вероятно, Foundation просто не лучший инструмент для создания адаптивных сеток. Вместо этого попробуйте Singularity с Breakpoint Slicer — они созданы именно для этой цели, имеют обширную документацию и достойную поддержку разработчиков прямо здесь, на StackOverflow.