3.0.2 • Published 9 months ago

@frankhoodbs/breakpoints v3.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
9 months ago

Vue Breakpoints Utility

A Vue 3 utility that offers a streamlined interface for working with CSS breakpoints, leveraging CSS custom properties (or CSS variables) defined within the :root selector. This utility taps into the css-custom-properties-list dependency to extract the custom properties and provides handy methods to manage media queries within Vue.

Key Features

  1. Automatic Breakpoint Extraction: Identifies and handles breakpoints straight from CSS custom properties.
  2. Vue Integration: Harnesses Vue's reactivity to provide real-time information about the current breakpoints and media query utilities.
  3. Prefix Support: Supports custom prefixes for breakpoint variable names.

Version License

Usage

To get started, first import and initialize the Breakpoints class:

import { Breakpoints } from '@your-package/vue-breakpoints-utility';

const breakpointsUtility = new Breakpoints(document.documentElement, document.styleSheets);

Accessing the Current Breakpoint

You can easily get the current active breakpoint:

console.log(breakpointsUtility.currentBreakpoint.value); // e.g. 'md'

Utility Methods for Media Queries

The utility offers a range of methods designed to facilitate media query management. Here are some of the most common uses:

  1. And Up - Returns true if the viewport width is at or above the specified breakpoint:
if (breakpointsUtility.utilityMethods.mdAndUp.value) {
  // Code for medium devices and above
}
  1. And Down - Returns true if the viewport width is at or below the specified breakpoint:
if (breakpointsUtility.utilityMethods.lgAndDown.value) {
  // Code for large devices and below
}
  1. Only - Returns true only for the specific breakpoint:
if (breakpointsUtility.utilityMethods.lgOnly.value) {
  // Code exclusive to large devices
}

These utilities harness Vue's reactivity, ensuring your UI or logic adapts in real-time to viewport changes. This should give a comprehensive guide on the utility's usage, including the main methods that were mentioned in the code.

Dependencies

  • @vueuse/core: Used for harnessing the reactivity of Vue 3.
  • @frankhoodbs/css-custom-properties-list: Employed to extract CSS custom properties.
2.2.12

10 months ago

3.0.2

9 months ago

3.0.1

9 months ago

2.2.11

10 months ago

2.2.10

12 months ago

2.2.9

12 months ago

2.2.4

1 year ago

2.2.7

1 year ago

2.2.8

1 year ago

2.2.3

1 year ago

2.2.2

1 year ago

2.2.1

1 year ago

2.2.0

1 year ago

2.1.17

1 year ago

2.1.16

1 year ago

2.1.14

1 year ago

2.1.15

1 year ago

2.1.13

1 year ago

2.1.12

1 year ago

2.1.11

1 year ago

2.1.10

1 year ago

2.1.9

1 year ago

2.1.8

1 year ago

2.1.6

1 year ago

2.1.7

1 year ago

2.1.2

1 year ago

2.1.1

1 year ago

2.1.3

1 year ago

2.0.17

2 years ago

2.0.3

2 years ago

2.0.13

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.11

2 years ago

2.0.7

2 years ago

2.0.12

2 years ago

2.0.6

2 years ago

2.0.9

2 years ago

2.0.10

2 years ago

2.0.8

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago