This content originally appeared on DEV Community and was authored by Cüneyt Çakar
We've updated our breakpoint system to better align with modern device resolutions.
What Changed
In v0.2.1, we've updated the larger breakpoints:
- Lg: 1024px → 1280px
- Xl: 1280px → 1920px
- 2xl: 1536px → 2560px
Why?
The web has evolved. In 2025:
- Most laptops have 1920×1080 displays (Full HD)
- Tablets like iPad Pro have 1366px width in landscape
- 2K/QHD monitors (2560×1440) are common
- The old 1024px "desktop" breakpoint is outdated
Better Responsive Ranges
Tablets (Md): Now 768px-1280px (was 768px-1024px)
- Covers iPad, Surface, and large Android tablets properly
Desktops (Lg): Now 1280px-1920px (was 1024px-1280px)
- Standard laptop and desktop range
Large Desktops (Xl): Now 1920px-2560px (was 1280px-1536px)
- Full HD and QHD displays
Migration
If you're using token variables (recommended):
import { sBreakpointLg } from '@spexop/tokens';
// Automatically gets new value: "1280px"
Simply update the package and your responsive design improves automatically!
npm install @spexop/tokens@0.2.1
No breaking changes for best-practice usage. 🎉
📦 Package Contents
Distributed Files
@spexop/tokens@0.2.1
├── dist/
│ ├── index.js (42 KB) - ES Module
│ ├── index.cjs (61 KB) - CommonJS
│ ├── index.d.ts (60 KB) - TypeScript types (ESM)
│ ├── index.d.cts (60 KB) - TypeScript types (CJS)
│ ├── tokens.css (17 KB) - CSS variables
│ └── tokens.json (17 KB) - JSON export
├── README.md (9.9 KB)
├── CHANGELOG.md (6.9 KB)
├── TOKENS-REFERENCE.md (13 KB)
├── tokens-demo.html (43 KB)
└── tokens-quick-reference.txt (7.4 KB)
Total Package Size: ~250 KB
⚠️ Migration Guide for Users
If You Used Token Variables (Recommended) ✅
No changes needed! Just update the package:
npm install @spexop/tokens@0.2.1
import { sBreakpointLg } from '@spexop/tokens';
// Automatically uses new value: "1280px"
If You Hardcoded Values ⚠️
You'll need to update your code:
// ❌ Before (hardcoded)
const breakpoint = '1024px';
// ✅ After (use token)
import { sBreakpointLg } from '@spexop/tokens';
const breakpoint = sBreakpointLg; // "1280px"
CSS Media Queries
Before:
@media (min-width: 1024px) {
/* Desktop styles */
}
After:
@import '@spexop/tokens/tokens.css';
@media var(--s-breakpoint-lg) {
/* Or better yet, use: */
}
@media (min-width: 1280px) {
/* Updated desktop styles */
}
This content originally appeared on DEV Community and was authored by Cüneyt Çakar
Cüneyt Çakar | Sciencx (2025-10-08T08:28:58+00:00) @spexop/tokens v0.2.1: Updated Breakpoints for Modern Displays. Retrieved from https://www.scien.cx/2025/10/08/spexop-tokens-v0-2-1-updated-breakpoints-for-modern-displays/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.