Skip to content

Commit 59d5db2

Browse files
arinkerarinker
committed
Refactor CSS files to update modulate-advanced-page-grid.css to modulate-module-grid.css
1 parent 17052b2 commit 59d5db2

4 files changed

Lines changed: 13 additions & 220 deletions

File tree

‎build.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const csso = require('csso');
33
const path = require('path');
44

55
// List of CSS files to be processed
6-
const files = [
6+
const allFiles = [
77
'src/modulate-base.css',
88
'src/modulate-fluid-sizing-basic.css',
99
'src/modulate-fluid-sizing-classic.css',
@@ -12,6 +12,14 @@ const files = [
1212
'src/modulate-header.css'
1313
];
1414

15+
const package1Files = [
16+
'src/modulate-base.css',
17+
'src/modulate-fluid-sizing-basic.css',
18+
'src/modulate-fluid-sizing-modern.css',
19+
'src/modulate-module-grid.css',
20+
'src/modulate-header.css'
21+
];
22+
1523
// Ensure the dist/css directory exists
1624
const distDir = 'dist/css';
1725

@@ -24,7 +32,7 @@ if (fs.existsSync(distDir)) {
2432
fs.mkdirSync(distDir, { recursive: true });
2533

2634
// Process each file
27-
files.forEach(file => {
35+
allFiles.forEach(file => {
2836
// Read the unminified content
2937
const input = fs.readFileSync(file, 'utf8');
3038

@@ -41,7 +49,7 @@ files.forEach(file => {
4149
});
4250

4351
// Merge and minify all files into one
44-
const mergedInput = files.map(file => fs.readFileSync(file, 'utf8')).join('\n');
52+
const mergedInput = package1Files.map(file => fs.readFileSync(file, 'utf8')).join('\n');
4553

4654
// Write the unminified merged file
4755
fs.writeFileSync('dist/css/modulate.css', mergedInput, 'utf8');

‎dist/css/modulate.css‎

Lines changed: 0 additions & 215 deletions
Original file line numberDiff line numberDiff line change
@@ -372,221 +372,6 @@
372372
}
373373
}
374374

375-
/* ====================================================================================================
376-
Fluid Sizing
377-
==================================================================================================== */
378-
@layer base {
379-
:root {
380-
--rem: 16; /* Pixel per REM for General Fluid Sizing */
381-
--s-min: 400; /* Screen Size Min for General Fluid Sizing */
382-
--s-max: 1400; /* Screen Size Max for General Fluid Sizing */
383-
}
384-
385-
body * {
386-
/* ----------------------------------------------------------------------------------------
387-
Block
388-
*/
389-
390-
/* height: bs */
391-
--h-v: calc(((100 * (var(--h-max) - var(--h-min))) / (var(--s-max) - var(--s-min))) * 1vw);
392-
--h-r: calc((((var(--s-min) * var(--h-max)) - (var(--s-max) * var(--h-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
393-
--h: clamp(calc((var(--h-min) / var(--rem)) * 1rem), calc(var(--h-v) + var(--h-r) * 1rem), calc((var(--h-max) / var(--rem)) * 1rem));
394-
395-
/* min-height: minh */
396-
--minh-v: calc(((100 * (var(--minh-max) - var(--minh-min))) / (var(--s-max) - var(--s-min))) * 1vw);
397-
--minh-r: calc((((var(--s-min) * var(--minh-max)) - (var(--s-max) * var(--minh-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
398-
--minh: clamp(calc((var(--minh-min) / var(--rem)) * 1rem), calc(var(--minh-v) + var(--minh-r) * 1rem), calc((var(--minh-max) / var(--rem)) * 1rem));
399-
400-
/* max-height: maxh */
401-
--maxh-v: calc(((100 * (var(--maxh-max) - var(--maxh-min))) / (var(--s-max) - var(--s-min))) * 1vw);
402-
--maxh-r: calc((((var(--s-min) * var(--maxh-max)) - (var(--s-max) * var(--maxh-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
403-
--maxh: clamp(calc((var(--maxh-min) / var(--rem)) * 1rem), calc(var(--maxh-v) + var(--maxh-r) * 1rem), calc((var(--maxh-max) / var(--rem)) * 1rem));
404-
405-
/* ----------------------------------------------------------------------------------------
406-
Width
407-
*/
408-
409-
/* width: is */
410-
--w-v: calc(((100 * (var(--w-max) - var(--w-min))) / (var(--s-max) - var(--s-min))) * 1vw);
411-
--w-r: calc((((var(--s-min) * var(--w-max)) - (var(--s-max) * var(--w-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
412-
--w: clamp(calc((var(--w-min) / var(--rem)) * 1rem), calc(var(--w-v) + var(--w-r) * 1rem), calc((var(--w-max) / var(--rem)) * 1rem));
413-
414-
/* min-width: minw */
415-
--minw-v: calc(((100 * (var(--minw-max) - var(--minw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
416-
--minw-r: calc((((var(--s-min) * var(--minw-max)) - (var(--s-max) * var(--minw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
417-
--minw: clamp(calc((var(--minw-min) / var(--rem)) * 1rem), calc(var(--minw-v) + var(--minw-r) * 1rem), calc((var(--minw-max) / var(--rem)) * 1rem));
418-
419-
/* max-width: maxw */
420-
--maxw-v: calc(((100 * (var(--maxw-max) - var(--maxw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
421-
--maxw-r: calc((((var(--s-min) * var(--maxw-max)) - (var(--s-max) * var(--maxw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
422-
--maxw: clamp(calc((var(--maxw-min) / var(--rem)) * 1rem), calc(var(--maxw-v) + var(--maxw-r) * 1rem), calc((var(--maxw-max) / var(--rem)) * 1rem));
423-
424-
/* ----------------------------------------------------------------------------------------
425-
Margin
426-
*/
427-
428-
/* margin-top: mt */
429-
--mt-v: calc(((100 * (var(--mt-max) - var(--mt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
430-
--mt-r: calc((((var(--s-min) * var(--mt-max)) - (var(--s-max) * var(--mt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
431-
--mt: clamp(calc((var(--mt-min) / var(--rem)) * 1rem), calc(var(--mt-v) + var(--mt-r) * 1rem), calc((var(--mt-max) / var(--rem)) * 1rem));
432-
433-
/* margin-bottom: mb */
434-
--mb-v: calc(((100 * (var(--mb-max) - var(--mb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
435-
--mb-r: calc((((var(--s-min) * var(--mb-max)) - (var(--s-max) * var(--mb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
436-
--mb: clamp(calc((var(--mb-min) / var(--rem)) * 1rem), calc(var(--mb-v) + var(--mb-r) * 1rem), calc((var(--mb-max) / var(--rem)) * 1rem));
437-
438-
/* margin-left: ml */
439-
--ml-v: calc(((100 * (var(--ml-max) - var(--ml-min))) / (var(--s-max) - var(--s-min))) * 1vw);
440-
--ml-r: calc((((var(--s-min) * var(--ml-max)) - (var(--s-max) * var(--ml-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
441-
--ml: clamp(calc((var(--ml-min) / var(--rem)) * 1rem), calc(var(--ml-v) + var(--ml-r) * 1rem), calc((var(--ml-max) / var(--rem)) * 1rem));
442-
443-
/* margin-right: mr */
444-
--mr-v: calc(((100 * (var(--mr-max) - var(--mr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
445-
--mr-r: calc((((var(--s-min) * var(--mr-max)) - (var(--s-max) * var(--mr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
446-
--mr: clamp(calc((var(--mr-min) / var(--rem)) * 1rem), calc(var(--mr-v) + var(--mr-r) * 1rem), calc((var(--mr-max) / var(--rem)) * 1rem));
447-
448-
/* ----------------------------------------------------------------------------------------
449-
Padding
450-
*/
451-
452-
/* padding-top: pt */
453-
--pt-v: calc(((100 * (var(--pt-max) - var(--pt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
454-
--pt-r: calc((((var(--s-min) * var(--pt-max)) - (var(--s-max) * var(--pt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
455-
--pt: clamp(calc((var(--pt-min) / var(--rem)) * 1rem), calc(var(--pt-v) + var(--pt-r) * 1rem), calc((var(--pt-max) / var(--rem)) * 1rem));
456-
457-
/* padding-bottom: pb */
458-
--pb-v: calc(((100 * (var(--pb-max) - var(--pb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
459-
--pb-r: calc((((var(--s-min) * var(--pb-max)) - (var(--s-max) * var(--pb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
460-
--pb: clamp(calc((var(--pb-min) / var(--rem)) * 1rem), calc(var(--pb-v) + var(--pb-r) * 1rem), calc((var(--pb-max) / var(--rem)) * 1rem));
461-
462-
/* padding-left: pl */
463-
--pl-v: calc(((100 * (var(--pl-max) - var(--pl-min))) / (var(--s-max) - var(--s-min))) * 1vw);
464-
--pl-r: calc((((var(--s-min) * var(--pl-max)) - (var(--s-max) * var(--pl-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
465-
--pl: clamp(calc((var(--pl-min) / var(--rem)) * 1rem), calc(var(--pl-v) + var(--pl-r) * 1rem), calc((var(--pl-max) / var(--rem)) * 1rem));
466-
467-
/* padding-right: pr */
468-
--pr-v: calc(((100 * (var(--pr-max) - var(--pr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
469-
--pr-r: calc((((var(--s-min) * var(--pr-max)) - (var(--s-max) * var(--pr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
470-
--pr: clamp(calc((var(--pr-min) / var(--rem)) * 1rem), calc(var(--pr-v) + var(--pr-r) * 1rem), calc((var(--pr-max) / var(--rem)) * 1rem));
471-
472-
/* ----------------------------------------------------------------------------------------
473-
Border Width
474-
*/
475-
476-
/* border-top-width: btw */
477-
--btw-v: calc(((100 * (var(--btw-max) - var(--btw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
478-
--btw-r: calc((((var(--s-min) * var(--btw-max)) - (var(--s-max) * var(--btw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
479-
--btw: clamp(calc((var(--btw-min) / var(--rem)) * 1rem), calc(var(--btw-v) + var(--btw-r) * 1rem), calc((var(--btw-max) / var(--rem)) * 1rem));
480-
481-
/* border-bottom-width: bbw */
482-
--bbw-v: calc(((100 * (var(--bbw-max) - var(--bbw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
483-
--bbw-r: calc((((var(--s-min) * var(--bbw-max)) - (var(--s-max) * var(--bbw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
484-
--bbw: clamp(calc((var(--bbw-min) / var(--rem)) * 1rem), calc(var(--bbw-v) + var(--bbw-r) * 1rem), calc((var(--bbw-max) / var(--rem)) * 1rem));
485-
486-
/* border-left-width: blw */
487-
--blw-v: calc(((100 * (var(--blw-max) - var(--blw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
488-
--blw-r: calc((((var(--s-min) * var(--blw-max)) - (var(--s-max) * var(--blw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
489-
--blw: clamp(calc((var(--blw-min) / var(--rem)) * 1rem), calc(var(--blw-v) + var(--blw-r) * 1rem), calc((var(--blw-max) / var(--rem)) * 1rem));
490-
491-
/* border-right-width: bbrw */
492-
--bbrw-v: calc(((100 * (var(--bbrw-max) - var(--bbrw-min))) / (var(--s-max) - var(--s-min))) * 1vw);
493-
--bbrw-r: calc((((var(--s-min) * var(--bbrw-max)) - (var(--s-max) * var(--bbrw-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
494-
--bbrw: clamp(calc((var(--bbrw-min) / var(--rem)) * 1rem), calc(var(--bbrw-v) + var(--bbrw-r) * 1rem), calc((var(--bbrw-max) / var(--rem)) * 1rem));
495-
496-
/* ----------------------------------------------------------------------------------------
497-
Border Radius
498-
*/
499-
500-
/* border-top-left-radius: btlr */
501-
--btlr-v: calc(((100 * (var(--btlr-max) - var(--btlr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
502-
--btlr-r: calc((((var(--s-min) * var(--btlr-max)) - (var(--s-max) * var(--btlr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
503-
--btlr: clamp(calc((var(--btlr-min) / var(--rem)) * 1rem), calc(var(--btlr-v) + var(--btlr-r) * 1rem), calc((var(--btlr-max) / var(--rem)) * 1rem));
504-
505-
/* border-top-right-radius: btrr */
506-
--btrr-v: calc(((100 * (var(--btrr-max) - var(--btrr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
507-
--btrr-r: calc((((var(--s-min) * var(--btrr-max)) - (var(--s-max) * var(--btrr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
508-
--btrr: clamp(calc((var(--btrr-min) / var(--rem)) * 1rem), calc(var(--btrr-v) + var(--btrr-r) * 1rem), calc((var(--btrr-max) / var(--rem)) * 1rem));
509-
510-
/* border-bottom-right-radius: bbrr */
511-
--bbrr-v: calc(((100 * (var(--bbrr-max) - var(--bbrr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
512-
--bbrr-r: calc((((var(--s-min) * var(--bbrr-max)) - (var(--s-max) * var(--bbrr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
513-
--bbrr: clamp(calc((var(--bbrr-min) / var(--rem)) * 1rem), calc(var(--bbrr-v) + var(--bbrr-r) * 1rem), calc((var(--bbrr-max) / var(--rem)) * 1rem));
514-
515-
/* border-bottom-left-radius: bblr */
516-
--bblr-v: calc(((100 * (var(--bblr-max) - var(--bblr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
517-
--bblr-r: calc((((var(--s-min) * var(--bblr-max)) - (var(--s-max) * var(--bblr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
518-
--bblr: clamp(calc((var(--bblr-min) / var(--rem)) * 1rem), calc(var(--bblr-v) + var(--bblr-r) * 1rem), calc((var(--bblr-max) / var(--rem)) * 1rem));
519-
520-
/* ----------------------------------------------------------------------------------------
521-
Inset
522-
*/
523-
524-
/* inset-top: ibt */
525-
--ibt-v: calc(((100 * (var(--ibt-max) - var(--ibt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
526-
--ibt-r: calc((((var(--s-min) * var(--ibt-max)) - (var(--s-max) * var(--ibt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
527-
--ibt: clamp(calc((var(--ibt-min) / var(--rem)) * 1rem), calc(var(--ibt-v) + var(--ibt-r) * 1rem), calc((var(--ibt-max) / var(--rem)) * 1rem));
528-
529-
/* inset-bottom: ibb */
530-
--ibb-v: calc(((100 * (var(--ibb-max) - var(--ibb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
531-
--ibb-r: calc((((var(--s-min) * var(--ibb-max)) - (var(--s-max) * var(--ibb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
532-
--ibb: clamp(calc((var(--ibb-min) / var(--rem)) * 1rem), calc(var(--ibb-v) + var(--ibb-r) * 1rem), calc((var(--ibb-max) / var(--rem)) * 1rem));
533-
534-
/* inset-left: il */
535-
--il-v: calc(((100 * (var(--il-max) - var(--il-min))) / (var(--s-max) - var(--s-min))) * 1vw);
536-
--il-r: calc((((var(--s-min) * var(--il-max)) - (var(--s-max) * var(--il-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
537-
--il: clamp(calc((var(--il-min) / var(--rem)) * 1rem), calc(var(--il-v) + var(--il-r) * 1rem), calc((var(--il-max) / var(--rem)) * 1rem));
538-
539-
/* inset-right: ir */
540-
--ir-v: calc(((100 * (var(--ir-max) - var(--ir-min))) / (var(--s-max) - var(--s-min))) * 1vw);
541-
--ir-r: calc((((var(--s-min) * var(--ir-max)) - (var(--s-max) * var(--ir-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
542-
--ir: clamp(calc((var(--ir-min) / var(--rem)) * 1rem), calc(var(--ir-v) + var(--ir-r) * 1rem), calc((var(--ir-max) / var(--rem)) * 1rem));
543-
544-
/* ----------------------------------------------------------------------------------------
545-
Scroll
546-
*/
547-
548-
/* scroll-margin-top: smt */
549-
--smt-v: calc(((100 * (var(--smt-max) - var(--smt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
550-
--smt-r: calc((((var(--s-min) * var(--smt-max)) - (var(--s-max) * var(--smt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
551-
--smt: clamp(calc((var(--smt-min) / var(--rem)) * 1rem), calc(var(--smt-v) + var(--smt-r) * 1rem), calc((var(--smt-max) / var(--rem)) * 1rem));
552-
553-
/* scroll-margin-bottom: smb */
554-
--smb-v: calc(((100 * (var(--smb-max) - var(--smb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
555-
--smb-r: calc((((var(--s-min) * var(--smb-max)) - (var(--s-max) * var(--smb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
556-
--smb: clamp(calc((var(--smb-min) / var(--rem)) * 1rem), calc(var(--smb-v) + var(--smb-r) * 1rem), calc((var(--smb-max) / var(--rem)) * 1rem));
557-
558-
/* scroll-margin-left: sml */
559-
--sml-v: calc(((100 * (var(--sml-max) - var(--sml-min))) / (var(--s-max) - var(--s-min))) * 1vw);
560-
--sml-r: calc((((var(--s-min) * var(--sml-max)) - (var(--s-max) * var(--sml-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
561-
--sml: clamp(calc((var(--sml-min) / var(--rem)) * 1rem), calc(var(--sml-v) + var(--sml-r) * 1rem), calc((var(--sml-max) / var(--rem)) * 1rem));
562-
563-
/* scroll-margin-right: smr */
564-
--smr-v: calc(((100 * (var(--smr-max) - var(--smr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
565-
--smr-r: calc((((var(--s-min) * var(--smr-max)) - (var(--s-max) * var(--smr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
566-
--smr: clamp(calc((var(--smr-min) / var(--rem)) * 1rem), calc(var(--smr-v) + var(--smr-r) * 1rem), calc((var(--smr-max) / var(--rem)) * 1rem));
567-
568-
/* scroll-padding-top: spt */
569-
--spt-v: calc(((100 * (var(--spt-max) - var(--spt-min))) / (var(--s-max) - var(--s-min))) * 1vw);
570-
--spt-r: calc((((var(--s-min) * var(--spt-max)) - (var(--s-max) * var(--spt-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
571-
--spt: clamp(calc((var(--spt-min) / var(--rem)) * 1rem), calc(var(--spt-v) + var(--spt-r) * 1rem), calc((var(--spt-max) / var(--rem)) * 1rem));
572-
573-
/* scroll-padding-bottom: spb */
574-
--spb-v: calc(((100 * (var(--spb-max) - var(--spb-min))) / (var(--s-max) - var(--s-min))) * 1vw);
575-
--spb-r: calc((((var(--s-min) * var(--spb-max)) - (var(--s-max) * var(--spb-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
576-
--spb: clamp(calc((var(--spb-min) / var(--rem)) * 1rem), calc(var(--spb-v) + var(--spb-r) * 1rem), calc((var(--spb-max) / var(--rem)) * 1rem));
577-
578-
/* scroll-padding-left: spl */
579-
--spl-v: calc(((100 * (var(--spl-max) - var(--spl-min))) / (var(--s-max) - var(--s-min))) * 1vw);
580-
--spl-r: calc((((var(--s-min) * var(--spl-max)) - (var(--s-max) * var(--spl-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
581-
--spl: clamp(calc((var(--spl-min) / var(--rem)) * 1rem), calc(var(--spl-v) + var(--spl-r) * 1rem), calc((var(--spl-max) / var(--rem)) * 1rem));
582-
583-
/* scroll-padding-right: spr */
584-
--spr-v: calc(((100 * (var(--spr-max) - var(--spr-min))) / (var(--s-max) - var(--s-min))) * 1vw);
585-
--spr-r: calc((((var(--s-min) * var(--spr-max)) - (var(--s-max) * var(--spr-min))) / (var(--s-min) - var(--s-max))) / var(--rem));
586-
--spr: clamp(calc((var(--spr-min) / var(--rem)) * 1rem), calc(var(--spr-v) + var(--spr-r) * 1rem), calc((var(--spr-max) / var(--rem)) * 1rem));
587-
}
588-
}
589-
590375
/* ====================================================================================================
591376
Fluid Sizing
592377
==================================================================================================== */

‎dist/css/modulate.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "modulatecss",
3-
"version": "1.0.22",
3+
"version": "1.0.23",
44
"description": "A versatile CSS framework for modern web development, supporting advanced features like Grid, Flexbox, and CSS custom properties for scalable, maintainable, and responsive designs.",
55
"main": "dist/css/modulate.min.css",
66
"style": "dist/css/modulate.min.css",

0 commit comments

Comments
 (0)