jswidthbreakpoints
Advanced tools
A lightweight, vanilla JavaScript library for handling responsive breakpoints with dynamic CSS classes and visual rules.
JsWidthBreakpoints is a lightweight, vanilla JavaScript library for handling responsive breakpoints with dynamic CSS classes and visual rules. It allows you to define custom breakpoints, apply CSS classes dynamically based on the window width, and visualize breakpoints with a customizable rule.
You can include the library directly in your project using a CDN:
<script src="https://cdn.jsdelivr.net/gh/marceloxp/JsWidthBreakpoints@main/dist/JsWidthBreakpoints.min.js"></script>
Include the library directly in your project:
<script src="path/to/JsWidthBreakpoints.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JsWidthBreakpoints Demo</title>
<style>
.width-lt400 { background-color: lightcoral; }
.width-b400a600 { background-color: lightblue; }
.width-b600a800 { background-color: lightgreen; }
.width-gt800 { background-color: lightyellow; }
</style>
</head>
<body>
<h1>JsWidthBreakpoints</h1>
<p>Resize the window to see the CSS classes being applied.</p>
<p>Breakpoints: [400, 600, 800]</p>
<p id="current-width"></p>
<script src="https://cdn.jsdelivr.net/gh/marceloxp/JsWidthBreakpoints@main/dist/JsWidthBreakpoints.min.js"></script>
<script>
JsWidthBreakpoints.init({
widths: [400, 600, 800],
applyClasses: true,
classPrefix: 'width-',
rule: {
show: true, // Show the rule
opacity: 0.6, // Set opacity
color: 'red', // Set line color
},
onBreakPoint: (event) => {
console.log('Breakpoint reached:', event);
},
});
const drawInfo = () => {
document.getElementById('current-width').innerHTML = `
<p>Current width: ${window.innerWidth}
<br>
Current breakpoint: ${JsWidthBreakpoints.currentClass}</p>
`;
};
// Update current width display
window.addEventListener('resize', (event) => {
drawInfo();
});
drawInfo();
</script>
</body>
</html>
The library dynamically applies CSS classes based on the current window width. Here's how the breakpoint classes are generated:
lt{min-width}: Applied when the window width is less than the specified breakpoint.
lt400 (less than 400px).b{min-width}a{max-width}: Applied when the window width is between two breakpoints.
b400a600 (between 400px and 600px).gt{max-width}: Applied when the window width is greater than the specified breakpoint.
gt800 (greater than 800px).If you define breakpoints as [400, 600, 800], the library will apply the following classes:
width-lt400 for widths less than 400px.width-b400a600 for widths between 400px and 600px.width-b600a800 for widths between 600px and 800px.width-gt800 for widths greater than 800px.The JsWidthBreakpoints.init() method accepts the following options:
| Option | Type | Default | Description |
|---|---|---|---|
widths | number[] | [] | Array of breakpoints (e.g., [400, 600, 800]). |
applyClasses | boolean | true | Whether to dynamically apply CSS classes based on the current breakpoint. |
classPrefix | string | 'width-' | Prefix for the CSS classes (e.g., width-lt400, width-b400a600). |
rule.show | boolean | false | Whether to display the visual rule. |
rule.opacity | number | 1 | Opacity of the rule lines and labels. |
rule.color | string | 'red' | Color of the rule lines. |
onBreakPoint | function | null | Callback function executed when a breakpoint is reached. |
The onBreakPoint callback receives an object with the following properties:
{
oldBreakpoint: string, // Previous breakpoint class (empty string on initialization)
currentWidth: number, // Current window width
currentBreakpoint: string // New breakpoint class (e.g., 'lt400', 'b600a800')
}
When rule.show is true, the library displays vertical lines and labels for each breakpoint. This helps you visualize where the breakpoints are located on the page.
rule: {
show: true,
opacity: 0.6,
color: 'blue',
}
Contributions are welcome! If you'd like to contribute to JsWidthBreakpoints, please follow these steps:
This project is licensed under the MIT License. See the LICENSE file for details.
If you find this library useful, consider giving it a ⭐️ on GitHub. For questions or issues, please open an issue on the repository.
FAQs
A lightweight, vanilla JavaScript library for handling responsive breakpoints with dynamic CSS classes and visual rules.
The npm package jswidthbreakpoints receives a total of 1 weekly downloads. As such, jswidthbreakpoints popularity was classified as not popular.
We found that jswidthbreakpoints demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.