breakPoints

Object - точки перестроения адаптивной вёрстки

Настройки точек, на которых запланированы частые изменения размеров элементов сетки.

// defaults
{
   lg: {
      width: "1200px"
   },
   md: {
      width: "992px",
      fields: "15px"
   },
   sm: {
      width: "720px"
   },
   xs: {
      width: "576px"
   }
}

Ключи объекта breakPoints используются при генерации имён примесей.

Значения каждого объекта:

• width - используется для media-запросов в условиях max-width или min-width в зависимости от опции mobileFirst
• fields - используется для изменения container.fields на текущем размере экрана
• offset - используется для изменения опции offset на текущем размере экрана. Использовать не рекомендуется, так как это влечёт за собой определённый набор правил и ограничений.

Важной особенностью smart-grid является то, что добавление большого количества breakPoints напрямую не увеличивает размер итогового CSS-кода!