@melcanz85/chaincss 1.5.6 → 1.5.7
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 +34 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,12 +33,12 @@ Create this folder structure in your project:
|
|
|
33
33
|
|
|
34
34
|
your-project/
|
|
35
35
|
├── chaincss/ # ChainCSS source files
|
|
36
|
-
│ ├──
|
|
36
|
+
│ ├── main.jcss # Main entry file
|
|
37
37
|
│ ├── chain.jcss # Chaining definitions
|
|
38
38
|
│ └── processor.js # Processing script
|
|
39
39
|
├── public/ # Output files
|
|
40
40
|
│ ├── index.html
|
|
41
|
-
│ └──
|
|
41
|
+
│ └── style.css # Generated CSS
|
|
42
42
|
├── node_modules/
|
|
43
43
|
├── package.json
|
|
44
44
|
└── package-lock.json
|
|
@@ -47,44 +47,21 @@ Processor Setup
|
|
|
47
47
|
|
|
48
48
|
In chaincss/processor.js:
|
|
49
49
|
|
|
50
|
-
const
|
|
50
|
+
const chain = require("@melcanz85/chaincss");
|
|
51
51
|
|
|
52
52
|
try {
|
|
53
53
|
// Process main file and output CSS
|
|
54
|
-
|
|
54
|
+
chain.processor('./chaincss/main.jcss', './public/style.css');
|
|
55
55
|
} catch (err) {
|
|
56
56
|
console.error('Error processing chainCSS file:', err.stack);
|
|
57
57
|
process.exit(1);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
💻 Code Examples
|
|
61
|
-
Main File (chaincss/chaincss.jcss):
|
|
62
61
|
|
|
63
|
-
|
|
64
|
-
// Import chaining definitions
|
|
65
|
-
const style = get('./chain.jcss');
|
|
66
|
-
|
|
67
|
-
// Override specific styles
|
|
68
|
-
style.navA.color = 'red';
|
|
69
|
-
|
|
70
|
-
// Compile to CSS
|
|
71
|
-
compile(style);
|
|
72
|
-
@>
|
|
73
|
-
|
|
74
|
-
@media (max-width: 768px) {
|
|
75
|
-
<@
|
|
76
|
-
run(
|
|
77
|
-
chaincss.flexDirection('column').alignItems('flex-start').block('header'),
|
|
78
|
-
chaincss.order(1).block('.logo'),
|
|
79
|
-
chaincss.order(2).block('.search-bar'),
|
|
80
|
-
chaincss.order(3).block('h1'),
|
|
81
|
-
chaincss.order(5).block('nav'),
|
|
82
|
-
chaincss.order(4).display('flex').width('100%').justifyContent('flex-end').block('.burgerWrapper')
|
|
83
|
-
);
|
|
84
|
-
@>
|
|
85
|
-
}
|
|
62
|
+
--Chaining File (chaincss/chain.jcss):
|
|
86
63
|
|
|
87
|
-
|
|
64
|
+
*** This is where the chaining happens all codes here are javascript codes the methods are the css properties but since its a js code its a camelCase syntax example the property font-family its fontFamily in chaincss syntax.
|
|
88
65
|
|
|
89
66
|
// Variables for consistent styling
|
|
90
67
|
const bodyBgColor = '#f0f0f0';
|
|
@@ -128,6 +105,34 @@ module.exports = {
|
|
|
128
105
|
logoImgHeight
|
|
129
106
|
};
|
|
130
107
|
|
|
108
|
+
|
|
109
|
+
--Main File (chaincss/main.jcss):
|
|
110
|
+
|
|
111
|
+
<@
|
|
112
|
+
// Import chaining definitions
|
|
113
|
+
const style = get('./chain.jcss');
|
|
114
|
+
|
|
115
|
+
// Override specific styles
|
|
116
|
+
style.header.bgColor = 'red';
|
|
117
|
+
|
|
118
|
+
// Compile to CSS
|
|
119
|
+
compile(style);
|
|
120
|
+
@>
|
|
121
|
+
|
|
122
|
+
@media (max-width: 768px) {
|
|
123
|
+
<@
|
|
124
|
+
run(
|
|
125
|
+
chaincss.flexDirection('column').alignItems('flex-start').block('header'),
|
|
126
|
+
chaincss.order(1).block('.logo'),
|
|
127
|
+
chaincss.order(2).block('.search-bar'),
|
|
128
|
+
chaincss.order(3).block('h1'),
|
|
129
|
+
chaincss.order(5).block('nav'),
|
|
130
|
+
chaincss.order(4).display('flex').width('100%').justifyContent('flex-end').block('.burgerWrapper')
|
|
131
|
+
);
|
|
132
|
+
@>
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
|
|
131
136
|
📝 Notes
|
|
132
137
|
|
|
133
138
|
You can directly put css syntax on your main file.
|