Skip to content

Clean up measure/line height on display docs #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 24, 2016
Merged

Clean up measure/line height on display docs #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/layout/display/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ <h3 class="f5 book pt4 caps">Display Block</h3>
<code class="f6">
&lt;span class="db"&gt;&lt;/span&gt;
</code>
<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>
<p class="measure lh-copy">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>
<div class="db bg-black-10 mb2">
block
</div>
Expand All @@ -100,7 +100,7 @@ <h3 class="f5 book pt4 caps">Display Inline-Block</h3>
<code class="f6">
&lt;span class="dib"&gt;&lt;/span&gt;
</code>
<p class="measure">
<p class="measure lh-copy">
Inline-block will wrap around content inline. It also allows you to set
height and width properties on the element, which display inline does not allow
you to do. It does render the white-space inbeween elements, so if you set
Expand All @@ -125,7 +125,7 @@ <h3 class="f5 book pt4 caps">Display Inline</h3>
<code class="f6">
&lt;div class="di"&gt;&lt;/div&gt;
</code>
<p class="measure">
<p class="measure lh-copy">
Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.
</p>
<div class="di bg-black-10 mb2">
Expand All @@ -149,10 +149,10 @@ <h3 class="f5 book pt4 caps">Display Table</h3>
&nbsp;&nbsp; &lt;div class="dtc"&gt;&lt;/div&gt;<br>
&lt;/div&gt;
</code>
<p class="measure">
<p class="measure lh-copy">
Display table can be combined with display table-cell to render a table
without table markup. This can be useful for vertically aligning content
or for auto-calculating a variable amount of table cells.
or for auto-calculating a variable number of table cells.
</p>
<div class="dt bg-black-10 mb2 w-100">
<div class="dtc v-mid pa1 bg-black-10">display</div>
Expand All @@ -165,7 +165,7 @@ <h3 class="f5 book pt4 caps">Display None</h3>
<code class="f6">
&lt;div class="dn"&gt;&lt;/div&gt;
</code>
<p class="measure">
<p class="measure lh-copy">
You can set the display of any element to none by tacking on the <code class="code">dn</code> class.
</p>

Expand Down
12 changes: 6 additions & 6 deletions src/templates/docs/display/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ <h3 class="f5 book pt4 caps">Display Block</h3>
<code class="f6">
&lt;span class="db"&gt;&lt;/span&gt;
</code>
<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>
<p class="measure lh-copy">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>
<div class="db bg-black-10 mb2">
block
</div>
Expand All @@ -64,7 +64,7 @@ <h3 class="f5 book pt4 caps">Display Inline-Block</h3>
<code class="f6">
&lt;span class="dib"&gt;&lt;/span&gt;
</code>
<p class="measure">
<p class="measure lh-copy">
Inline-block will wrap around content inline. It also allows you to set
height and width properties on the element, which display inline does not allow
you to do. It does render the white-space inbeween elements, so if you set
Expand All @@ -89,7 +89,7 @@ <h3 class="f5 book pt4 caps">Display Inline</h3>
<code class="f6">
&lt;div class="di"&gt;&lt;/div&gt;
</code>
<p class="measure">
<p class="measure lh-copy">
Set content inline. Inline doesn't respect height or width values. It does not render white space between elements.
</p>
<div class="di bg-black-10 mb2">
Expand All @@ -113,10 +113,10 @@ <h3 class="f5 book pt4 caps">Display Table</h3>
&nbsp;&nbsp; &lt;div class="dtc"&gt;&lt;/div&gt;<br>
&lt;/div&gt;
</code>
<p class="measure">
<p class="measure lh-copy">
Display table can be combined with display table-cell to render a table
without table markup. This can be useful for vertically aligning content
or for auto-calculating a variable amount of table cells.
or for auto-calculating a variable number of table cells.
</p>
<div class="dt bg-black-10 mb2 w-100">
<div class="dtc v-mid pa1 bg-black-10">display</div>
Expand All @@ -129,7 +129,7 @@ <h3 class="f5 book pt4 caps">Display None</h3>
<code class="f6">
&lt;div class="dn"&gt;&lt;/div&gt;
</code>
<p class="measure">
<p class="measure lh-copy">
You can set the display of any element to none by tacking on the <code class="code">dn</code> class.
</p>

Expand Down