Skip to content

Commit a249e75

Browse files
IdenPinIdenPin
committed
调整命名, 编写 docs
1 parent 78575da commit a249e75

File tree

12 files changed

+1570
-1087
lines changed

12 files changed

+1570
-1087
lines changed

‎dist/acss-helper.css‎

Lines changed: 681 additions & 383 deletions
Large diffs are not rendered by default.

‎docs/css/acss-helper.css‎

Lines changed: 681 additions & 383 deletions
Large diffs are not rendered by default.

‎docs/index.html‎

Lines changed: 46 additions & 279 deletions
Original file line numberDiff line numberDiff line change
@@ -27,299 +27,64 @@ <h1 class="uppercase text-3xl">atomic css helper</h1>
2727
<main class="container">
2828
<div class="row">
2929
<div class="col-9">
30-
<h2 class="border-b-1 border-b-solid border-gray-300 pb-4 mt-5 font-bold">Colors</h2>
30+
<h2 class="border-b-1 border-b-solid border-gray-200 pb-4 mt-5 font-bold">Colors</h2>
3131
<div class="row p-b-30">
32-
<div class="col-3 mt-5" v-for="(color, index) in colors" :key="index">
33-
<div class="p-2 text-c text-sm" :class="`text-${index}-${i == 500 ? '' : 1000 - i} bg-${index}-${i}`"
34-
v-for="(item, i) in color">
35-
{{index.toLocaleUpperCase()}} {{i}}
36-
</div>
37-
</div>
38-
</div>
39-
<!-- paddings -->
40-
<h2 id="paddings" class="border-b-2 border-b-solid border-gray-200 py-5 font-bold">Paddings</h2>
41-
<div class="row p-b-30">
42-
<div class="col-4">
43-
<div class="boxes default">
44-
<div class="box heading">padding</div>
45-
<div class="box">
46-
<code>.p-0</code>
47-
</div>
48-
<div class="box">
49-
<code>.p-5</code>
50-
</div>
51-
<div class="box">
52-
<code>.p-10</code>
53-
</div>
54-
<div class="box">
55-
<code>.p-15</code>
56-
</div>
57-
<div class="box">
58-
<code>.p-20</code>
59-
</div>
60-
<div class="box">
61-
<code>.p-25</code>
62-
</div>
63-
<div class="box">
64-
<code>.p-30</code>
65-
</div>
66-
<div class="box">
67-
<code>.p-35</code>
68-
</div>
69-
<div class="box">
70-
<code>.p-40</code>
71-
</div>
72-
<div class="box">
73-
<code>.p-45</code>
74-
</div>
75-
<div class="box">
76-
<code>.p-50</code>
32+
<div class="col-3 mt-5 overflow-hidden" v-for="(color, index) in colors" :key="index">
33+
<div class="rounded-default overflow-hidden">
34+
<div class="p-2 text-c text-sm" :class="`text-${index}-${i == 500 ? '' : 1000 - i} bg-${index}-${i}`"
35+
v-for="(item, i) in color">
36+
{{index.toLocaleUpperCase()}} {{i}}
7737
</div>
7838
</div>
7939
</div>
8040
</div>
8141
<!-- margins -->
82-
<h2 id="margins" class="border-b-2 border-b-solid border-gray-200 py-5 font-bold">Margins</h2>
83-
<div class="row p-b-30">
84-
<div class="col-4">
85-
<div class="boxes default">
86-
<div class="box heading">margin</div>
87-
<div class="box">
88-
<code>.m-0</code>
89-
</div>
90-
<div class="box">
91-
<code>.m-5</code>
92-
</div>
93-
<div class="box">
94-
<code>.m-10</code>
95-
</div>
96-
<div class="box">
97-
<code>.m-15</code>
98-
</div>
99-
<div class="box">
100-
<code>.m-20</code>
101-
</div>
102-
<div class="box">
103-
<code>.m-25</code>
104-
</div>
105-
<div class="box">
106-
<code>.m-30</code>
107-
</div>
108-
<div class="box">
109-
<code>.m-35</code>
110-
</div>
111-
<div class="box">
112-
<code>.m-40</code>
113-
</div>
114-
<div class="box">
115-
<code>.m-45</code>
116-
</div>
117-
<div class="box">
118-
<code>.m-50</code>
119-
</div>
120-
</div>
121-
</div>
122-
<div class="col-4">
123-
<div class="boxes default">
124-
<div class="box heading">margin-top</div>
125-
<div class="box">
126-
<code>.m-t-0</code>
127-
</div>
128-
<div class="box">
129-
<code>.m-t-5</code>
130-
<code>.m-t--5</code>
131-
</div>
132-
<div class="box">
133-
<code>.m-t-10</code>
134-
<code>.m-t--10</code>
135-
</div>
136-
<div class="box">
137-
<code>.m-t-15</code>
138-
<code>.m-t--15</code>
139-
</div>
140-
<div class="box">
141-
<code>.m-t-20</code>
142-
<code>.m-t--20</code>
143-
</div>
144-
<div class="box">
145-
<code>.m-t-25</code>
146-
<code>.m-t--25</code>
147-
</div>
148-
<div class="box">
149-
<code>.m-t-30</code>
150-
<code>.m-t--30</code>
151-
</div>
152-
<div class="box">
153-
<code>.m-t-35</code>
154-
<code>.m-t--35</code>
155-
</div>
156-
<div class="box">
157-
<code>.m-t-40</code>
158-
<code>.m-t--40</code>
159-
</div>
160-
<div class="box">
161-
<code>.m-t-45</code>
162-
<code>.m-t--45</code>
163-
</div>
164-
<div class="box">
165-
<code>.m-t-50</code>
166-
<code>.m-t--50</code>
167-
</div>
168-
</div>
169-
</div>
170-
<div class="col-4">
171-
<div class="boxes default">
172-
<div class="box heading">margin-bottom</div>
173-
<div class="box">
174-
<code>.m-b-0</code>
175-
</div>
176-
<div class="box">
177-
<code>.m-b-5</code>
178-
<code>.m-b--5</code>
179-
</div>
180-
<div class="box">
181-
<code>.m-b-10</code>
182-
<code>.m-b--10</code>
183-
</div>
184-
<div class="box">
185-
<code>.m-b-15</code>
186-
<code>.m-b--15</code>
187-
</div>
188-
<div class="box">
189-
<code>.m-b-20</code>
190-
<code>.m-b--20</code>
191-
</div>
192-
<div class="box">
193-
<code>.m-b-25</code>
194-
<code>.m-b--25</code>
195-
</div>
196-
<div class="box">
197-
<code>.m-b-30</code>
198-
<code>.m-b--30</code>
199-
</div>
200-
<div class="box">
201-
<code>.m-b-35</code>
202-
<code>.m-b--35</code>
203-
</div>
204-
<div class="box">
205-
<code>.m-b-40</code>
206-
<code>.m-b--40</code>
207-
</div>
208-
<div class="box">
209-
<code>.m-b-45</code>
210-
<code>.m-b--45</code>
211-
</div>
212-
<div class="box">
213-
<code>.m-b-50</code>
214-
<code>.m-b--50</code>
215-
</div>
216-
</div>
217-
</div>
218-
<div class="col-4">
219-
<div class="boxes default">
220-
<div class="box heading">margin-left</div>
221-
<div class="box">
222-
<code>.m-l-0</code>
223-
</div>
224-
<div class="box">
225-
<code>.m-l-5</code>
226-
<code>.m-l--5</code>
227-
</div>
228-
<div class="box">
229-
<code>.m-l-10</code>
230-
<code>.m-l--10</code>
231-
</div>
232-
<div class="box">
233-
<code>.m-l-15</code>
234-
<code>.m-l--15</code>
235-
</div>
236-
<div class="box">
237-
<code>.m-l-20</code>
238-
<code>.m-l--20</code>
239-
</div>
240-
<div class="box">
241-
<code>.m-l-25</code>
242-
<code>.m-l--25</code>
243-
</div>
244-
<div class="box">
245-
<code>.m-l-30</code>
246-
<code>.m-l--30</code>
247-
</div>
248-
<div class="box">
249-
<code>.m-l-35</code>
250-
<code>.m-l--35</code>
251-
</div>
252-
<div class="box">
253-
<code>.m-l-40</code>
254-
<code>.m-l--40</code>
255-
</div>
256-
<div class="box">
257-
<code>.m-l-45</code>
258-
<code>.m-l--45</code>
259-
</div>
260-
<div class="box">
261-
<code>.m-l-50</code>
262-
<code>.m-l--50</code>
42+
<h2 id="margins" class="border-b-1 border-b-solid border-gray-200 py-5 font-bold">Margins</h2>
43+
<div class="row pt-5">
44+
<div class="col-12">
45+
<div class="flex justify-between items-start">
46+
<div class="bg-gray-200" v-for="item in margins">
47+
<div class="bg-white">{{item}}</div>
48+
<div class="bg-gray-200" :class="item">
49+
<div class="bg-yellow-200">Target</div>
50+
</div>
51+
</div>
52+
<div class="bg-gray-200">
53+
<div class="bg-white">-mt-4</div>
54+
<div class="my-8">
55+
<div class="-mt-4">
56+
<div class="bg-yellow-200">Target</div>
57+
</div>
58+
</div>
26359
</div>
26460
</div>
26561
</div>
266-
<div class="col-4">
267-
<div class="boxes default">
268-
<div class="box heading">margin-right</div>
269-
<div class="box">
270-
<code>.m-r-0</code>
271-
</div>
272-
<div class="box">
273-
<code>.m-r-5</code>
274-
<code>.m-r--5</code>
275-
</div>
276-
<div class="box">
277-
<code>.m-r-10</code>
278-
<code>.m-r--10</code>
279-
</div>
280-
<div class="box">
281-
<code>.m-r-15</code>
282-
<code>.m-r--15</code>
283-
</div>
284-
<div class="box">
285-
<code>.m-r-20</code>
286-
<code>.m-r--20</code>
287-
</div>
288-
<div class="box">
289-
<code>.m-r-25</code>
290-
<code>.m-r--25</code>
291-
</div>
292-
<div class="box">
293-
<code>.m-r-30</code>
294-
<code>.m-r--30</code>
295-
</div>
296-
<div class="box">
297-
<code>.m-r-35</code>
298-
<code>.m-r--35</code>
299-
</div>
300-
<div class="box">
301-
<code>.m-r-40</code>
302-
<code>.m-r--40</code>
303-
</div>
304-
<div class="box">
305-
<code>.m-r-45</code>
306-
<code>.m-r--45</code>
307-
</div>
308-
<div class="box">
309-
<code>.m-r-50</code>
310-
<code>.m-r--50</code>
62+
</div>
63+
<!-- paddings -->
64+
<h2 id="paddings" class="border-b-1 border-b-solid border-gray-200 py-5 font-bold">Paddings</h2>
65+
<div class="row pt-5">
66+
<div class="col-12 mb-5">
67+
<div class="flex justify-between items-start">
68+
<div v-for="i in 6">
69+
<p class="text-center text-sm text-gray-600 mb-1 ">pt-{{i}}</p>
70+
<div class="bg-gray-200 border border-dashed border-yellow-500" :class="`pt-${i}`">
71+
<div class="bg-yellow-200">Target</div>
72+
</div>
31173
</div>
31274
</div>
31375
</div>
314-
<div class="col-4">
315-
<div class="boxes default">
316-
<div class="box heading">margin-auto</div>
317-
<div class="box">
318-
<code>.m-auto</code>
76+
<div class="col-12">
77+
<div class="flex justify-between items-start">
78+
<div v-for="item in paddings">
79+
<p class="text-center text-sm text-gray-600 mb-1">{{item}}</p>
80+
<div class="bg-gray-200 border border-dashed border-yellow-500" :class="item">
81+
Target
82+
</div>
31983
</div>
32084
</div>
32185
</div>
32286
</div>
87+
32388
</div>
32489
<div class="sidebar col-3">
32590
<h3 class="font-bold pl-2 text-xl mt-5">Category</h3>
@@ -340,8 +105,8 @@ <h3 class="font-bold pl-2 text-xl mt-5">Category</h3>
340105
data: {
341106
menus: [
342107
'Colors',
343-
'Paddings',
344108
'Margins',
109+
'Paddings',
345110
'Font',
346111
'Text',
347112
'Size',
@@ -465,7 +230,9 @@ <h3 class="font-bold pl-2 text-xl mt-5">Category</h3>
465230
800: '#97266d',
466231
900: '#702459',
467232
}
468-
}
233+
},
234+
paddings: ['pt-8', 'pr-8', 'pb-8', 'pl-8', 'px-8', 'py-8'],
235+
margins: ['mt-8', 'mr-8', 'mb-8', 'ml-8', 'mx-8', 'my-8']
469236
}
470237
})
471238
</script>

‎src/_border-radius.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@each $key, $val in $border-radius {
2+
.rounded-#{$key}{
3+
border-radius: unquote($val);
4+
}
5+
}
6+
7+

‎src/_border.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
border: 1px solid ;
99
}
1010

11+
12+
1113
// border-width
1214
@each $widthKey, $widthVal in $border-width {
1315
@each $dirKey, $dirVal in $direction {
@@ -25,6 +27,9 @@
2527

2628
// border-style
2729
@each $styleKey, $styleVal in $border-style {
30+
.border-#{$styleKey} {
31+
border-style: $styleVal;
32+
}
2833
@each $dirKey, $dirVal in $direction {
2934
.border-#{$dirKey}-#{$styleKey}{
3035
border-#{$dirVal}-style: $styleVal

0 commit comments

Comments
 (0)