Skip to content

Commit deb3f16

Browse files
davidhemphilldavidhemphill
authored
Merge pull request #229 from nothingworksinc/sizing-docs
Add sizing docs
2 parents 3ad9b63 + 4c5d298 commit deb3f16

File tree

6 files changed

+484
-24
lines changed

6 files changed

+484
-24
lines changed

‎docs/source/docs/height.blade.md‎

Lines changed: 113 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,117 @@ title: "Height"
55

66
# Height
77

8-
<div class="subnav">
9-
<a class="subnav-link" href="#usage">Usage</a>
10-
<a class="subnav-link" href="#responsive">Responsive</a>
11-
<a class="subnav-link" href="#customizing">Customizing</a>
8+
<div class="text-xl text-slate-light mb-4">
9+
Utilities for setting the height of an element
10+
</div>
11+
12+
@include('_partials.feature-badges', [
13+
'responsive' => true,
14+
'customizable' => true,
15+
'hover' => false,
16+
'focus' => false
17+
])
18+
19+
<div class="border-t border-grey-lighter">
20+
<table class="w-full text-left" style="border-collapse: collapse;">
21+
<colgroup>
22+
<col class="w-1/5">
23+
<col class="w-1/3">
24+
<col>
25+
</colgroup>
26+
<thead>
27+
<tr>
28+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
29+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
30+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
31+
</tr>
32+
</thead>
33+
<tbody class="align-baseline">
34+
<tr>
35+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-1</td>
36+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 0.25rem;</td>
37+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>0.25rem</code>.</td>
38+
</tr>
39+
<tr>
40+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-2</td>
41+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 0.5rem;</td>
42+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>0.5rem</code>.</td>
43+
</tr>
44+
<tr>
45+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-3</td>
46+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 0.75rem;</td>
47+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>0.75rem</code>.</td>
48+
</tr>
49+
<tr>
50+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-4</td>
51+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 1rem;</td>
52+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>1rem</code>.</td>
53+
</tr>
54+
<tr>
55+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-6</td>
56+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 1.5rem;</td>
57+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>1.5rem</code>.</td>
58+
</tr>
59+
<tr>
60+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-8</td>
61+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 2rem;</td>
62+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>2rem</code>.</td>
63+
</tr>
64+
<tr>
65+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-10</td>
66+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 2.5rem;</td>
67+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>2.5rem</code>.</td>
68+
</tr>
69+
<tr>
70+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-12</td>
71+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 3rem;</td>
72+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>3rem</code>.</td>
73+
</tr>
74+
<tr>
75+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-16</td>
76+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 4rem;</td>
77+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>4rem</code>.</td>
78+
</tr>
79+
<tr>
80+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-24</td>
81+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 6rem;</td>
82+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>6rem</code>.</td>
83+
</tr>
84+
<tr>
85+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-32</td>
86+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 8rem;</td>
87+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>8rem</code>.</td>
88+
</tr>
89+
<tr>
90+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-48</td>
91+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 12rem;</td>
92+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>12rem</code>.</td>
93+
</tr>
94+
<tr>
95+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-64</td>
96+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 16rem;</td>
97+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>16rem</code>.</td>
98+
</tr>
99+
<tr>
100+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-auto</td>
101+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: auto;</td>
102+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>auto</code>.</td>
103+
</tr>
104+
<tr>
105+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-px</td>
106+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 1px;</td>
107+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>1px</code>.</td>
108+
</tr>
109+
<tr>
110+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-full</td>
111+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 100%;</td>
112+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>100%</code>.</td>
113+
</tr>
114+
<tr>
115+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-screen</td>
116+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 100vh</td>
117+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>100vh</code>.</td>
118+
</tr>
119+
</tbody>
120+
</table>
12121
</div>

‎docs/source/docs/max-height.blade.md‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,44 @@ title: "Max-Height"
55

66
# Max-Height
77

8-
<div class="subnav">
9-
<a class="subnav-link" href="#usage">Usage</a>
10-
<a class="subnav-link" href="#responsive">Responsive</a>
11-
<a class="subnav-link" href="#customizing">Customizing</a>
8+
<div class="text-xl text-slate-light mb-4">
9+
Utilities for setting the maximum height of an element
1210
</div>
11+
12+
@include('_partials.feature-badges', [
13+
'responsive' => true,
14+
'customizable' => true,
15+
'hover' => false,
16+
'focus' => false
17+
])
18+
19+
<div class="border-t border-grey-lighter">
20+
<table class="w-full text-left" style="border-collapse: collapse;">
21+
<colgroup>
22+
<col class="w-1/5">
23+
<col class="w-1/3">
24+
<col>
25+
</colgroup>
26+
<thead>
27+
<tr>
28+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
29+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
30+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
31+
</tr>
32+
</thead>
33+
<tbody class="align-baseline">
34+
<tr>
35+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-h-full</td>
36+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-height: 100%;</td>
37+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum height to <code>100%</code>.</td>
38+
</tr>
39+
<tr>
40+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-h-screen</td>
41+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-height: 100vh;</td>
42+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum height to <code>100vh</code>.</td>
43+
</tr>
44+
</tbody>
45+
</table>
46+
</div>
47+
48+

‎docs/source/docs/max-width.blade.md‎

Lines changed: 79 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,83 @@ title: "Max-Width"
55

66
# Max-Width
77

8-
<div class="subnav">
9-
<a class="subnav-link" href="#usage">Usage</a>
10-
<a class="subnav-link" href="#responsive">Responsive</a>
11-
<a class="subnav-link" href="#customizing">Customizing</a>
8+
<div class="text-xl text-slate-light mb-4">
9+
Utilities for setting the maximum width of an element
1210
</div>
11+
12+
@include('_partials.feature-badges', [
13+
'responsive' => true,
14+
'customizable' => true,
15+
'hover' => false,
16+
'focus' => false
17+
])
18+
19+
<div class="border-t border-grey-lighter">
20+
<table class="w-full text-left" style="border-collapse: collapse;">
21+
<colgroup>
22+
<col class="w-1/5">
23+
<col class="w-1/3">
24+
<col>
25+
</colgroup>
26+
<thead>
27+
<tr>
28+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
29+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
30+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
31+
</tr>
32+
</thead>
33+
<tbody class="align-baseline">
34+
<tr>
35+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-xs</td>
36+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 20rem;</td>
37+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>20rem</code>.</td>
38+
</tr>
39+
<tr>
40+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-sm</td>
41+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 30rem;</td>
42+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>30rem</code>.</td>
43+
</tr>
44+
<tr>
45+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-md</td>
46+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 40rem;</td>
47+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>40rem</code>.</td>
48+
</tr>
49+
<tr>
50+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-lg</td>
51+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 50rem;</td>
52+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>50rem</code>.</td>
53+
</tr>
54+
<tr>
55+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-xl</td>
56+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 60rem;</td>
57+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>60rem</code>.</td>
58+
</tr>
59+
<tr>
60+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-2xl</td>
61+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 70rem;</td>
62+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>70rem</code>.</td>
63+
</tr>
64+
<tr>
65+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-3xl</td>
66+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 80rem;</td>
67+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>80rem</code>.</td>
68+
</tr>
69+
<tr>
70+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-4xl</td>
71+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 90rem;</td>
72+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>90rem</code>.</td>
73+
</tr>
74+
<tr>
75+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-5xl</td>
76+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 100rem;</td>
77+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>100rem</code>.</td>
78+
</tr>
79+
<tr>
80+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-full</td>
81+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 100%;</td>
82+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>100%</code>.</td>
83+
</tr>
84+
</tbody>
85+
</table>
86+
</div>
87+

‎docs/source/docs/min-height.blade.md‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,49 @@ title: "Min-Height"
55

66
# Min-Height
77

8-
<div class="subnav">
9-
<a class="subnav-link" href="#usage">Usage</a>
10-
<a class="subnav-link" href="#responsive">Responsive</a>
11-
<a class="subnav-link" href="#customizing">Customizing</a>
8+
<div class="text-xl text-slate-light mb-4">
9+
Utilities for setting the minimum height of an element
1210
</div>
11+
12+
@include('_partials.feature-badges', [
13+
'responsive' => true,
14+
'customizable' => true,
15+
'hover' => false,
16+
'focus' => false
17+
])
18+
19+
<div class="border-t border-grey-lighter">
20+
<table class="w-full text-left" style="border-collapse: collapse;">
21+
<colgroup>
22+
<col class="w-1/5">
23+
<col class="w-1/3">
24+
<col>
25+
</colgroup>
26+
<thead>
27+
<tr>
28+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
29+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
30+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
31+
</tr>
32+
</thead>
33+
<tbody class="align-baseline">
34+
<tr>
35+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-h-0</td>
36+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-height: 0;</td>
37+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum height to <code>0</code>.</td>
38+
</tr>
39+
<tr>
40+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-h-full</td>
41+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-height: 100%;</td>
42+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum height to <code>100%</code>.</td>
43+
<tr>
44+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-h-screen</td>
45+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-height: 100vh;</td>
46+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum height to <code>100vh</code>.</td>
47+
</tr>
48+
</tr>
49+
</tbody>
50+
</table>
51+
</div>
52+
53+

‎docs/source/docs/min-width.blade.md‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,43 @@ title: "Min-Width"
55

66
# Min-Width
77

8-
<div class="subnav">
9-
<a class="subnav-link" href="#usage">Usage</a>
10-
<a class="subnav-link" href="#responsive">Responsive</a>
11-
<a class="subnav-link" href="#customizing">Customizing</a>
8+
<div class="text-xl text-slate-light mb-4">
9+
Utilities for setting the minimum width of an element
1210
</div>
11+
12+
@include('_partials.feature-badges', [
13+
'responsive' => true,
14+
'customizable' => true,
15+
'hover' => false,
16+
'focus' => false
17+
])
18+
19+
<div class="border-t border-grey-lighter">
20+
<table class="w-full text-left" style="border-collapse: collapse;">
21+
<colgroup>
22+
<col class="w-1/5">
23+
<col class="w-1/3">
24+
<col>
25+
</colgroup>
26+
<thead>
27+
<tr>
28+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
29+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
30+
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
31+
</tr>
32+
</thead>
33+
<tbody class="align-baseline">
34+
<tr>
35+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-w-0</td>
36+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-width: 0;</td>
37+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum width to <code>0.25rem</code>.</td>
38+
</tr>
39+
<tr>
40+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-w-full</td>
41+
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-width: 100%;</td>
42+
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum width to <code>0.5rem</code>.</td>
43+
</tr>
44+
</tbody>
45+
</table>
46+
</div>
47+

0 commit comments

Comments
 (0)