You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -121,7 +121,7 @@ <h1 class="typl8-delta center capsify">Table of Contents</h1>
121
121
<h1class="gamma section-title"><aclass="perma-anchor" href="#base-type">§</a> 1.1 Base Type</h1>
122
122
</header>
123
123
124
-
<p>For a solid base we use <ahref="https://github.com/typeplate/starter-kit/blob/master/scss/_typeplate-styles.scss#L4-L10">default font settings</a> to allow elements to display in their natural size determined by the browser's default stylesheet. This makes for <ahref="https://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html">lighter CSS and more flexibility</a> in the markup you choose to use. We also ensure united values for line-heights are never used per the <ahref="http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights" rel="external">recommendations of Eric Meyer</a>.</p>
124
+
<p>For a solid base we use <ahref="https://github.com/typeplate/starter-kit/blob/master/scss/_typeplate-styles.scss#L4-L10">default font settings</a> to allow elements to display in their natural size determined by the browser's default stylesheet. This makes for <ahref="https://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html">lighter CSS and more flexibility</a> in the markup you choose to use. We also ensure unit values for line-heights are never used per the <ahref="http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights" rel="external">recommendations of Eric Meyer</a>.</p>
<p>Just like in print, don’t use the darkest black available in your body text (<codestyle="color:#000">#000</code>). Instead, go for something softer, like <codestyle="color:#444">#444</code>. You can use a slightly darker color for titles like (<codestyle="color:#222">#222</code>) for example. Since these values are considered a de facto standard in practice, they're not necessarily ordained by law.</p>
<p>With the <ahref="http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range"><code>unicode-range</code></a> property we can avoid using verbose markup and only target the characters we like according to the unicode unique identifier. We also harness the power of the <code>%placeholder</code> in Sass allowing like minded selectors to string together this shared property in a DRY way from one single declaration. Copy and paste the Sass below into <ahref="http://codepen.io/pen" rel="external">Codepen</a> and check out the output for yourself. Hint: create multiple classes.</p>
<dd>And it gets a definition too, which is this line</dd>
434
+
<dd>This is a 2<sup>nd</sup> definition for a single term. A <code>dt</code> may be followed by multiple <code>dd</code>s.</dd>
435
+
</dl></code></pre>
436
+
</figure>
437
+
398
438
<h3class="typl8-delta">b) Inline Definitions</h3>
399
439
<p>The second format for definition lists is lining. This style is more robust, with support for multiple terms defined by a single definition, and applies proper punctuation (: ,) where appropriate:</p>
<dd class="micro">And it gets a definition too, which is this line</dd>
461
+
<dd class="micro"> this is a 2<sup>nd</sup> definition for a single term.</dd>
462
+
463
+
<dt><b>Term</b></dt>
464
+
465
+
<dt><b>Other Defined Term</b></dt>
466
+
<dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd>
<p>The third format for definition lists is dictionary. This style is more a formal, applying proper punctuation where necessary and includes ordinal indicators:</p>
<dd>And it gets a definition too, which is this line</dd>
493
+
<dd> this is a 2<sup>nd</sup> definition for a single term.</dd>
494
+
495
+
<dt><b>Term</b></dt>
496
+
497
+
<dt><b>Other Defined Term</b></dt>
498
+
<dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd>
Copy file name to clipboardExpand all lines: templates/content/base-type.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,6 @@
3
3
<h1class="gamma section-title"><aclass="perma-anchor" href="#base-type">§</a> 1.1 Base Type</h1>
4
4
</header>
5
5
6
-
<p>For a solid base we use <ahref="https://github.com/typeplate/starter-kit/blob/master/scss/_typeplate-styles.scss#L4-L10">default font settings</a> to allow elements to display in their natural size determined by the browser's default stylesheet. This makes for <ahref="https://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html">lighter CSS and more flexibility</a> in the markup you choose to use. We also ensure united values for line-heights are never used per the <ahref="http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights" rel="external">recommendations of Eric Meyer</a>.</p>
6
+
<p>For a solid base we use <ahref="https://github.com/typeplate/starter-kit/blob/master/scss/_typeplate-styles.scss#L4-L10">default font settings</a> to allow elements to display in their natural size determined by the browser's default stylesheet. This makes for <ahref="https://www.filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html">lighter CSS and more flexibility</a> in the markup you choose to use. We also ensure unit values for line-heights are never used per the <ahref="http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights" rel="external">recommendations of Eric Meyer</a>.</p>
<p>Just like in print, don’t use the darkest black available in your body text (<codestyle="color:#000">#000</code>). Instead, go for something softer, like <codestyle="color:#444">#444</code>. You can use a slightly darker color for titles like (<codestyle="color:#222">#222</code>) for example. Since these values are considered a de facto standard in practice, they're not necessarily ordained by law.</p>
<dd>And it gets a definition too, which is this line</dd>
27
+
<dd>This is a 2<sup>nd</sup> definition for a single term. A <code>dt</code> may be followed by multiple <code>dd</code>s.</dd>
28
+
</dl></code></pre>
29
+
</figure>
30
+
20
31
<h3class="typl8-delta">b) Inline Definitions</h3>
21
32
<p>The second format for definition lists is lining. This style is more robust, with support for multiple terms defined by a single definition, and applies proper punctuation (: ,) where appropriate:</p>
<dd class="micro">And it gets a definition too, which is this line</dd>
54
+
<dd class="micro"> this is a 2<sup>nd</sup> definition for a single term.</dd>
55
+
56
+
<dt><b>Term</b></dt>
57
+
58
+
<dt><b>Other Defined Term</b></dt>
59
+
<dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd>
<p>The third format for definition lists is dictionary. This style is more a formal, applying proper punctuation where necessary and includes ordinal indicators:</p>
<dd>And it gets a definition too, which is this line</dd>
86
+
<dd> this is a 2<sup>nd</sup> definition for a single term.</dd>
87
+
88
+
<dt><b>Term</b></dt>
89
+
90
+
<dt><b>Other Defined Term</b></dt>
91
+
<dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd>
0 commit comments