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

Merge pull request #74 from jbwestphal/counter

Browse Source 
[FEATURE] Add Counter property
This commit is contained in:
Stefan Feješ
2018-03-09 19:45:53 +01:00
committed by GitHub
parent 2f32e99fb7 d9d8c91b4a
commit 4ba1030222
3 changed files with 574 additions and 740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
index.html
View File

@ -34,6 +34,7 @@
<section data-type="visual" class="sidebar__section">
<h4 class="sidebar__section-heading">visual</h4>
<a class="sidebar__link" href="#circle"><span>Circle</span></a>
<a class="sidebar__link" href="#counter"><span>Counter</span></a>
<a class="sidebar__link" href="#custom-scrollbar"><span>Custom scrollbar</span></a>
<a class="sidebar__link" href="#custom-text-selection"><span>Custom text selection</span></a>
<a class="sidebar__link" href="#dynamic-shadow"><span>Dynamic shadow</span></a>
@ -411,6 +412,110 @@
<!-- tags: layout -->
</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></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;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.countable-section {
counter-reset: counter1;
}
.countable-item p {
counter-increment: counter1;
}
.countable-item p:before {
content: counters(counter1, '-') ' ';
font-weight: bold; /* for better visualization on demo */
}
</code></pre>
<h4>Demo</h4>
<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>
</section>
<style>
.countable-section {
counter-reset: counter1;
}
.countable-item p {
counter-increment: counter1;
}
.countable-item p:before {
content: counters(counter1, '.') ' ';
font-weight: bold;
/* for better visualization on demo */
}
</style>
<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>
<!-- tags: visual -->
</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>

1110
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

99
snippets/counter.md Normal file
View File

@ -0,0 +1,99 @@
### Counter
Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
#### HTML
```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>
</section>
```
#### CSS
```css
.countable-section {
counter-reset: counter1;
}
.countable-item p {
counter-increment: counter1;
}
.countable-item p:before {
content: counters(counter1, '-') ' ';
font-weight: bold; /* for better visualization on demo */
}
```
#### Demo
<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>
</section>
<style>
.countable-section {
counter-reset: counter1;
}
.countable-item p {
counter-increment: counter1;
}
.countable-item p:before {
content: counters(counter1, '.') ' ';
font-weight: bold; /* for better visualization on demo */
}
</style>
#### Explanation
You can create a ordered list using any type of HTML.
1. `counter-reset` 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.
2. `counter-increment` Used in element that will be countable. Once `counter-reset` initialized, a counter's value can be increased or decreased.
3. `counter(variable_name, style)` Displays the value of a section counter. Generally used in a `content` property. This function can recieve two parameters, the first as the name of the counter and the second one can be `decimal` or `upper-roman` (`decimal` by default).
4. `counters(variable_name, separator, style)` Displays the value of a section counter. Generally used in a `content` 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 `decimal` or `upper-roman` (`decimal` by default).
5. 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 `counters()` function, separating text can be inserted between different levels of nested counters.
#### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#search=counters
<!-- tags: visual -->