🚀 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(source, filePath) {
// Exclude file, prevents module loop
if (filePath.includes('use-')) return source;
// if (filePath.includes('my-vars.scss')) return source;
return `
@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},
)
);
${source}
`;
},
},
},
},
},
});You can also use the bare helper with the default implicit breakpoints settings,
inside additionalData:
`@use "astro-breakpoints/use-breakpoints.scss" as *;`;Then, use it like this in your SCSS stylesheets:
.hippopotame {
padding: 2vw;
@include breakpoint(md) {
padding: 10vw;
}
@include breakpoint(xxl) {
padding: calc(10vw + 3rem);
}
}🎉 Result
<html data-breakpoint="xxl">
<!-- ... -->
</html>To do
- [ ] Full documentation, for JS hook in particular
- [ ] Live demo
