@julian_cataldo/astro-breakpoints

    0.10.7 • Public • Published

    🚀  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 @julian_cataldo/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 "@julian_cataldo/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

    Install

    npm i @julian_cataldo/astro-breakpoints

    DownloadsWeekly Downloads

    70

    Version

    0.10.7

    License

    ISC

    Unpacked Size

    9.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • julian.cataldo