responsive-scale
v1.0.4
Published
Responsive CSS sizing scale in pixels, powered by custom properties.
Maintainers
shkelzahmetiReadme
responsive-scale
Responsive CSS sizing scale in pixels, powered by custom properties. This package modernizes the classic 62.5% rem concept by shifting the scaling logic entirely to dynamic CSS variables.
The Concept
Instead of altering the global html font size (which can break user browser accessibility preferences), this package defines a dynamic --base variable set at 10px.
All standard pixel steps from --1 to --1000 (even numbers only) are computed dynamically via calc() relative to this base. When you pass a breakpoint, the --base shrinks, automatically scaling down your entire layout.
- Desktop (
--base: 10px):var(--16)=1.6 * 10px= 16px - Tablet (
--base: 8px):var(--16)=1.6 * 8px= 12.8px - Mobile (
--base: 6px):var(--16)=1.6 * 6px= 9.6px
Installation
Install the package via npm:
npm install responsive-scaleUsage
1. Import into JavaScript Frameworks
Import the stylesheet at the root of your application (e.g., main.js, index.js, or app.js):
import "responsive-scale";2. Import into standard CSS
If your builder supports CSS imports, add this to the top of your global stylesheet:
@import "responsive-scale";3. Load via CDN (Plain HTML)
Drop this directly into your <head> tag to use it without installation:
<link rel="stylesheet" href="https://unpkg.com" />How to Use the Scale
The package exposes variables from --1 all the way, evenly, up to --1000. Use them exactly like standard pixel values, omitting the px unit in the variable name:
h1 {
font-size: var(--32); /* 32px on desktop */
}
p {
font-size: var(--16); /* 16px on desktop */
}
section {
padding: var(--24); /* 24px on desktop */
}Making It Responsive
The scale handles the math. To scale down your entire website layout across different devices, override the --base variable inside media queries in your local CSS file:
/* Your local stylesheet */
/* Tablet Viewport */
@media (max-width: 1024px) {
:root {
--base: 8px; /* Automatically drops var(--16) to 12.8px */
}
}
/* Mobile Viewport */
@media (max-width: 480px) {
:root {
--base: 6px; /* Automatically drops var(--16) to 9.6px */
}
}Technical Details
The list of the exported variables starts from number 1, then continues only with even numbers till 1000:
:root {
--base: 10px;
--1: calc(0.1 * var(--base));
--2: calc(0.2 * var(--base));
--4: calc(0.4 * var(--base));
--6: calc(0.6 * var(--base));
--10: calc(10 * var(--base));
--16: calc(16 * var(--base));
/* ... scales up through every single step ... */
--1000: calc(100 * var(--base));
}Extending the package
You can easily extend the package by adding custom responsive variables directly to your own :root selector in your local repo:
:root {
/* Extending the scale for other cases: */
--1200: calc(120 * var(--base));
--1400: calc(140 * var(--base));
/* ... More variables here ... */
}⚠️ VSCode Integration (Bonus) - MUST READ
You can configure VSCode so that typing a value like 12px or 12p and hitting the symbol in keyboard right after p, so [ or ], instantly converts it into var(--12).
- Open the Command Palette using
Ctrl + Shift + P(orCmd + Shift + Pon macOS). - Type and select Preferences: Open Keyboard Shortcuts (JSON).
- Paste the following object into your existing shortcuts configuration array:
(
[or]are the keys right after letterp- for faster auto-completion)
{
"key": "[",
"command": "runCommands",
"when": "editorTextFocus && !editorHasSelection && !suggestWidgetVisible && textInputFocus && resourceExtname == .css",
"args": {
"commands": [
{
"command": "editor.action.smartSelect.expand",
},
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "${TM_SELECTED_TEXT/(?:(\\d+)\\s*px?)/var(--$1)/}",
},
},
],
},
},
{
"key": "]",
"command": "runCommands",
"when": "editorTextFocus && !editorHasSelection && !suggestWidgetVisible && textInputFocus && resourceExtname == .css",
"args": {
"commands": [
{
"command": "editor.action.smartSelect.expand",
},
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "${TM_SELECTED_TEXT/(?:(\\d+)\\s*px?)/var(--$1)/}",
},
},
],
},
},