Simple utility to handle breakpoints responsiveness
npm install @frankhoodbs/breakpointsA 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.
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.
To get started, first import and initialize the Breakpoints class:
``javascript
import { Breakpoints } from '@your-package/vue-breakpoints-utility';
const breakpointsUtility = new Breakpoints(document.documentElement, document.styleSheets);
`
You can easily get the current active breakpoint:
`javascript`
console.log(breakpointsUtility.currentBreakpoint.value); // e.g. 'md'
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:
`javascript`
if (breakpointsUtility.utilityMethods.mdAndUp.value) {
// Code for medium devices and above
}
2. And Down - Returns true if the viewport width is at or below the specified breakpoint:
`javascript`
if (breakpointsUtility.utilityMethods.lgAndDown.value) {
// Code for large devices and below
}
3. Only - Returns true only for the specific breakpoint:
`javascript`
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.
- @vueuse/core: Used for harnessing the reactivity of Vue 3.@frankhoodbs/css-custom-properties-list`: Employed to extract CSS custom properties.
-