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.
- Dynamic CSS Classes: Automatically apply CSS classes based on the current window width.
- Visual Rule: Display vertical lines and labels for each breakpoint to help with responsive design.
- Customizable: Configure breakpoints, rule color, opacity, and more.
- No Dependencies: Written in pure JavaScript (Vanilla JS), no jQuery or other libraries required.
- Callback Support: Execute custom logic when a breakpoint is reached.
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:
- Download the latest version from the GitHub repository.
- Add the script to your HTML file:
<script src="path/to/JsWidthBreakpoints.js"></script>- Include the library in your HTML file.
- Initialize the library with your desired breakpoints.
<!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.- Example:
lt400(less than 400px).
- Example:
-
b{min-width}a{max-width}: Applied when the window width is between two breakpoints.- Example:
b400a600(between 400px and 600px).
- Example:
-
gt{max-width}: Applied when the window width is greater than the specified breakpoint.- Example:
gt800(greater than 800px).
- Example:
If you define breakpoints as [400, 600, 800], the library will apply the following classes:
width-lt400for widths less than 400px.width-b400a600for widths between 400px and 600px.width-b600a800for widths between 600px and 800px.width-gt800for 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:
- Fork the repository.
- Create a new branch for your feature or bugfix.
- Commit your changes.
- Submit a pull request.
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.