Skip to content

Commit

Permalink
fix: Clean counter snippet
Browse files Browse the repository at this point in the history
  • Loading branch information
@equinusocio
equinusocio committed Mar 10, 2018
1 parent 9cf3ab8 commit c6fadff
Showing 1 changed file with 35 additions and 57 deletions.
92 changes: 35 additions & 57 deletions snippets/counter.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,77 +5,55 @@ Counters are, in essence, variables maintained by CSS whose values may be increm
#### 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>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
```

#### CSS

```css
.countable-section {
counter-reset: counter1;
}
.countable-item p {
counter-increment: counter1;
ul {
counter-reset: counter;
}
.countable-item p:before {
content: counters(counter1, '-') ' ';
font-weight: bold; /* for better visualization on demo */

li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
```

#### Demo

<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-item p {
counter-increment: counter1;
}
.snippet-demo__countable-item p:before {
content: counters(counter1, '.') ' ';
font-weight: bold;
}
.snippet-demo__countable-section ul {
counter-reset: counter;
list-style-type: none;
}

.snippet-demo__countable-section li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
</style>

#### Explanation
Expand All @@ -86,7 +64,7 @@ You can create a ordered list using any type of HTML.

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).
3. `counter(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).

Expand Down

0 comments on commit c6fadff

Please sign in to comment.