Skip to content

Commit 5135482

Browse files
ArtasovArtasov
committed
process
1 parent 5c61d5f commit 5135482

File tree

3 files changed

+130
-46
lines changed

3 files changed

+130
-46
lines changed

‎classes/size.sass

+14-12
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,12 @@
1616
.h-100vh
1717
height: 100vh !important
1818

19-
.max-w-100vw
19+
.mw-100vw
2020
max-width: 100vw !important
2121

22-
.max-h-100vh
22+
.mh-100vh
2323
max-height: 100vh !important
2424

25-
@for $i from 2 through 20
26-
.max-w-#{5 * $i}
27-
max-width: #{5 * $i + "% !important"}
28-
29-
@for $i from 2 through 20
30-
.max-h-#{5 * $i}
31-
max-height: #{5 * $i + "% !important"}
3225

3326
@for $i from 0 through 20
3427
.w-#{5 * $i}
@@ -38,10 +31,19 @@
3831
.h-#{5 * $i}
3932
height: (5 * $i) * 1% !important
4033

34+
4135
@for $i from 0 through 20
42-
.max-w-#{50 * $i}px
36+
.mw-#{50 * $i}px
4337
max-width: #{50 * $i}px !important
4438

4539
@for $i from 0 through 20
46-
.max-h-#{50 * $i}px
47-
max-height: #{50 * $i}px !important
40+
.mh-#{50 * $i}px
41+
max-height: #{50 * $i}px !important
42+
43+
@for $i from 2 through 20
44+
.mw-#{5 * $i}
45+
max-width: #{5 * $i + "% !important"}
46+
47+
@for $i from 2 through 20
48+
.mh-#{5 * $i}
49+
max-height: #{5 * $i + "% !important"}

‎index.html

+115-33
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,16 @@
55
<title>Wide Classes Docs</title>
66
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
77
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN " crossorigin="anonymous">
8-
<!-- <link rel="stylesheet" href="bootstrap.min.css">-->
8+
<!-- <link rel="stylesheet" href="bootstrap.min.css"> -->
99
<link rel="stylesheet" href="wide-classes.css">
1010
<script src="js/device-classifier-sensor.js"></script>
1111
<link type="image/x-icon" rel="shortcut icon" href="logo.png">
1212
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1313
</head>
1414
<body>
15-
<header class="frc py-3 bg-success
16-
bg-opacity-75">
15+
<header class="frc py-3 bg-success bg-opacity-75">
1716
<h1 class="frcc m-0 fs-1 fw-bold gap-2 text-white">
18-
<span class="logo rounded-circle ratio-1-2
17+
<span class="logo rounded-circle
1918
border border-5 py-1 px-3 border-white
2019
frcc">Wide
2120
</span>
@@ -38,6 +37,18 @@ <h2 class="text-center fw-5 fs-3">
3837
</section>
3938

4039

40+
<div class="divider-80 bg-black-20"></div>
41+
42+
<section>
43+
<h3 class="fw-4 fs-4 mb-3">
44+
Usage
45+
</h3>
46+
<p class="ps-0 ps-sm-4">Just download
47+
<a target="_blank" href="https://github.com/Artasov/wide-classes/blob/main/wide-classes.css"
48+
class="text-success fw-bold" style="letter-spacing: 0.07rem">
49+
wide-classes.css</a> and include it in your html.</p>
50+
</section>
51+
4152
<div class="divider-80 bg-black-20"></div>
4253

4354
<section>
@@ -106,18 +117,6 @@ <h3 class="fw-4 fs-4 mb-3">
106117
</section>
107118

108119

109-
<div class="divider-80 bg-black-20"></div>
110-
111-
<section>
112-
<h3 class="fw-4 fs-4 mb-3">
113-
Usage
114-
</h3>
115-
<p class="ps-0 ps-sm-4">Just download
116-
<a target="_blank" href="https://github.com/Artasov/wide-classes/blob/main/wide-classes.css"
117-
class="text-success fw-bold" style="letter-spacing: 0.07rem">
118-
wide-classes.css</a> and include it in your html.</p>
119-
</section>
120-
121120
<div class="divider-80 bg-black-20"></div>
122121

123122

@@ -209,7 +208,7 @@ <h4 class="fw-4 fs-5" id="Layout">Layout</h4>
209208
</li>
210209

211210
<li class="fcc">
212-
<span class="fw-4 mb-2">Other</span>
211+
<span class="fw-4 mb-2">All</span>
213212
<div class="frs gap-1 flex-wrap">
214213
<span class="fw-5 badge enable-tap-select-all
215214
text-bg-success bg-opacity-75">fr</span>
@@ -251,6 +250,18 @@ <h4 class="fw-4 fs-5" id="Layout">Layout</h4>
251250
text-bg-success bg-opacity-75">fcsc</span>
252251
<span class="fw-5 badge enable-tap-select-all
253252
text-bg-success bg-opacity-75">frsc</span>
253+
<span class="fw-5 badge enable-tap-select-all
254+
text-bg-success bg-opacity-75">fcss</span>
255+
<span class="fw-5 badge enable-tap-select-all
256+
text-bg-success bg-opacity-75">frss</span>
257+
<span class="fw-5 badge enable-tap-select-all
258+
text-bg-success bg-opacity-75">fcse</span>
259+
<span class="fw-5 badge enable-tap-select-all
260+
text-bg-success bg-opacity-75">frse</span>
261+
<span class="fw-5 badge enable-tap-select-all
262+
text-bg-success bg-opacity-75">fcee</span>
263+
<span class="fw-5 badge enable-tap-select-all
264+
text-bg-success bg-opacity-75">free</span>
254265
</div>
255266
</li>
256267
</ul>
@@ -260,7 +271,7 @@ <h4 class="fw-4 fs-5" id="Layout">Layout</h4>
260271

261272
<div>
262273
<h4 class="fw-4 fs-5" id="Will-need">Will need</h4>
263-
<ul class="fs-5 ps-4 frsc gap-1 flex-wrap">
274+
<ul class="fs-5 ps-4 fc gap-1 flex-wrap">
264275
<li>
265276
<span class="fw-5 badge enable-tap-select-all
266277
text-bg-success bg-opacity-75">no-scrollbar</span>
@@ -316,11 +327,11 @@ <h4 class="fw-4 fs-5" id="Will-need">Will need</h4>
316327

317328
<div>
318329
<h4 class="fw-4 fs-5" id="Size">Size</h4>
319-
<ul class="fs-5 ps-4 frsc gap-1 flex-wrap">
330+
<ul class="fs-5 ps-4 fc gap-1 flex-wrap">
320331
<li>
321332
<span class="fw-5 badge enable-tap-select-all
322333
text-bg-success bg-opacity-75">
323-
h-min-content
334+
h-min
324335
</span>
325336
<div class="mt-1 fs-6 fcc ps-2" style="line-height: 1em">
326337
<span>height: min-content</span>
@@ -330,7 +341,7 @@ <h4 class="fw-4 fs-5" id="Size">Size</h4>
330341
<li>
331342
<span class="fw-5 badge enable-tap-select-all
332343
text-bg-success bg-opacity-75">
333-
w-max-content
344+
w-max
334345
</span>
335346
<div class="mt-1 fs-6 fcc ps-2" style="line-height: 1em">
336347
<span>width: max-content</span>
@@ -341,11 +352,19 @@ <h4 class="fw-4 fs-5" id="Size">Size</h4>
341352
<div>
342353
<span class="fw-5 badge enable-tap-select-all
343354
text-bg-success bg-opacity-75">
344-
w-30
355+
w-0
356+
</span>
357+
<span class="fw-5 badge enable-tap-select-all
358+
text-bg-success bg-opacity-75">
359+
w-5
360+
</span>
361+
<span class="fw-5 badge enable-tap-select-all
362+
text-bg-success bg-opacity-75">
363+
w-10
345364
</span>
346365
<span class="fw-5 badge enable-tap-select-all
347366
text-bg-success bg-opacity-75">
348-
w-40
367+
w-15
349368
</span>
350369
...
351370
<span class="fw-5 badge enable-tap-select-all
@@ -354,39 +373,91 @@ <h4 class="fw-4 fs-5" id="Size">Size</h4>
354373
</span>
355374
</div>
356375
<div class="mt-1 fs-6 fcc ps-2" style="line-height: 1em">
357-
<span>width: 30% to 100%</span>
376+
<span>width: 0% to 100%</span>
377+
</div>
378+
</li>
379+
380+
<li>
381+
<div>
382+
<span class="fw-5 badge enable-tap-select-all text-bg-success bg-opacity-75">mw-0px</span>
383+
<span class="fw-5 badge enable-tap-select-all text-bg-success bg-opacity-75">mw-50px</span>
384+
<span class="fw-5 badge enable-tap-select-all text-bg-success bg-opacity-75">mw-100px</span>
385+
<span class="fw-5 badge enable-tap-select-all text-bg-success bg-opacity-75">mw-150px</span>
386+
...
387+
<span class="fw-5 badge enable-tap-select-all text-bg-success bg-opacity-75">mw-1000px</span>
388+
</div>
389+
<div class="mt-1 fs-6 fcc ps-2" style="line-height: 1em">
390+
<span>max-width: 0px to 1000px</span>
391+
</div>
392+
<div>
393+
<span class="fw-5 badge enable-tap-select-all text-bg-success bg-opacity-75">mw-10</span>
394+
<span class="fw-5 badge enable-tap-select-all text-bg-success bg-opacity-75">mw-15</span>
395+
<span class="fw-5 badge enable-tap-select-all text-bg-success bg-opacity-75">mw-20</span>
396+
...
397+
<span class="fw-5 badge enable-tap-select-all text-bg-success bg-opacity-75">mw-100</span>
398+
</div>
399+
<div class="mt-1 fs-6 fcc ps-2" style="line-height: 1em">
400+
<span>max-width: 10% to 100%</span>
358401
</div>
359402
</li>
360403

361404
<li class="fc">
362-
<span class="mb-2">Other</span>
405+
<span class="mb-2">All</span>
363406
<div class="frs gap-1 flex-wrap">
364-
<span class="frc gap-1">
407+
<span class="frc gap-1 me-3">
365408
<span class="fw-5 badge enable-tap-select-all
366-
text-bg-success bg-opacity-75">w-30</span>
409+
text-bg-success bg-opacity-75">w-0</span>
367410
<span class="fs-6">...</span>
368411
<span class="fw-5 badge enable-tap-select-all
369412
text-bg-success bg-opacity-75">w-100</span>
370413
</span>
371-
<span class="frc gap-1">
414+
<span class="frc gap-1 me-3">
372415
<span class="fw-5 badge enable-tap-select-all
373-
text-bg-success bg-opacity-75">h-30</span>
416+
text-bg-success bg-opacity-75">h-0</span>
374417
<span class="fs-6">...</span>
375418
<span class="fw-5 badge enable-tap-select-all
376419
text-bg-success bg-opacity-75">h-100</span>
377420
</span>
421+
<span class="frc gap-1 me-3">
422+
<span class="fw-5 badge enable-tap-select-all
423+
text-bg-success bg-opacity-75">mw-0px</span>
424+
<span class="fs-6">...</span>
425+
<span class="fw-5 badge enable-tap-select-all
426+
text-bg-success bg-opacity-75">mw-1000px</span>
427+
</span>
428+
<span class="frc gap-1 me-3">
429+
<span class="fw-5 badge enable-tap-select-all
430+
text-bg-success bg-opacity-75">mh-0px</span>
431+
<span class="fs-6">...</span>
432+
<span class="fw-5 badge enable-tap-select-all
433+
text-bg-success bg-opacity-75">mh-1000px</span>
434+
</span>
435+
<span class="frc gap-1 me-3">
436+
<span class="fw-5 badge enable-tap-select-all
437+
text-bg-success bg-opacity-75">mw-10</span>
438+
<span class="fs-6">...</span>
439+
<span class="fw-5 badge enable-tap-select-all
440+
text-bg-success bg-opacity-75">mw-100</span>
441+
</span>
442+
<span class="frc gap-1 me-3">
443+
<span class="fw-5 badge enable-tap-select-all
444+
text-bg-success bg-opacity-75">mh-10</span>
445+
<span class="fs-6">...</span>
446+
<span class="fw-5 badge enable-tap-select-all
447+
text-bg-success bg-opacity-75">mh-100</span>
448+
</span>
378449
<span class="fw-5 badge enable-tap-select-all
379450
text-bg-success bg-opacity-75">w-100vw</span>
380451
<span class="fw-5 badge enable-tap-select-all
381452
text-bg-success bg-opacity-75">h-100vh</span>
382453
<span class="fw-5 badge enable-tap-select-all
383-
text-bg-success bg-opacity-75">w-max-content</span>
454+
text-bg-success bg-opacity-75">w-max</span>
384455
<span class="fw-5 badge enable-tap-select-all
385-
text-bg-success bg-opacity-75">w-min-content</span>
456+
text-bg-success bg-opacity-75">w-min</span>
386457
<span class="fw-5 badge enable-tap-select-all
387-
text-bg-success bg-opacity-75">h-max-content</span>
458+
text-bg-success bg-opacity-75">h-max</span>
388459
<span class="fw-5 badge enable-tap-select-all
389-
text-bg-success bg-opacity-75">h-min-content</span>
460+
text-bg-success bg-opacity-75">h-min</span>
390461
</div>
391462
</li>
392463
</ul>
@@ -520,6 +591,17 @@ <h4 class="fw-4 fs-5" id="Hover">Hover</h4>
520591
<span>On hover: scale 1.05</span>
521592
</div>
522593
</li>
594+
<li class="fc">
595+
<span class="mb-2">All</span>
596+
<div class="frs gap-1 flex-wrap">
597+
<span class="fw-5 badge enable-tap-select-all-all text-bg-success bg-opacity-75">hover-scale-20</span>
598+
<span class="fw-5 badge enable-tap-select-all-all text-bg-success bg-opacity-75">hover-scale-10</span>
599+
<span class="fw-5 badge enable-tap-select-all-all text-bg-success bg-opacity-75">hover-scale-5</span>
600+
<span class="fw-5 badge enable-tap-select-all-all text-bg-success bg-opacity-75">hover-scale-4</span>
601+
<span class="fw-5 badge enable-tap-select-all-all text-bg-success bg-opacity-75">hover-scale-3</span>
602+
<span class="fw-5 badge enable-tap-select-all-all text-bg-success bg-opacity-75">hover-scale-2</span>
603+
</div>
604+
</li>
523605
</ul>
524606
</div>
525607

0 commit comments

Comments
 (0)