exampleSite/content/docs/sizing.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

+++
title = "Sizing"
date = "2017-04-10T16:43:21+01:00"
draft = false
weight = 220
description = "Helper tools for elements width and height"
bref="Helper tools for elements width and height."
toc = true
+++

{{< rawhtml >}}

<h3 class="section-head" id="h-width"><a href="#h-width">Width</a></h3>
<div class="example demo-sizing">
  <div class="w5">
    w5
  </div>
  <div class="w10">
    w10
  </div>
  <div class="w15">
    w15
  </div>
  <div class="w20">
    w20
  </div>
  <div class="w25">
    w25
  </div>
  <div class="w30">
    w30
  </div>
  <div class="w35">
    w35
  </div>
  <div class="w40">
    w40
  </div>
  <div class="w45">
    w45
  </div>
  <div class="w50">
    w50
  </div>
  <div class="w55">
    w55
  </div>
  <div class="w60">
    w60
  </div>
  <div class="w65">
    w65
  </div>
  <div class="w70">
    w70
  </div>
  <div class="w75">
    w75
  </div>
  <div class="w80">
    w80
  </div>
  <div class="w85">
    w85
  </div>
  <div class="w90">
    w90
  </div>
  <div class="w95">
    w95
  </div>
  <div class="w100">
    w100
  </div>
  <pre class="code skip">&lt;<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"w5"</span>&gt;w5&lt;/<span class="hljs-keyword">div</span>&gt;
...
&lt;<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"w100"</span>&gt;w100&lt;/<span class="hljs-keyword">div</span>&gt;
</pre>
</div>
<div class="example demo-sizing">
  <p>100% width on small devices.</p>
  <div class="w50 w100-sm">
    w100-sm
  </div>
  <pre class="code skip">&lt;<span class="hljs-keyword">div</span> <span class="hljs-built_in">class</span>=<span class="hljs-string">"w50 w100-sm"</span>&gt;...&lt;/<span class="hljs-keyword">div</span>&gt;
</pre>
</div>
<h3 class="section-head" id="h-auto-width"><a href="#h-auto-width">Auto Width</a></h3>
<div class="example">
  .w-auto<br>
  .w-auto-sm
</div>
<h3 class="section-head" id="h-max-width"><a href="#h-max-width">Max Width</a></h3>
<div class="example">
  .max-w5 — .max-w100<br>
  .max-w-auto-sm
</div>
<h3 class="section-head" id="h-min-width"><a href="#h-min-width">Min Width</a></h3>
<div class="example">
  .min-w5 — .min-w100
</div>
{{< /rawhtml >}}