Layout-related code, including conversion, spacing, and breakpoints, have been
moved over into their own package: @carbon/layout. This package is also
included by default in @carbon/elements.
They are also integrated into carbon-components directly so there is no need
to install additional packages if you are using carbon-components already.
| v9 | v10 |
|---|---|
$base-font-size |
$carbon--base-font-size |
rem, em helpers |
carbon--rem,carbon--em |
$grid-breakpoints |
|
carbon--breakpoint-next |
|
carbon--breakpoint-prev |
|
carbon--breakpoint-is-smallest-breakpoint |
|
carbon--largest-breakpoint-name |
|
carbon--breakpoint-up |
|
carbon--breakpoint-down |
|
carbon--breakpoint-between |
|
Mixin carbon--breakpoint |
|
carbon--largest-breakpoint |
|
$carbon--grid-gutter |
|
$carbon--grid-gutter--condensed |
|
carbon--key-height |
|
Mixin carbon--key-height |
|
$carbon--mini-unit-size |
|
function carbon--mini-units |
|
$spacing-3xs |
$carbon--spacing-01, $spacing-01 |
$spacing-2xs |
$carbon--spacing-02, $spacing-02 |
$spacing-xs |
$carbon--spacing-03, $spacing-03 |
$spacing-sm |
$carbon--spacing-04, $spacing-04 |
$spacing-md |
$carbon--spacing-05, $spacing-05 |
$spacing-lg |
$carbon--spacing-06, $spacing-06 |
$spacing-xl |
$carbon--spacing-07, $spacing-07 |
$spacing-2xl |
$carbon--spacing-08, $spacing-08 |
$spacing-3xl |
$carbon--spacing-09, $spacing-09 |
$layout-2xs |
$carbon--layout-01, $layout-01 |
$layout-xs |
$carbon--layout-02, $layout-02 |
$layout-sm |
$carbon--layout-03, $layout-03 |
$layout-md |
$carbon--layout-04, $layout-04 |
$layout-lg |
$carbon--layout-05, $layout-05 |
$layout-xl |
$carbon--layout-06, $layout-06 |
$layout-2xl |
$carbon--layout-07, $layout-07 |