Gerillass: Counter Sass Mixin

Counter

Type: Mixin

@include counter();

* You can call mixins with or without the gls- namespace (e.g. @include gls-counter();).

The Counter Sass mixin allows you to present your content in a listicle format.

The markup should look like the example below:

HTML

<div class="listicle-wrapper counter-start">
  <div class="item counter-item">LISTICLE ITEM 01</div>
  <div class="item counter-item">LISTICLE ITEM 02</div>
  <div class="item counter-item">LISTICLE ITEM 03</div>
</div>

Arguments

Name	Type	Description
`$counter`	string	Sets the style of the counter. The default value is `decimal`. Check out the links at the end of the article to learn more about counter styles.
`$counter-before`	string	Adds a string before the counter.
`$counter-after`	string	Adds a string after the counter.

See the [examples](#examples) to learn how these arguments behave.

Examples

Suppose you have markup like the one below and you want to present it in a listicle format. (The same markup is used for all the examples.)

HTML

<div class="listicle-wrapper counter-start">
  <div class="item counter-item">As an alternative theory, (and because Latin scholars do this sort of thing) someone.</div>
  <div class="item counter-item">The purpose of lorem ipsum is to create a natural looking block of text.</div>
  <div class="item counter-item">More difficult to find examples of lorem ipsum in use before Letraset made it popular.</div>
  <div class="item counter-item">McClintock says he remembers coming across the lorem ipsum passage in a book of old metal.</div>
  <div class="item counter-item">It's difficult to find examples of lorem ipsum in use before Letraset made it.</div>
</div>

Simply call the mixin inside the parent element's selector without passing any arguments.

Sass

.listicle-wrapper {
  @include counter;
}

CSS

.listicle-wrapper.counter-start {
  counter-reset: glsCounter;
}
.listicle-wrapper.counter-start .counter-item::before, .listicle-wrapper.counter-continue .counter-item::before {
  content: counter(glsCounter);
  counter-increment: glsCounter;
}

Result

Now let's highlight the counter a little more. You can pass a declaration block into the mixin to do that easily.

Sass

.listicle-wrapper {
  @include counter {
    color: rgb(0, 85, 187);
    font-size: 1.1em;
    font-weight: bold;
    margin-right: 5px;
  };
}

CSS

.listicle-wrapper.counter-start {
  counter-reset: glsCounter;
}
.listicle-wrapper.counter-start .counter-item::before, .listicle-wrapper.counter-continue .counter-item::before {
  content: counter(glsCounter);
  counter-increment: glsCounter;
  color: rgb(0, 85, 187);
  font-size: 1.1em;
  font-weight: bold;
  margin-right: 5px;
}

Result

Now let's change the counter style from decimal to upper-roman (the default is always decimal).

Sass

.listicle-wrapper {
  @include counter(upper-roman) {
    color: rgb(0, 85, 187);
    font-size: 1.1em;
    font-weight: bold;
    margin-right: 5px;
  };
}

CSS

.listicle-wrapper.counter-start {
  counter-reset: glsCounter;
}
.listicle-wrapper.counter-start .counter-item::before, .listicle-wrapper.counter-continue .counter-item::before {
  content: counter(glsCounter, upper-roman);
  counter-increment: glsCounter;
  color: rgb(0, 85, 187);
  font-size: 1.1em;
  font-weight: bold;
  margin-right: 5px;
}

Result

Now let's try something different.

Sass

.listicle-wrapper {
  @include counter("____") {
    color: rgb(0, 85, 187);
    font-size: 1.1em;
    font-weight: bold;
    margin-right: 5px;
  };
}

CSS

.listicle-wrapper.counter-start {
  counter-reset: glsCounter;
}
.listicle-wrapper.counter-start .counter-item::before, .listicle-wrapper.counter-continue .counter-item::before {
  content: counter(glsCounter)  "____";
  counter-increment: glsCounter;
  color: rgb(0, 85, 187);
  font-size: 1.1em;
  font-weight: bold;
  margin-right: 5px;
}

Result

Now let's pass two values, one for before the counter and the other for after it.

Sass

.listicle-wrapper {
  @include counter("( ", " ) ") {
    color: rgb(0, 85, 187);
    font-size: 1.1em;
    font-weight: bold;
    margin-right: 5px;
  };
}

CSS

.listicle-wrapper.counter-start {
  counter-reset: glsCounter;
}
.listicle-wrapper.counter-start .counter-item::before, .listicle-wrapper.counter-continue .counter-item::before {
  content: "( " counter(glsCounter)  " ) ";
  counter-increment: glsCounter;
  color: rgb(0, 85, 187);
  font-size: 1.1em;
  font-weight: bold;
  margin-right: 5px;
}

Result

Now let's change the counter style to decimal again and add a string after it!

Sass

.listicle-wrapper {
  @include counter(decimal, "th ") {
    color: rgb(0, 85, 187);
    font-size: 1.1em;
    font-weight: bold;
    margin-right: 5px;
  };
}

CSS

.listicle-wrapper.counter-start {
  counter-reset: glsCounter;
}
.listicle-wrapper.counter-start .counter-item::before, .listicle-wrapper.counter-continue .counter-item::before {
  content: counter(glsCounter, decimal)  "th ";
  counter-increment: glsCounter;
  color: rgb(0, 85, 187);
  font-size: 1.1em;
  font-weight: bold;
  margin-right: 5px;
}

Result

Now let's add a string before the counter and pass the decimal-leading-zero value for the counter style.

Sass

.listicle-wrapper {
  @include counter("Section ", decimal-leading-zero) {
    color: rgb(0, 85, 187);
    font-size: 1.1em;
    font-weight: bold;
    margin-right: 5px;
  };
}

CSS

.listicle-wrapper.counter-start {
  counter-reset: glsCounter;
}
.listicle-wrapper.counter-start .counter-item::before, .listicle-wrapper.counter-continue .counter-item::before {
  content: "Section " counter(glsCounter, decimal-leading-zero);
  counter-increment: glsCounter;
  color: rgb(0, 85, 187);
  font-size: 1.1em;
  font-weight: bold;
  margin-right: 5px;
}

Result

Now let's add a string both before and after the counter.

Sass

.listicle-wrapper {
  @include counter("[ Section ", decimal-leading-zero, " ]") {
    color: rgb(0, 85, 187);
    font-size: 1.1em;
    font-weight: bold;
    margin-right: 5px;
  };
}

CSS

.listicle-wrapper.counter-start {
  counter-reset: glsCounter;
}
.listicle-wrapper.counter-start .counter-item::before, .listicle-wrapper.counter-continue .counter-item::before {
  content: "[ Section " counter(glsCounter, decimal-leading-zero)  " ]";
  counter-increment: glsCounter;
  color: rgb(0, 85, 187);
  font-size: 1.1em;
  font-weight: bold;
  margin-right: 5px;
}

Result

The examples shown so far were about how to use this mixin. So where can you go from here? Here is an example!

HTML

<div class="listicle-wrapper counter-start">
  <div class="item counter-item">The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it's seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum.</div>
  <div class="item counter-item">Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</div>
  <div class="item counter-item">Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</div>
  <div class="item counter-item">It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.</div>
  <div class="item counter-item">As an alternative theory, (and because Latin scholars do this sort of thing) someone tracked down a 1914 Latin edition of De Finibus which challenges McClintock's 15th century claims and suggests that the dawn of lorem ipsum was as recent as the 20th century. The 1914 Loeb Classical Library Edition ran out of room on page 34 for the Latin phrase “dolorem ipsum” (sorrow in itself). Thus, the truncated phrase leaves one page dangling with “do-”, while another begins with the now ubiquitous “lorem ipsum”.</div>
</div>

Sass

.listicle-wrapper {
  @include counter {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 7em;
    font-weight: bold;
    font-style: italic;
    font-family: "Jumble", sans-serif;
    transform: translateY(-20%);
    color: rgb(230,230,230);
    line-height: 1;
    z-index: -1;
  };
  .item {
    position: relative;
    padding-left: 50px;
    &:not(:last-child) {
        margin-bottom: 3rem;
    }
  }
}

CSS

.listicle-wrapper.counter-start {
  counter-reset: glsCounter;
}
.listicle-wrapper.counter-start .counter-item::before, .listicle-wrapper.counter-continue .counter-item::before {
  content: counter(glsCounter);
  counter-increment: glsCounter;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 7em;
  font-weight: bold;
  font-style: italic;
  font-family: "Jumble", sans-serif;
  transform: translateY(-20%);
  color: rgb(230, 230, 230);
  line-height: 1;
  z-index: -1;
}
.listicle-wrapper .item {
  position: relative;
  padding-left: 50px;
}
.listicle-wrapper .item:not(:last-child) {
  margin-bottom: 3rem;
}

Result

HTML

<div class="listicle-wrapper counter-start">
  <div class="item counter-item">The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it's seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum.</div>
  <div class="item counter-item">Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</div>
  <div class="item counter-item">Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</div>
</div>
<div class="image-container" style="height: 300px; margin-bottom: 16px; background-image: url(/images/backgrounds/02.jpg); background-size:cover; background-position: center;"></div>
<div class="listicle-wrapper counter-continue">
  <div class="item counter-item">The passage experienced a surge in popularity during the 1960s when Letraset used it on their dry-transfer sheets, and again during the 90s as desktop publishers bundled the text with their software. Today it's seen all around the web; on templates, websites, and stock designs. Use our generator to get your own, or read on for the authoritative history of lorem ipsum.</div>
  <div class="item counter-item">Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</div>
  <div class="item counter-item">Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</div>
</div>

Using CSS Counters

Counter

Arguments

Examples

Related Links

Do you want to join our Slack group?