Что нового в Foundation 6?

В Foundation 5 Orbit Slider был сложным компонентом, который позволял пользователям создавать полностью адаптивные, интерактивные слайдеры изображений, видео и контента. Orbit находилась в Foundation в течение долгого времени и на протяжении многих лет раздувалась с десятками вариантов конфигурации , что привело к большой работе по ее обслуживанию.

Zurb объявил, что для Foundation 6 они прекращают работу с Orbit , что, как вы можете себе представить, расстроило многих людей, которым понравилась гибкость, которую он обеспечил.

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

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

В Foundation 5 определены различные точки останова для адаптивного дизайна, в том числе small, medium, large, xlarge и xxlarge. В целом, при использовании своего варианта Sass, он работал, определяя профиль устройства, на который вы хотите настроить таргетинг, а затем добавляя свой стиль внутри следующим образом:

 // target small profiles
@media #{$small-only} {
  .primary{
    border: solid 1px red;
  }
}
// target medium profiles
@media {$medium-only} {
  .primary{
    padding: 25px;
  }
}
// standard styles 
.primary {
  position: relative;
  margin-bottom: 15px;
  padding: 15px;
}

В Foundation 6 миксин был обновлен, чтобы сделать его намного проще и интуитивно понятнее. Вместо того, чтобы вызывать эти профили устройств и добавлять свой стиль для каждого элемента, теперь вы включаете миксин непосредственно в свой элемент, например так:

 .primary {
  // small profiles
  @include breakpoint(small only) {
    border: solid 1px red;
  }
  // medium profiles
  @include breakpoint(medium only) {
    padding: 25px;
  }
  // standard styles
  position: relative;
  margin-bottom: 15px;
  padding: 15px;
}

Преимущество этого состоит в том, что вы сохраняете все свои стили вместе , вместо того, чтобы искать файлы, какие стили относятся к каждому профилю. Это все для тебя.

Миксин Breakpoint позволяет вам передавать широкий диапазон различных значений, которые будут влиять на стиль.

требуемые размеры профиля устройства, такие как smallmediumlargedownuponly Если вы особенно суетитесь из-за своего дизайна, вы можете даже предоставить landscapeportraitretina

Ваши собственные нестандартные размеры

Поскольку речь идет о точках останова, с помощью Foundation 6 вы можете указать, какие профили размера будут использоваться для вашего сайта , настроив переменную $breakpoints_settings.scss

Этот файл по сути является точкой конфигурации для Sass-версии Foundation (он использует эти настройки для создания сгенерированного CSS). Здесь вы можете переопределить значения точек останова или даже включить новые.

 // the default Foundation 6 breakpoint ranges
$breakpoints: (
  small: 0,
  smedium: 420px, // my custom size
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

Как видите, новый размер легко добавить (в данном случае я добавил smedium420px Даже если вы определили здесь свои размеры, они не будут выводить CSS, пока вы не добавите их в переменную $breakpoint-classes()

По умолчанию используются только smallmediumlarge

 // including a new size (smedium)
$breakpoint-classes: (small smedium medium large);

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

Уникальный дизайн с меньшим количеством стилей

Распространенная жалоба на веб-сайты, созданные с использованием популярных фреймворков, заключается в том, что «все они выглядят одинаково».

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

Это хорошая новость для всех, поскольку это означает, что у вас будет поддержка базовой структуры и макета фреймворка, но при этом вы сможете легко настроить свой сайт. В результате этих изменений была уменьшена специфичность стилей (из-за нескольких изменений в миксинах и переменных Sass), что еще больше упростило настройку внешнего вида вашего сайта.

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

А как насчет базовых сеток и меню?

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

Так что следите за обновлениями!

Последние мысли

Несмотря на то, что в фреймворке по-прежнему есть небольшие ошибки и причуды (которые быстро решаются командой Zurb), в целом этот релиз — сильный шаг в правильном направлении. Zurb отказались от предложения десятков опций для каждого компонента и вместо этого решили предоставить необходимый минимум для вашей структуры.

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

Короче говоря, Foundation 6 потрясающий, и вы должны попробовать!