🚀  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.

Keywords:

  • astro
  • astro-component
  • css
  • responsive
  • scss
  • window
  • resize
  • mixins
  • hook
  • callback
  • native
  • interactive
  • vanilla
  • javascript

🚀  Astro — Breakpoints handlers with (S)CSS / DOM / JS

NPM Downloads ISC License PRs Welcome
Astro TypeScript Prettier EditorConfig ESLint

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

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.6.2 (2023-01-05)

Note: Version bump only for package astro-breakpoints

0.6.1 (2022-11-19)

Note: Version bump only for package astro-breakpoints

0.6.0 (2022-10-17)

Features

  • init app breakpoints component (cc9f4ea)

Bug Fixes

  • fire hook initially (bb95503)
  • remove package prefix, simplify import method (73bd31b)
  • remove unrelated keyword (e0e355c)

0.10.7 (2022-09-22)

Note: Version bump only for package @julian_cataldo/astro-breakpoints

0.10.6 (2022-08-20)

Note: Version bump only for package @julian_cataldo/astro-breakpoints

0.10.5 (2022-07-31)

Note: Version bump only for package @julian_cataldo/astro-breakpoints

0.10.4 (2022-07-30)

Bug Fixes

  • remove unrelated keyword (e0e355c)

0.10.3 (2022-07-24)

Note: Version bump only for package @julian_cataldo/astro-breakpoints

0.10.2 (2022-07-18)

Note: Version bump only for package @julian_cataldo/astro-breakpoints

0.10.1 (2022-06-28)

Note: Version bump only for package @julian_cataldo/astro-breakpoints

0.10.0 (2022-06-26)

Features

  • init app breakpoints component (cc9f4ea)

Bug Fixes

...

Licenses

Package
Author
License
URL
lodash-es
John-David Dalton <john.david.dalton@gmail.com>
MIT

⚠️  Having an issue? / 🗣   Wanna share feedback or suggestion?

✍️  Open an Issue or a Pull Request   on GitHub -or-   Contact me   on my Website.