Tag Cloud Tagging
Today, once again I was lucky enough to encounter a tag cloud layout. This, you know, standard, no frills and design frills. Usually, the construction of this unit became as a result similar to:
Classes w1 , w2 , w3 , etc. They are arranged as the weight of the tag increases and, consequently, increase the font size.
For clarity, I will show you how it looks in a browser:
')
Today I changed this block and got an unexpected result - the naming of classes in accordance with the generally accepted notation for clothing sizes is also convenient in this case ( XS <S <M <L <XL <XXL <XXXL ). If more points are needed, this is solved by adding an element with the necessary number of preceding X characters to the end or the beginning of the list. As a result, the design is perfectly modified, and we rejoice at its acquired semanticity.
<ul class="tags">
<li class="w1"><a href="#">amv</a></li>
<li class="w2"><a href="#">anime</a></li>
<li class="w3"><a href="#">music</a></li>
<li class="w4"><a href="#">tnt</a></li>
<li class="w5"><a href="#"></a></li>
</ul>
Classes w1 , w2 , w3 , etc. They are arranged as the weight of the tag increases and, consequently, increase the font size.
For clarity, I will show you how it looks in a browser:
')
Today I changed this block and got an unexpected result - the naming of classes in accordance with the generally accepted notation for clothing sizes is also convenient in this case ( XS <S <M <L <XL <XXL <XXXL ). If more points are needed, this is solved by adding an element with the necessary number of preceding X characters to the end or the beginning of the list. As a result, the design is perfectly modified, and we rejoice at its acquired semanticity.
<ul class="tags">
<li class="s"><a href="#">amv</a></li>
<li class="m"><a href="#">anime</a></li>
<li class="l"><a href="#">music</a></li>
<li class="xl"><a href="#">tnt</a></li>
<li class="xxl"><a href="#"></a></li>
</ul>
Source: https://habr.com/ru/post/50212/
All Articles