Skip to content

Commit

Permalink
fix counter.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@atomiks
atomiks committed Mar 10, 2018
1 parent 5361d22 commit aad97b1
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 58 deletions.
10 changes: 5 additions & 5 deletions docs/3df57813b7ec2de885ea6075ff46ed46.js
View file

Large diffs are not rendered by default.

34 changes: 17 additions & 17 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,23 +76,23 @@
clear: both;
}
</code></pre> <h4>Demo</h4> <p>Resize your browser window to see the proportion of the element remain the same.</p> <div class="snippet-demo"> <div class="snippet-demo__constant-width-to-height-ratio"></div> </div> <h4>Explanation</h4> <p><code>padding-top</code> on the <code>::before</code> pseudo-element causes the height of the element to equal a percentage of its width. <code>100%</code> therefore means the element's height will always be <code>100%</code> of the width, creating a responsive square. </p> <p>This method also allows content to be placed inside the element normally.</p> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 99+% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> </div> <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 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;
</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.countable-section {
counter-reset: counter1;
Expand All @@ -104,7 +104,7 @@
content: counters(counter1, '-') ' ';
font-weight: bold; /* for better visualization on demo */
}
</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> <h4>Explanation</h4> <p>You can create a ordered list using any type of HTML.</p> <ol> <li> <p><code>counter-reset</code> Initializes a counter, the value is the name of the counter. By default, the counter starts in 0. This property can also be used to change its value to any specific number.</p> </li> <li> <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> </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> </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 levels of nested counters.</p> </li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 99+% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#search=counters" target="_blank">https://caniuse.com/#search=counters</a> </li> </ul> </div> <div class="snippet"> <h3 id="custom-scrollbar"><span>Custom scrollbar</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3> <p>Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="custom-scrollbar"&gt;
</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> <h4>Explanation</h4> <p>You can create a ordered list using any type of HTML.</p> <ol> <li> <p><code>counter-reset</code> Initializes a counter, the value is the name of the counter. By default, the counter starts in 0. This property can also be used to change its value to any specific number.</p> </li> <li> <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> </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> </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 levels of nested counters.</p> </li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 98.4% </div> </div> <p><span class="snippet__support-note">✅ No caveats.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=css-counters" target="_blank">https://caniuse.com/#feat=css-counters</a> </li> </ul> </div> <div class="snippet"> <h3 id="custom-scrollbar"><span>Custom scrollbar</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3> <p>Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="custom-scrollbar"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?&lt;/p&gt;
&lt;/div&gt;
</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">/* Document scrollbar */
Expand Down
36 changes: 18 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -417,23 +417,23 @@ <h4>Browser support</h4>
<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 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;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.countable-section {
Expand Down Expand Up @@ -506,13 +506,13 @@ <h4>Explanation</h4>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
98.4%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#search=counters" target="_blank">https://caniuse.com/#search=counters</a>
<a href="https://caniuse.com/#feat=css-counters" target="_blank">https://caniuse.com/#feat=css-counters</a>
</li>
</ul>

Expand Down
36 changes: 18 additions & 18 deletions snippets/counter.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@ Counters are, in essence, variables maintained by CSS whose values may be increm

```html
<section class="countable-section">
<div class="countable-item">
<p>Some item</p>
<div class="countable-section">
<p>First sub item</p>
<p>Second sub item</p>
<p>Third sub item</p>
</div>
</div>
<div class="countable-item">
<p>Second other item</p>
</div>
<div class="countable-item">
<p>Third item</p>
</div>
<div class="countable-item">
<p>Fourth item</p>
</div>
<div class="countable-item">
<p>Some item</p>
<div class="countable-section">
<p>First sub item</p>
<p>Second sub item</p>
<p>Third sub item</p>
</div>
</div>
<div class="countable-item">
<p>Second other item</p>
</div>
<div class="countable-item">
<p>Third item</p>
</div>
<div class="countable-item">
<p>Fourth item</p>
</div>
</section>
```

Expand Down Expand Up @@ -96,6 +96,6 @@ You can create a ordered list using any type of HTML.

<span class="snippet__support-note">✅ No caveats.</span>

* https://caniuse.com/#search=counters
* https://caniuse.com/#feat=css-counters

<!-- tags: visual, other -->

0 comments on commit aad97b1

Please sign in to comment.