Breakpoints

Use responsive objects with keys xs, sm, md, lg, xl, xxl to express styles across breakpoints.

<div [sj]="{ padding: { xs: 1, md: 2 } }">Padding changes at md</div>
<sj-flex [sj]="sj.gridTemplateColumns({ xs: '1fr', md: '1fr 1fr' })"></sj-flex>

Default breakpoints can be customized in your theme.

Live Example

If the embed doesn’t load, open it directly: Open on StackBlitz.