Skip to content

Commit a2dbb1f

Browse files
author
mrmrs
committed
Add code examples for display.
1 parent da90990 commit a2dbb1f

File tree

2 files changed

+58
-10
lines changed

2 files changed

+58
-10
lines changed

‎docs/layout/display/index.html

+29-5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
67
<title>
78
tachyons-display / Layout / Docs / TACHYONS
89
</title>
@@ -79,6 +80,10 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-display</h4>
7980
<div class="ph3 ph5-ns pt4 pb5">
8081
<h2 class="f3 bold">Examples</h2>
8182
<h3 class="f5 book pt4 caps">Display Block</h3>
83+
<code class="f6 db">.db { display: block; }</code>
84+
<code class="f6">
85+
&lt;span class="db"&gt;&lt;/span&gt;
86+
</code>
8287
<p>Block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn't take up the full width of the parent.</p>
8388
<div class="db bg-black-10 mb2">
8489
block
@@ -88,6 +93,10 @@ <h3 class="f5 book pt4 caps">Display Block</h3>
8893
</div>
8994

9095
<h3 class="f5 book pt4 caps">Display Inline-Block</h3>
96+
<code class="f6 db">.dib { display: inline-block; }</code>
97+
<code class="f6">
98+
&lt;span class="dib"&gt;&lt;/span&gt;
99+
</code>
91100
<p class="measure">
92101
Inline-block will wrap around content inline. It also allows you to set
93102
height and width properties on the element, which display inline does not allow
@@ -109,6 +118,10 @@ <h3 class="f5 book pt4 caps">Display Inline-Block</h3>
109118
</div>
110119

111120
<h3 class="f5 book pt4 caps">Display Inline</h3>
121+
<code class="f6 db">.di { display: inline; }</code>
122+
<code class="f6">
123+
&lt;div class="di"&gt;&lt;/div&gt;
124+
</code>
112125
<p class="measure">
113126
Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.
114127
</p>
@@ -126,18 +139,29 @@ <h3 class="f5 book pt4 caps">Display Inline</h3>
126139
</div>
127140

128141
<h3 class="f5 book pt4 caps">Display Table</h3>
142+
<code class="f6 db">.dt { display: table; } <br> .dtc { display: table-cell; } </code>
143+
<code class="f6">
144+
&lt;div class="dt"&gt;<br>
145+
&nbsp;&nbsp; &lt;div class="dtc"&gt;&lt;/div&gt;<br>
146+
&nbsp;&nbsp; &lt;div class="dtc"&gt;&lt;/div&gt;<br>
147+
&lt;/div&gt;
148+
</code>
129149
<p class="measure">
130150
Display table can be combined with display table-cell to render a table
131151
without table markup. This can be useful for vertically aligning content
132152
or for auto-calculating a variable amount of table cells.
133153
</p>
134-
<div class="dt bg-black-10 mb2">
135-
<div class="dtc v-mid paxs bg-black-10">display</div>
136-
<div class="dtc v-mid paxs bg-black-20">table</div>
137-
<div class="dtc v-mid paxs bg-black-10">will automatically</div>
138-
<div class="dtc v-mid paxs bg-black-20">compute cell width</div>
154+
<div class="dt bg-black-10 mb2 w-100">
155+
<div class="dtc v-mid pa1 bg-black-10">display</div>
156+
<div class="dtc v-mid pa1 bg-black-20">table</div>
157+
<div class="dtc v-mid pa1 bg-black-10">will automatically</div>
158+
<div class="dtc v-mid pa1 bg-black-20">compute cell width</div>
139159
</div>
140160
<h3 class="f5 book pt4 caps">Display None</h3>
161+
<code class="f6 db">.dn { display: none; }</code>
162+
<code class="f6">
163+
&lt;div class="dn"&gt;&lt;/div&gt;
164+
</code>
141165
<p class="measure">
142166
You can set the display of any element to none by tacking on the <code class="code">dn</code> class.
143167
</p>

‎src/templates/docs/display/index.html

+29-5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
67
<title>
78
<%= name %> / Layout / Docs / TACHYONS
89
</title>
@@ -52,6 +53,10 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
5253
<div class="ph3 ph5-ns pt4 pb5">
5354
<h2 class="f3 bold">Examples</h2>
5455
<h3 class="f5 book pt4 caps">Display Block</h3>
56+
<code class="f6 db">.db { display: block; }</code>
57+
<code class="f6">
58+
&lt;span class="db"&gt;&lt;/span&gt;
59+
</code>
5560
<p>Block will inherently set width to 100% of its parent element. It will also cause a line break, even if the declared width doesn't take up the full width of the parent.</p>
5661
<div class="db bg-black-10 mb2">
5762
block
@@ -61,6 +66,10 @@ <h3 class="f5 book pt4 caps">Display Block</h3>
6166
</div>
6267

6368
<h3 class="f5 book pt4 caps">Display Inline-Block</h3>
69+
<code class="f6 db">.dib { display: inline-block; }</code>
70+
<code class="f6">
71+
&lt;span class="dib"&gt;&lt;/span&gt;
72+
</code>
6473
<p class="measure">
6574
Inline-block will wrap around content inline. It also allows you to set
6675
height and width properties on the element, which display inline does not allow
@@ -82,6 +91,10 @@ <h3 class="f5 book pt4 caps">Display Inline-Block</h3>
8291
</div>
8392

8493
<h3 class="f5 book pt4 caps">Display Inline</h3>
94+
<code class="f6 db">.di { display: inline; }</code>
95+
<code class="f6">
96+
&lt;div class="di"&gt;&lt;/div&gt;
97+
</code>
8598
<p class="measure">
8699
Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.
87100
</p>
@@ -99,18 +112,29 @@ <h3 class="f5 book pt4 caps">Display Inline</h3>
99112
</div>
100113

101114
<h3 class="f5 book pt4 caps">Display Table</h3>
115+
<code class="f6 db">.dt { display: table; } <br> .dtc { display: table-cell; } </code>
116+
<code class="f6">
117+
&lt;div class="dt"&gt;<br>
118+
&nbsp;&nbsp; &lt;div class="dtc"&gt;&lt;/div&gt;<br>
119+
&nbsp;&nbsp; &lt;div class="dtc"&gt;&lt;/div&gt;<br>
120+
&lt;/div&gt;
121+
</code>
102122
<p class="measure">
103123
Display table can be combined with display table-cell to render a table
104124
without table markup. This can be useful for vertically aligning content
105125
or for auto-calculating a variable amount of table cells.
106126
</p>
107-
<div class="dt bg-black-10 mb2">
108-
<div class="dtc v-mid paxs bg-black-10">display</div>
109-
<div class="dtc v-mid paxs bg-black-20">table</div>
110-
<div class="dtc v-mid paxs bg-black-10">will automatically</div>
111-
<div class="dtc v-mid paxs bg-black-20">compute cell width</div>
127+
<div class="dt bg-black-10 mb2 w-100">
128+
<div class="dtc v-mid pa1 bg-black-10">display</div>
129+
<div class="dtc v-mid pa1 bg-black-20">table</div>
130+
<div class="dtc v-mid pa1 bg-black-10">will automatically</div>
131+
<div class="dtc v-mid pa1 bg-black-20">compute cell width</div>
112132
</div>
113133
<h3 class="f5 book pt4 caps">Display None</h3>
134+
<code class="f6 db">.dn { display: none; }</code>
135+
<code class="f6">
136+
&lt;div class="dn"&gt;&lt;/div&gt;
137+
</code>
114138
<p class="measure">
115139
You can set the display of any element to none by tacking on the <code class="code">dn</code> class.
116140
</p>

0 commit comments

Comments
 (0)