@norejs/atomcss 1.0.0 → 1.0.1

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.
Files changed (3) hide show
  1. package/index.css +77 -0
  2. package/package.json +1 -1
  3. package/readme.MD +79 -0
package/index.css ADDED
@@ -0,0 +1,77 @@
1
+ /* Atomic CSS - Number to Pixel Mapping */
2
+
3
+ /* Margin Utilities */
4
+ .m-0 { margin: 0px; }
5
+ .m-1 { margin: 4px; } /* 1*4px */
6
+ .m-2 { margin: 8px; } /* 2*4px */
7
+ .m-3 { margin: 12px; } /* 3*4px */
8
+ .m-4 { margin: 16px; } /* 4*4px */
9
+ .m-5 { margin: 20px; } /* 5*4px */
10
+ .m-6 { margin: 24px; } /* 6*4px */
11
+ .m-8 { margin: 32px; } /* 8*4px */
12
+ .m-10 { margin: 40px; } /* 10*4px */
13
+
14
+ .ml-1 { margin-left: 4px; }
15
+ .ml-2 { margin-left: 8px; }
16
+ .ml-3 { margin-left: 12px; }
17
+ .ml-4 { margin-left: 16px; }
18
+
19
+ .mt-1 { margin-top: 4px; }
20
+ .mt-2 { margin-top: 8px; }
21
+ .mt-3 { margin-top: 12px; }
22
+ .mt-4 { margin-top: 16px; }
23
+
24
+ .mr-1 { margin-right: 4px; }
25
+ .mr-2 { margin-right: 8px; }
26
+ .mr-3 { margin-right: 12px; }
27
+ .mr-4 { margin-right: 16px; }
28
+
29
+ .mb-1 { margin-bottom: 4px; }
30
+ .mb-2 { margin-bottom: 8px; }
31
+ .mb-3 { margin-bottom: 12px; }
32
+ .mb-4 { margin-bottom: 16px; }
33
+
34
+ /* Padding Utilities */
35
+ .p-0 { padding: 0px; }
36
+ .p-1 { padding: 4px; }
37
+ .p-2 { padding: 8px; }
38
+ .p-3 { padding: 12px; }
39
+ .p-4 { padding: 16px; }
40
+
41
+ .pl-1 { padding-left: 4px; }
42
+ .pl-2 { padding-left: 8px; }
43
+ .pl-3 { padding-left: 12px; }
44
+ .pl-4 { padding-left: 16px; }
45
+
46
+ .pt-1 { padding-top: 4px; }
47
+ .pt-2 { padding-top: 8px; }
48
+ .pt-3 { padding-top: 12px; }
49
+ .pt-4 { padding-top: 16px; }
50
+
51
+ .pr-1 { padding-right: 4px; }
52
+ .pr-2 { padding-right: 8px; }
53
+ .pr-3 { padding-right: 12px; }
54
+ .pr-4 { padding-right: 16px; }
55
+
56
+ .pb-1 { padding-bottom: 4px; }
57
+ .pb-2 { padding-bottom: 8px; }
58
+ .pb-3 { padding-bottom: 12px; }
59
+ .pb-4 { padding-bottom: 16px; }
60
+
61
+ /* Flexbox Utilities for Centering */
62
+ .flex { display: flex; }
63
+ .flex-row { flex-direction: row; }
64
+ .flex-col { flex-direction: column; }
65
+ .justify-center { justify-content: center; } /* 水平居中 */
66
+ .items-center { align-items: center; } /* 垂直居中 */
67
+ .flex-center { display: flex; justify-content: center; align-items: center; } /* 完全居中 */
68
+
69
+ /* Font-size Utilities */
70
+ .text-xs { font-size: 12px; } /* Extra small */
71
+ .text-sm { font-size: 14px; } /* Small */
72
+ .text-base { font-size: 16px; } /* Base */
73
+ .text-lg { font-size: 18px; } /* Large */
74
+ .text-xl { font-size: 20px; } /* Extra large */
75
+ .text-2xl { font-size: 24px; } /* 2x large */
76
+ .text-3xl { font-size: 30px; } /* 3x large */
77
+ .text-4xl { font-size: 36px; } /* 4x large */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@norejs/atomcss",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/readme.MD ADDED
@@ -0,0 +1,79 @@
1
+ ```
2
+ /* Atomic CSS - Number to Pixel Mapping */
3
+
4
+ /* Margin Utilities */
5
+ .m-0 { margin: 0px; }
6
+ .m-1 { margin: 4px; } /* 1*4px */
7
+ .m-2 { margin: 8px; } /* 2*4px */
8
+ .m-3 { margin: 12px; } /* 3*4px */
9
+ .m-4 { margin: 16px; } /* 4*4px */
10
+ .m-5 { margin: 20px; } /* 5*4px */
11
+ .m-6 { margin: 24px; } /* 6*4px */
12
+ .m-8 { margin: 32px; } /* 8*4px */
13
+ .m-10 { margin: 40px; } /* 10*4px */
14
+
15
+ .ml-1 { margin-left: 4px; }
16
+ .ml-2 { margin-left: 8px; }
17
+ .ml-3 { margin-left: 12px; }
18
+ .ml-4 { margin-left: 16px; }
19
+
20
+ .mt-1 { margin-top: 4px; }
21
+ .mt-2 { margin-top: 8px; }
22
+ .mt-3 { margin-top: 12px; }
23
+ .mt-4 { margin-top: 16px; }
24
+
25
+ .mr-1 { margin-right: 4px; }
26
+ .mr-2 { margin-right: 8px; }
27
+ .mr-3 { margin-right: 12px; }
28
+ .mr-4 { margin-right: 16px; }
29
+
30
+ .mb-1 { margin-bottom: 4px; }
31
+ .mb-2 { margin-bottom: 8px; }
32
+ .mb-3 { margin-bottom: 12px; }
33
+ .mb-4 { margin-bottom: 16px; }
34
+
35
+ /* Padding Utilities */
36
+ .p-0 { padding: 0px; }
37
+ .p-1 { padding: 4px; }
38
+ .p-2 { padding: 8px; }
39
+ .p-3 { padding: 12px; }
40
+ .p-4 { padding: 16px; }
41
+
42
+ .pl-1 { padding-left: 4px; }
43
+ .pl-2 { padding-left: 8px; }
44
+ .pl-3 { padding-left: 12px; }
45
+ .pl-4 { padding-left: 16px; }
46
+
47
+ .pt-1 { padding-top: 4px; }
48
+ .pt-2 { padding-top: 8px; }
49
+ .pt-3 { padding-top: 12px; }
50
+ .pt-4 { padding-top: 16px; }
51
+
52
+ .pr-1 { padding-right: 4px; }
53
+ .pr-2 { padding-right: 8px; }
54
+ .pr-3 { padding-right: 12px; }
55
+ .pr-4 { padding-right: 16px; }
56
+
57
+ .pb-1 { padding-bottom: 4px; }
58
+ .pb-2 { padding-bottom: 8px; }
59
+ .pb-3 { padding-bottom: 12px; }
60
+ .pb-4 { padding-bottom: 16px; }
61
+
62
+ /* Flexbox Utilities for Centering */
63
+ .flex { display: flex; }
64
+ .flex-row { flex-direction: row; }
65
+ .flex-col { flex-direction: column; }
66
+ .justify-center { justify-content: center; } /* 水平居中 */
67
+ .items-center { align-items: center; } /* 垂直居中 */
68
+ .flex-center { display: flex; justify-content: center; align-items: center; } /* 完全居中 */
69
+
70
+ /* Font-size Utilities */
71
+ .text-xs { font-size: 12px; } /* Extra small */
72
+ .text-sm { font-size: 14px; } /* Small */
73
+ .text-base { font-size: 16px; } /* Base */
74
+ .text-lg { font-size: 18px; } /* Large */
75
+ .text-xl { font-size: 20px; } /* Extra large */
76
+ .text-2xl { font-size: 24px; } /* 2x large */
77
+ .text-3xl { font-size: 30px; } /* 3x large */
78
+ .text-4xl { font-size: 36px; } /* 4x large */
79
+ ```