Skip to main content

Upgrade to 2.0.0

Removed SASS breakpoints helper

Usage of breakpoints helper for layouts

Remove the current @use from your SASS:


_10
@use '@kickstartds/core/source/core/breakpoint';
_10
_10
.content {
_10
@include breakpoint.media('>xl') {
_10
--ks-spacing-xl: 8em;
_10
}
_10
}

Replace it with a standard media query for this: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Like this:


_10
@media (min-width: 75em) {
_10
.content {
_10
--ks-spacing-xl: 8em;
_10
}
_10
}

Where xl in our case equates to 75em. You can use the CSS Properties generated for you, to help still writing maintainable media queries. For example:


_10
--ks-breakpoints: '{"phone":"36em","tablet":"48em","laptop":"62em","desktop":"75em"}';

Usage of breakpoints helper for components

Remove the current @use from your SASS:


_24
@use '@kickstartds/core/source/core/breakpoint';
_24
_24
.l-section {
_24
--section-dark--headline-color: var(--color-white);
_24
--section-dark--text-color: var(--color-grey-1);
_24
_24
--section--background-light: var(--color-grey);
_24
_24
&__container {
_24
--l-section_col--min-width: 16rem;
_24
_24
.content & {
_24
--l-section_col--min-width: 10rem;
_24
_24
@include breakpoint.media('>s') {
_24
--l-section_col--min-width: 9rem;
_24
}
_24
_24
@include breakpoint.media('>l') {
_24
--l-section_col--min-width: 12rem;
_24
}
_24
}
_24
}
_24
}

Replace it with:


_26
@use '@kickstartds/core/source/core/container' with (
_26
$name: 'section-content'
_26
);
_26
_26
.l-section {
_26
--section-dark--headline-color: var(--color-white);
_26
--section-dark--text-color: var(--color-grey-1);
_26
_26
--section--background-light: var(--color-grey);
_26
_26
&__container {
_26
--l-section_col--min-width: 16rem;
_26
_26
.content & {
_26
--l-section_col--min-width: 10rem;
_26
_26
@include container.size('≥', 640px) {
_26
--l-section_col--min-width: 9rem;
_26
}
_26
_26
@include container.size('≥', 1024px) {
_26
--l-section_col--min-width: 12rem;
_26
}
_26
}
_26
}
_26
}

Or:

Search:


_10
import { createContext, useContext } from 'react';
_10
/* ... */
_10
export const Consumption = (props) => {
_10
const Component = useContext(ConsumptionContext);
_10
return <Component {...props} />;
_10
};

and:


_10
@use '@kickstartds/core/source/core/breakpoint';

Replace:


_10
import { createContext } from 'react';
_10
import { withContainer } from '@kickstartds/core/lib/container';
_10
/* ... */
_10
export const Consumption = withContainer('consumption', ConsumptionContext);

and:


_10
@use '@kickstartds/core/source/core/container' with (
_10
$name: 'consumption'
_10
);