🚀 Astro — Breakpoints handlers with (S)CSS / DOM / JS
Provides cross languages breakpoints handlers for your app.
SCSS mixin, JS hook and a DOM data attribute, all share the same responsive scale you choose to feed in.
📦 Installation
pnpm i astro-breakpoints🛠 Usage
With JavaScript
Warning
🚧 Documentation work is in progress
With SCSS
SCSS mixins registration in astro.config.mjs:
// You can redefine breakpoints options.
// Also, putting in an external file,
// so you can share it with your JS environments.
const breakpoints = {
// These are default values
xs: '320px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1840px',
};
export default defineConfig({
// ...
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "astro-breakpoints/use-breakpoints.scss" as * with (
$breakpoints: (
"xs": ${breakpoints.xs},
"sm": ${breakpoints.sm},
"md": ${breakpoints.md},
"lg": ${breakpoints.lg},
"xl": ${breakpoints.xl},
"xxl": ${breakpoints.xxl},
)
);
`,
},
},
},
},
});Then, use it like this in your stylesheets:
.hippopotame {
padding: 2vw;
@include breakpoint(md) {
padding: 10vw;
}
@include breakpoint(xxl) {
padding: calc(10vw + 3rem);
}
}To do
- Full documentation, for JS hook in particular
- Live demo
