andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rebuild docs

Browse Source
This commit is contained in:
atomiks
2018-03-11 08:15:34 +11:00
parent 8081284906
commit 46063f585f
3 changed files with 54 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
index.html
View File

@@ -414,69 +414,45 @@
<div class="snippet">
<h3 id="counter"><span>Counter</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="other"><i data-feather="tag"></i>other</span></h3>
<p>Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;section class="countable-section"&gt;
&lt;div class="countable-item"&gt;
&lt;p&gt;Some item&lt;/p&gt;
&lt;div class="countable-section"&gt;
&lt;p&gt;First sub item&lt;/p&gt;
&lt;p&gt;Second sub item&lt;/p&gt;
&lt;p&gt;Third sub item&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="countable-item"&gt;
&lt;p&gt;Second other item&lt;/p&gt;
&lt;/div&gt;
&lt;div class="countable-item"&gt;
&lt;p&gt;Third item&lt;/p&gt;
&lt;/div&gt;
&lt;div class="countable-item"&gt;
&lt;p&gt;Fourth item&lt;/p&gt;
&lt;/div&gt;
&lt;/section&gt;
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;ul&gt;
&lt;li&gt;List item&lt;/li&gt;
&lt;li&gt;List item&lt;/li&gt;
&lt;li&gt;List item&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.countable-section {
counter-reset: counter1;
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">ul {
counter-reset: counter;
}
.countable-item p {
counter-increment: counter1;
}
.countable-item p:before {
content: counters(counter1, '-') ' ';
font-weight: bold; /* for better visualization on demo */
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo">
<section class="snippet-demo__countable-section">
<div class="snippet-demo__countable-item">
<p>Some item</p>
<div class="snippet-demo__countable-section">
<p>First sub item</p>
<p>Second sub item</p>
<p>Third sub item</p>
</div>
</div>
<div class="snippet-demo__countable-item">
<p>Second other item</p>
</div>
<div class="snippet-demo__countable-item">
<p>Third item</p>
</div>
<div class="snippet-demo__countable-item">
<p>Fourth item</p>
</div>
</section>
<div class="snippet-demo__countable-section">
<ul>
<li>List item</li>
<li>List item</li>
<li>
List item
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
</ul>
</div>
</div>
<style>
.snippet-demo__countable-section {
counter-reset: counter1;
.snippet-demo__countable-section ul {
counter-reset: counter;
list-style-type: none;
}
.snippet-demo__countable-item p {
counter-increment: counter1;
}
.snippet-demo__countable-item p:before {
content: counters(counter1, '.') ' ';
font-weight: bold;
.snippet-demo__countable-section li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
</style>
<h4>Explanation</h4>
@@ -489,12 +465,11 @@
<p><code>counter-increment</code> Used in element that will be countable. Once <code>counter-reset</code> initialized, a counter's value can be increased or decreased.</p>
</li>
<li>
<p><code>counter(variable_name, style)</code> Displays the value of a section counter. Generally used in a <code>content</code> property. This function can recieve two parameters, the first as the name of the counter and the second one can
be <code>decimal</code> or <code>upper-roman</code> (<code>decimal</code> by default).</p>
<p><code>counter(name, style)</code> Displays the value of a section counter. Generally used in a <code>content</code> property. This function can recieve two parameters, the first as the name of the counter and the second one can be <code>decimal</code> or <code>upper-roman</code> (<code>decimal</code> by default).</p>
</li>
<li>
<p><code>counters(variable_name, separator, style)</code> Displays the value of a section counter. Generally used in a <code>content</code> property. This function can recieve three parameters, the first as the name of the counter, the second
one you can include a string which comes after the counter and the third one can be <code>decimal</code> or <code>upper-roman</code> (<code>decimal</code> by default).</p>
<p><code>counters(counter, string, style)</code> Displays the value of a section counter. Generally used in a <code>content</code> property. This function can recieve three parameters, the first as the name of the counter, the second one
you can include a string which comes after the counter and the third one can be <code>decimal</code> or <code>upper-roman</code> (<code>decimal</code> by default).</p>
</li>
<li>
<p>A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the <code>counters()</code> function, separating text can be inserted between different