responsive-scale-mixins 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +348 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -45,6 +45,9 @@ pnpm add responsive-scale-mixins
|
|
|
45
45
|
@import "~responsive-scale-mixins";
|
|
46
46
|
|
|
47
47
|
:root {
|
|
48
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
49
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
50
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
48
51
|
// Define CSS variables globally (required)
|
|
49
52
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
50
53
|
// Or use defaults: @include responsive-scale-variables();
|
|
@@ -61,6 +64,10 @@ pnpm add responsive-scale-mixins
|
|
|
61
64
|
|
|
62
65
|
:root {
|
|
63
66
|
// Define CSS variables globally (required)
|
|
67
|
+
|
|
68
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
69
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
70
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
64
71
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
65
72
|
// Or use defaults: @include responsive-scale-variables();
|
|
66
73
|
}
|
|
@@ -82,6 +89,10 @@ pnpm add responsive-scale-mixins
|
|
|
82
89
|
|
|
83
90
|
:root {
|
|
84
91
|
// Define CSS variables globally (required)
|
|
92
|
+
|
|
93
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
94
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
95
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
85
96
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
86
97
|
// Or use defaults: @include responsive-scale-variables();
|
|
87
98
|
}
|
|
@@ -103,6 +114,10 @@ pnpm add responsive-scale-mixins
|
|
|
103
114
|
|
|
104
115
|
:root {
|
|
105
116
|
// Define CSS variables globally (required)
|
|
117
|
+
|
|
118
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
119
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
120
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
106
121
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
107
122
|
// Or use defaults: @include responsive-scale-variables();
|
|
108
123
|
}
|
|
@@ -124,6 +139,10 @@ pnpm add responsive-scale-mixins
|
|
|
124
139
|
|
|
125
140
|
:root {
|
|
126
141
|
// Define CSS variables globally (required)
|
|
142
|
+
|
|
143
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
144
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
145
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
127
146
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
128
147
|
// Or use defaults: @include responsive-scale-variables();
|
|
129
148
|
}
|
|
@@ -145,6 +164,10 @@ pnpm add responsive-scale-mixins
|
|
|
145
164
|
|
|
146
165
|
:root {
|
|
147
166
|
// Customize for your design system (optional)
|
|
167
|
+
|
|
168
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
169
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
170
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
148
171
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
149
172
|
// Or use defaults: @include responsive-scale-variables();
|
|
150
173
|
}
|
|
@@ -158,6 +181,10 @@ pnpm add responsive-scale-mixins
|
|
|
158
181
|
|
|
159
182
|
:root {
|
|
160
183
|
// Customize for your design system (optional)
|
|
184
|
+
|
|
185
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
186
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
187
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
161
188
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
162
189
|
// Or use defaults: @include responsive-scale-variables();
|
|
163
190
|
}
|
|
@@ -171,6 +198,10 @@ pnpm add responsive-scale-mixins
|
|
|
171
198
|
|
|
172
199
|
:root {
|
|
173
200
|
// Customize for your design system (optional)
|
|
201
|
+
|
|
202
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
203
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
204
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
174
205
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
175
206
|
// Or use defaults: @include responsive-scale-variables();
|
|
176
207
|
}
|
|
@@ -184,6 +215,10 @@ pnpm add responsive-scale-mixins
|
|
|
184
215
|
|
|
185
216
|
:root {
|
|
186
217
|
// Customize for your design system (optional)
|
|
218
|
+
|
|
219
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
220
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
221
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
187
222
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
188
223
|
// Or use defaults: @include responsive-scale-variables();
|
|
189
224
|
}
|
|
@@ -197,6 +232,10 @@ pnpm add responsive-scale-mixins
|
|
|
197
232
|
|
|
198
233
|
:root {
|
|
199
234
|
// Customize for your design system (optional)
|
|
235
|
+
|
|
236
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
237
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
238
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
200
239
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
201
240
|
// Or use defaults: @include responsive-scale-variables();
|
|
202
241
|
}
|
|
@@ -211,6 +250,9 @@ pnpm add responsive-scale-mixins
|
|
|
211
250
|
// Variables must be in global scope
|
|
212
251
|
// In your main CSS file:
|
|
213
252
|
:root {
|
|
253
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
254
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
255
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
214
256
|
--computed-scale-factor-px: calc(100vw / 1920);
|
|
215
257
|
--computed-scale-factor-rem: calc(100vw / 1920 / 16);
|
|
216
258
|
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
@@ -375,8 +417,13 @@ Easily customize the design widths to match your project's breakpoints:
|
|
|
375
417
|
|
|
376
418
|
```scss
|
|
377
419
|
:root {
|
|
420
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
421
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
422
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
423
|
+
|
|
378
424
|
// Custom design widths (desktop, tablet, mobile)
|
|
379
425
|
@include responsive-scale-variables(1440px, 768px, 375px);
|
|
426
|
+
// Or use defaults: @include responsive-scale-variables();
|
|
380
427
|
}
|
|
381
428
|
```
|
|
382
429
|
|
|
@@ -400,6 +447,9 @@ If you prefer manual control, you can set the CSS variables directly:
|
|
|
400
447
|
|
|
401
448
|
```scss
|
|
402
449
|
:root {
|
|
450
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
451
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
452
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
403
453
|
--computed-scale-factor-px: calc(100vw / 1440); // Your desktop width
|
|
404
454
|
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
405
455
|
--computed-tablet-scale-factor-px: calc(100vw / 768); // Your tablet width
|
|
@@ -410,6 +460,304 @@ If you prefer manual control, you can set the CSS variables directly:
|
|
|
410
460
|
}
|
|
411
461
|
```
|
|
412
462
|
|
|
463
|
+
## 🔧 Troubleshooting
|
|
464
|
+
|
|
465
|
+
If the `@include responsive-scale-variables()` mixin doesn't work in your setup (e.g., due to SCSS compilation issues), use the manual CSS variables approach. Below are manual setups for each framework:
|
|
466
|
+
|
|
467
|
+
### Why the Manual Approach Works
|
|
468
|
+
|
|
469
|
+
The `@include responsive-scale-variables()` mixin may fail in certain SCSS compilation environments (like some Next.js setups) because the imported mixins aren't processed correctly. The manual CSS variables approach bypasses this by directly defining the required `--computed-scale-factor-*` variables in `:root`.
|
|
470
|
+
|
|
471
|
+
### Next.js (App Router) - Manual Setup
|
|
472
|
+
|
|
473
|
+
```scss
|
|
474
|
+
// app/globals.css or app/styles/globals.scss
|
|
475
|
+
:root {
|
|
476
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
477
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
478
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
479
|
+
--computed-scale-factor-px: calc(100vw / 1440); // Your design desktop width
|
|
480
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
481
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
482
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
483
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
484
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
485
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
// In component files
|
|
489
|
+
@import "responsive-scale-mixins";
|
|
490
|
+
.my-element {
|
|
491
|
+
@include responsive-scale(font-size, 24, 16);
|
|
492
|
+
}
|
|
493
|
+
```
|
|
494
|
+
|
|
495
|
+
### Next.js (Pages Router) - Manual Setup
|
|
496
|
+
|
|
497
|
+
```scss
|
|
498
|
+
// styles/globals.scss
|
|
499
|
+
:root {
|
|
500
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
501
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
502
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
503
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
504
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
505
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
506
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
507
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
508
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
509
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
// In component files
|
|
513
|
+
@import "responsive-scale-mixins";
|
|
514
|
+
```
|
|
515
|
+
|
|
516
|
+
### Create React App - Manual Setup
|
|
517
|
+
|
|
518
|
+
```scss
|
|
519
|
+
// src/index.scss
|
|
520
|
+
:root {
|
|
521
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
522
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
523
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
524
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
525
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
526
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
527
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
528
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
529
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
530
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
// In component files
|
|
534
|
+
@import "responsive-scale-mixins";
|
|
535
|
+
```
|
|
536
|
+
|
|
537
|
+
### Vue.js - Manual Setup
|
|
538
|
+
|
|
539
|
+
```scss
|
|
540
|
+
// src/assets/styles/main.scss
|
|
541
|
+
:root {
|
|
542
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
543
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
544
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
545
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
546
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
547
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
548
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
549
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
550
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
551
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
// In component styles
|
|
555
|
+
@import "responsive-scale-mixins";
|
|
556
|
+
```
|
|
557
|
+
|
|
558
|
+
### Angular - Manual Setup
|
|
559
|
+
|
|
560
|
+
```scss
|
|
561
|
+
// src/styles.scss
|
|
562
|
+
:root {
|
|
563
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
564
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
565
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
566
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
567
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
568
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
569
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
570
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
571
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
572
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
// In component styles
|
|
576
|
+
@import "responsive-scale-mixins";
|
|
577
|
+
```
|
|
578
|
+
|
|
579
|
+
### Vite + Vue/React - Manual Setup
|
|
580
|
+
|
|
581
|
+
```scss
|
|
582
|
+
// src/styles/main.scss
|
|
583
|
+
:root {
|
|
584
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
585
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
586
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
587
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
588
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
589
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
590
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
591
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
592
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
593
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
// In components
|
|
597
|
+
@import "responsive-scale-mixins";
|
|
598
|
+
```
|
|
599
|
+
|
|
600
|
+
### Gatsby - Manual Setup
|
|
601
|
+
|
|
602
|
+
```scss
|
|
603
|
+
// src/styles/global.scss
|
|
604
|
+
:root {
|
|
605
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
606
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
607
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
608
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
609
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
610
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
611
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
612
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
613
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
614
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
// In components
|
|
618
|
+
@import "responsive-scale-mixins";
|
|
619
|
+
```
|
|
620
|
+
|
|
621
|
+
### Nuxt.js - Manual Setup
|
|
622
|
+
|
|
623
|
+
```scss
|
|
624
|
+
// assets/styles/main.scss
|
|
625
|
+
:root {
|
|
626
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
627
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
628
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
629
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
630
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
631
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
632
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
633
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
634
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
635
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
// In components
|
|
639
|
+
@import "responsive-scale-mixins";
|
|
640
|
+
```
|
|
641
|
+
|
|
642
|
+
### SvelteKit - Manual Setup
|
|
643
|
+
|
|
644
|
+
```scss
|
|
645
|
+
// src/app.scss
|
|
646
|
+
:root {
|
|
647
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
648
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
649
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
650
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
651
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
652
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
653
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
654
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
655
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
656
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
// In components
|
|
660
|
+
@import "responsive-scale-mixins";
|
|
661
|
+
```
|
|
662
|
+
|
|
663
|
+
### Astro - Manual Setup
|
|
664
|
+
|
|
665
|
+
```scss
|
|
666
|
+
// src/styles/global.scss
|
|
667
|
+
:root {
|
|
668
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
669
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
670
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
671
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
672
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
673
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
674
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
675
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
676
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
677
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
// In components
|
|
681
|
+
@import "responsive-scale-mixins";
|
|
682
|
+
```
|
|
683
|
+
|
|
684
|
+
### CSS Modules - Manual Setup
|
|
685
|
+
|
|
686
|
+
```scss
|
|
687
|
+
// In your global CSS file (e.g., globals.scss)
|
|
688
|
+
:root {
|
|
689
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
690
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
691
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
692
|
+
--computed-scale-factor-px: calc(100vw / 1920);
|
|
693
|
+
--computed-scale-factor-rem: calc(100vw / 1920 / 16);
|
|
694
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
695
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
696
|
+
--computed-mobile-scale-factor-px: calc(100vw / 390);
|
|
697
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 390 / 16);
|
|
698
|
+
--tablet-proportion-scale-factor: calc((100vw - 390px) / (1920px - 390px));
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
// In your module files
|
|
702
|
+
@import "responsive-scale-mixins";
|
|
703
|
+
.myClass {
|
|
704
|
+
@include responsive-scale(font-size, 24, 16);
|
|
705
|
+
}
|
|
706
|
+
```
|
|
707
|
+
|
|
708
|
+
### Tailwind CSS - Manual Setup
|
|
709
|
+
|
|
710
|
+
```scss
|
|
711
|
+
// styles/main.scss
|
|
712
|
+
:root {
|
|
713
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
714
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
715
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
716
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
717
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
718
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
719
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
720
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
721
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
722
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
// In components
|
|
726
|
+
@import "responsive-scale-mixins";
|
|
727
|
+
.custom-element {
|
|
728
|
+
@include responsive-scale(padding, 20 40, 10 20);
|
|
729
|
+
@apply bg-blue-500 text-white;
|
|
730
|
+
}
|
|
731
|
+
```
|
|
732
|
+
|
|
733
|
+
### Styled Components - Manual Setup
|
|
734
|
+
|
|
735
|
+
```scss
|
|
736
|
+
// In your global styles
|
|
737
|
+
:root {
|
|
738
|
+
// Replace 1440 with your design width or leave default (desktop)
|
|
739
|
+
// Replace 768 with your design width or leave default (tablet)
|
|
740
|
+
// Replace 375 with your design width or leave default (mobile)
|
|
741
|
+
--computed-scale-factor-px: calc(100vw / 1440);
|
|
742
|
+
--computed-scale-factor-rem: calc(100vw / 1440 / 16);
|
|
743
|
+
--computed-tablet-scale-factor-px: calc(100vw / 768);
|
|
744
|
+
--computed-tablet-scale-factor-rem: calc(100vw / 768 / 16);
|
|
745
|
+
--computed-mobile-scale-factor-px: calc(100vw / 375);
|
|
746
|
+
--computed-mobile-scale-factor-rem: calc(100vw / 375 / 16);
|
|
747
|
+
--tablet-proportion-scale-factor: calc((100vw - 375px) / (1440px - 375px));
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
// In styled components with SCSS preprocessing
|
|
751
|
+
import styled from 'styled-components';
|
|
752
|
+
import './styles/responsive-mixins.scss';
|
|
753
|
+
|
|
754
|
+
const StyledComponent = styled.div`
|
|
755
|
+
${props => props.theme.responsiveScale('font-size', 24, 16)}
|
|
756
|
+
`;
|
|
757
|
+
```
|
|
758
|
+
|
|
759
|
+
**Note:** Replace `1440`, `768`, `375` with your actual design widths. The manual approach ensures compatibility across all build tools and frameworks.
|
|
760
|
+
|
|
413
761
|
## 📱 Breakpoints
|
|
414
762
|
|
|
415
763
|
- **Desktop**: ≥992px (scales from desktop design width)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "responsive-scale-mixins",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Powerful SCSS mixins for responsive design with Figma proportions. Automatically scales typography, spacing, and dimensions across desktop, tablet, and mobile breakpoints.",
|
|
5
5
|
"main": "index.scss",
|
|
6
6
|
"style": "index.scss",
|