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:


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

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:


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

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:


_1
--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:


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

and:


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

Replace:


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

and:


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