https://github.com/webfactory/breakpoints-export
https://github.com/webfactory/breakpoints-export
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/webfactory/breakpoints-export
- Owner: webfactory
- Created: 2025-10-15T15:15:25.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-16T14:49:11.000Z (8 months ago)
- Last Synced: 2025-11-16T15:29:31.914Z (7 months ago)
- Language: SCSS
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# breakpoints-export Utility
A JS/SCSS utility that syncs (S)CSS breakpoints with runtime JavaScript by exporting breakpoint maps as CSS custom properties and providing a tiny JS helper to read and compare them against the current viewport (e.g. bp.lessThan, bp.greaterThan).
## Installation
```
npm install @webfactoryde/breakpoints-export
```
## Usage
Define your breakpoints as a Sass map and import the SCSS mixin in your module(s) and use it to generate the necessary Custom Properties:
```scss
@use '@webfactoryde/breakpoints-export' as *;
$breakpoints: (
screen-m: 768px,
screen-l: 1200px,
navigation-breakpoint: 875px,
);
@include breakpoints-export($breakpoints);
```
Import the `breakpoints-export` function in your module(s) and use the comparison you need:
```javascript
// your module
import bp from '@webfactoryde/breakpoints-export';
if (bp.greaterThan('navigation-breakpoint')) {
// do cool stuff
}
```