Simplify - Articles tagged with CSSPersonal website of Saša Jovanićhttps://www.simplify.ba/articles/tags/css/2021-12-17T19:12:00+01:00Saša JovanićCSS custom properties (aka CSS variables)https://www.simplify.ba/articles/2016/03/24/css-variables/2016-03-24T09:35:20+01:002016-03-24T12:40:04+01:00Saša Jovanić<p><abbr title="Cascading Style Sheets">CSS</abbr> custom properties (often named as <abbr title="Cascading Style Sheets">CSS</abbr> variables) finally landed in latest Chrome and Safari. Here are some benefits when using them instead of <abbr title="Cascading Style Sheets">CSS</abbr> preprocessors.</p>
<h2 id="intro">Intro</h2>
<p>Here is basic <abbr title="Cascading Style Sheets">CSS</abbr> custom properties usage example (they must start with two dashes):</p>
<pre class="highlight css"><code><span class="nd">:root</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#F00</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">div</span><span class="nc">.red</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--main-fg-color</span><span class="p">);</span> <span class="p">}</span>
</code></pre>
<p>At the first glance there seems to be no benefit of using <abbr title="Cascading Style Sheets">CSS</abbr> custom properties instead of <abbr title="Cascading Style Sheets">CSS</abbr> preprocessors. However, <abbr title="Cascading Style Sheets">CSS</abbr> custom properties are more powerful.</p>
<h2 id="scope">Scope</h2>
<p><abbr title="Cascading Style Sheets">CSS</abbr> custom properties have same scope as standard <abbr title="Cascading Style Sheets">CSS</abbr>:</p>
<pre class="highlight html"><code><span class="nt"><style></span>
<span class="nd">:root</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span>
<span class="o">*</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--main-fg-color</span><span class="p">);</span> <span class="p">}</span>
<span class="nf">#d1</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#F00</span><span class="p">;</span> <span class="p">}</span>
<span class="nf">#d2</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#0F0</span><span class="p">;</span> <span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"d1"</span><span class="nt">></span>
<span class="nt"><p></span>div 1<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"d2"</span><span class="nt">></span>
<span class="nt"><p></span>div 2<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"d3"</span><span class="nt">></span>
<span class="nt"><p></span>div 3<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre>
<p>Texts <code>div 1</code> and <code>div 3</code> will become red and <code>div 2</code> green. This also means that you can change <abbr title="Cascading Style Sheets">CSS</abbr> custom properties based on media queries, user language in browser (using <code>:root:lang(en) {...}</code> for example), etc…</p>
<h2 id="fallback">Fallback</h2>
<p>It's possible to create fallback in the case that <abbr title="Cascading Style Sheets">CSS</abbr> custom property is not declared. In following case, if <code>--alert-color</code> is not present, #f00 is used:</p>
<pre class="highlight css"><code><span class="nc">.alert</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--alert-color</span><span class="p">,</span> <span class="m">#F00</span><span class="p">);</span> <span class="p">}</span>
</code></pre>
<h2 id="calculations">Calculations</h2>
<p>It's possible to use <abbr title="Cascading Style Sheets">CSS</abbr> custom propertys in <abbr title="Cascading Style Sheets">CSS</abbr> calculations:</p>
<pre class="highlight css"><code><span class="nd">:root</span> <span class="p">{</span>
<span class="py">--default-margin</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="py">--wide-margin</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--default-margin</span><span class="p">)</span> <span class="err">*</span> <span class="m">3</span><span class="p">);</span>
<span class="py">--bg-color</span><span class="p">:</span> <span class="m">#ccc</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.block</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span><span class="n">to</span> <span class="nb">top</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--bg-color</span><span class="p">),</span> <span class="m">#fff</span><span class="p">);</span> <span class="p">}</span>
</code></pre>
<h2 id="changing-with-javascript">Changing with JavaScript</h2>
<p>Because <abbr title="Cascading Style Sheets">CSS</abbr> custom properties can change at runtime, we can also change then with JavaScript:</p>
<pre class="highlight javascript"><code><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">"html"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">setProperty</span><span class="p">(</span><span class="s1">'--main-fg-color'</span><span class="p">,</span> <span class="s1">'#CCC'</span><span class="p">);</span>
</code></pre>
<h2 id="theming">Theming</h2>
<p><abbr title="Cascading Style Sheets">CSS</abbr> custom properties can reside in a separate <abbr title="Cascading Style Sheets">CSS</abbr> file. That means that you can include different files based on user preference and change how your site looks and feel.</p>
<h2 id="supported-browsers">Supported browsers</h2>
<ul>
<li>Firefox since version 31 (July 22, 2014)</li>
<li>Chrome since version 49 (March 2, 2016)</li>
<li>Safari version 9.1 (March 21, 2016) - iOS 9.3</li>
<li>IE/Edge: no support at all, status is "Under Consideration" for Edge</li>
</ul>
<p>For more details visit <a href="http://caniuse.com/#feat=css-variables">caniuse</a>. As usual, we must wait for Microsoft.</p>
<h2 id="postcss-plugins">PostCSS plugins</h2>
<p>There are two <a href="http://postcss.org">PostCSS</a> plugins that can transform <abbr title="Cascading Style Sheets">CSS</abbr> custom properties into <abbr title="Cascading Style Sheets">CSS</abbr> that is usable with browsers that do not support <abbr title="Cascading Style Sheets">CSS</abbr> custom properties. Both plugins have option <code>{preserve: true|computed}</code> that do not remove your <abbr title="Cascading Style Sheets">CSS</abbr> custom properties from output, so you can use them in browsers that do support <abbr title="Cascading Style Sheets">CSS</abbr> custom properties.</p>
<p><a href="https://github.com/postcss/postcss-custom-properties">postcss-custom-preperties</a> is official PostCSS plugin. It's limited only to <code>:root</code> selector and can not transform <code>var()</code> in media queries or selectors.</p>
<p><a href="https://github.com/MadLittleMods/postcss-css-variables">postcss-css-variables</a> claims to do more, however if you try some transformations in their <a href="https://madlittlemods.github.io/postcss-css-variables/playground/">playground</a> you can see limitations. Try this <abbr title="Cascading Style Sheets">CSS</abbr> as input:</p>
<pre class="highlight css"><code><span class="nd">:root</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span>
<span class="o">*</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--main-fg-color</span><span class="p">);</span> <span class="p">}</span>
<span class="nf">#d1</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#F00</span><span class="p">;</span> <span class="p">}</span>
<span class="nf">#d2</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#0F0</span><span class="p">;</span> <span class="p">}</span>
</code></pre>
<p>Result without preservation:</p>
<pre class="highlight css"><code><span class="o">*</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0F0</span><span class="p">;</span> <span class="p">}</span>
</code></pre>
<p>Result with preservation:</p>
<pre class="highlight css"><code><span class="nd">:root</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#000</span><span class="p">;</span> <span class="p">}</span>
<span class="o">*</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0F0</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--main-fg-color</span><span class="p">);</span> <span class="p">}</span>
<span class="nf">#d1</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#F00</span><span class="p">;</span> <span class="p">}</span>
<span class="nf">#d2</span> <span class="p">{</span> <span class="py">--main-fg-color</span><span class="p">:</span> <span class="m">#0F0</span><span class="p">;</span> <span class="p">}</span>
</code></pre>
<p>In both cases fallback color for browsers that do not support <abbr title="Cascading Style Sheets">CSS</abbr> custom properties is last value that we used for <code>--main-fg-color</code>. Also, there is no fallback color for #d1 and #d3. That is just not possible to implement, because at the context of those plugins they do not know the <abbr title="Document Object Model">DOM</abbr>.</p>
<p>I didn't experiment a lot with any of those plugins, but it looks that if you are aware of their limitations while writing <abbr title="Cascading Style Sheets">CSS</abbr> custom properties, they can be useful.</p>
<h2 id="links">Links</h2>
<ul>
<li><a href="https://drafts.csswg.org/css-variables"><abbr title="Cascading Style Sheets">CSS</abbr> Custom Properties for Cascading Variables Module level 1</a></li>
</ul>
Creating CSS rules in JavaScripthttps://www.simplify.ba/articles/2016/02/17/creating-css-rules-in-javascript/2016-02-17T23:13:00+01:002016-02-19T11:38:21+01:00Saša Jovanić<p>Sometimes you want to insert complete <abbr title="Cascading Style Sheets">CSS</abbr> rules into specific page with JavaScript. Here is how.</p>
<p>JavaScript class (use Babel or something to transpile <abbr title="ECMA Script 6">ES6</abbr> code into <abbr title="ECMA Script 5">ES5</abbr>):</p>
<pre class="highlight javascript"><code><span class="kr">class</span> <span class="nx">CSSRule</span> <span class="p">{</span>
<span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">sheet</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Create the <style> tag</span>
<span class="kd">let</span> <span class="nx">style</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'style'</span><span class="p">);</span>
<span class="c1">// Add a media</span>
<span class="nx">style</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'media'</span><span class="p">,</span> <span class="s1">'screen'</span><span class="p">);</span>
<span class="c1">// WebKit</span>
<span class="nx">style</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="s1">''</span><span class="p">));</span>
<span class="c1">// Add the <style> element to the page</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">style</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">style</span><span class="p">.</span><span class="nx">sheet</span><span class="p">;</span>
<span class="p">})();</span>
<span class="p">}</span>
<span class="nx">addCSSRule</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">rules</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="s1">'insertRule'</span> <span class="k">in</span> <span class="k">this</span><span class="p">.</span><span class="nx">sheet</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">sheet</span><span class="p">.</span><span class="nx">insertRule</span><span class="p">(</span><span class="s2">`selector { </span><span class="p">${</span><span class="nx">rules</span><span class="p">}</span><span class="s2"> }`</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">sheet</span><span class="p">.</span><span class="nx">cssRules</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="s1">'addRule'</span> <span class="k">in</span> <span class="nx">sheet</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">sheet</span><span class="p">.</span><span class="nx">addRule</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">rules</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">sheet</span><span class="p">.</span><span class="nx">cssRules</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">title</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#post-title'</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">style</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">CSSRule</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">title</span> <span class="o">&&</span> <span class="nx">$</span><span class="p">(</span><span class="nx">title</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'color'</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">style</span><span class="p">.</span><span class="nx">addCSSRule</span><span class="p">(</span><span class="s1">'.post-header .title h1'</span><span class="p">,</span>
<span class="s2">`color: </span><span class="p">${</span><span class="nx">$</span><span class="p">(</span><span class="nx">title</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'color'</span><span class="p">)}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre>
<p>Basically, we read <code>data</code> attribute of an element and use that value as color of <code>h1</code> element. Code above will insert following code in your page:</p>
<pre class="highlight html"><code><span class="nt"><style </span><span class="na">media=</span><span class="s">"screen"</span><span class="nt">></span>
<span class="nc">.post-header</span> <span class="nc">.title</span> <span class="nt">h1</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#def</span><span class="p">;</span> <span class="p">}</span>
<span class="nt"></style></span>
</code></pre>
<p>If you already have <code><style></code> tag on your page, this code will insert that <abbr title="Cascading Style Sheets">CSS</abbr> rule at the end of that tag.</p>
Building categories page on this sitehttps://www.simplify.ba/articles/2016/02/03/building-category-page/2016-02-03T19:14:00+01:002016-02-17T15:36:40+01:00Saša Jovanić<p>This article explains how I build "<a href="/categories">Categories</a>" page on this site. Nothing special, really.</p>
<h2 id="first-version">First version</h2>
<p>First version of '<a href="/categories">Categories</a>' (or 'tags') page on this site was build with flex-box layout. Every "box" had a category logo, category name and amount of articles in that category. Unfortunately, that doesn't work well for me. Not only that it turns out to be hard to maintain (need to add new image for every new category), but there are also legal issues. Sometimes, logo's are copyrighted and you can not use them without permission. Sometimes, you must use logo as is, without converting it to single color version (looks better then grid with 20+ logos in different colors).</p>
<h2 id="css-columns"><abbr title="Cascading Style Sheets">CSS</abbr> columns</h2>
<p>After some thinking, I figured out that something like a alphabetic index works best for this and the best way to do it is with <abbr title="Cascading Style Sheets">CSS</abbr> columns. Here is how it looks like in Middleman <abbr title="Embedded Ruby">erb</abbr> template:</p>
<pre class="highlight erb"><code> <span class="nt"><div</span> <span class="na">id=</span><span class="s">"category-list"</span><span class="nt">></span>
<span class="cp"><%</span> <span class="p">(</span><span class="s1">'A'</span><span class="p">.</span><span class="nf">.</span><span class="s1">'Z'</span><span class="p">).</span><span class="nf">to_a</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">letter</span><span class="o">|</span> <span class="cp">-%></span>
<span class="cp"><%</span> <span class="n">letter_hash</span> <span class="o">=</span> <span class="n">blog</span><span class="p">.</span><span class="nf">tags</span><span class="p">.</span><span class="nf">select</span> <span class="p">{</span><span class="o">|</span><span class="n">k</span><span class="p">,</span><span class="n">v</span><span class="o">|</span> <span class="n">k</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nf">upcase</span> <span class="o">==</span> <span class="n">letter</span><span class="p">}</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">unless</span> <span class="n">letter_hash</span><span class="p">.</span><span class="nf">keys</span><span class="p">.</span><span class="nf">empty?</span> <span class="cp">%></span>
<span class="nt"><div></span>
<span class="nt"><h2></span><span class="cp"><%=</span> <span class="n">letter</span> <span class="cp">-%></span><span class="nt"></h2></span>
<span class="nt"><ul></span>
<span class="cp"><%</span> <span class="n">letter_hash</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">tag</span><span class="p">,</span> <span class="n">articles</span><span class="o">|</span> <span class="cp">%></span>
<span class="nt"><li></span>
<span class="cp"><%=</span> <span class="n">link_to</span> <span class="s2">"</span><span class="si">#{</span><span class="n">tag</span><span class="si">}</span><span class="s2"> (</span><span class="si">#{</span><span class="n">articles</span><span class="p">.</span><span class="nf">size</span><span class="si">}</span><span class="s2">)"</span><span class="p">,</span> <span class="n">tag_path</span><span class="p">(</span><span class="n">tag</span><span class="p">),</span>
<span class="ss">class: </span><span class="s2">"category category-"</span><span class="o">+</span><span class="n">tag</span><span class="p">.</span><span class="nf">downcase</span><span class="p">.</span><span class="nf">gsub</span><span class="p">(</span><span class="s1">' '</span><span class="p">,</span><span class="s1">'_'</span><span class="p">)</span> <span class="cp">%></span>
<span class="nt"></li></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">-%></span>
<span class="nt"></div></span>
</code></pre>
<p>Here is final <abbr title="Sassy CSS">SCSS</abbr>:</p>
<pre class="highlight scss"><code><span class="nt">div</span><span class="nn">#category-list</span> <span class="p">{</span>
<span class="nl">columns</span><span class="p">:</span> <span class="m">275px</span><span class="p">;</span>
<span class="nl">column-gap</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">15px</span> <span class="m">20px</span> <span class="m">50px</span><span class="p">;</span>
<span class="nt">div</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">20px</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">30px</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">break-inside</span><span class="p">:</span> <span class="nb">avoid</span><span class="p">;</span>
<span class="nl">min-height</span><span class="p">:</span> <span class="m">8rem</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="nl">content</span><span class="p">:</span> <span class="nf">attr</span><span class="p">(</span><span class="n">data-letter</span><span class="p">);</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">6rem</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">6rem</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">105px</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$simplify-grey</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">900</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="mi">.10</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">ul</span> <span class="p">{</span>
<span class="nl">z-index</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span>
<span class="nl">list-style</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">10px</span> <span class="m">0</span> <span class="m">0</span> <span class="m">-75px</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">1</span><span class="mi">.5rem</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">underline</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre>
<p>Most important parts:</p>
<ul>
<li>By specifying <code>columns</code> in pixel I'm sure that browser will calculate number of columns on the page and I don't need to use any @media queries for this.</li>
<li>Every <code>div</code> block will not brake when browser create columns on the page.</li>
<li>Every <code>div</code> block have minimal height of 8 rem's. Reason for this is that letter indicator size is 6rem and <code>display</code> is set to <code>flex</code>. In all browsers except IE/Edge 7rem was enough.</li>
<li>h2 element is set behind the list with <code>z-index</code>, and with opacity of 0.1 for better effect. Width is 105px, a bit wider then letter 'W'.</li>
<li>List have negative left margin and is positioned above h2 element.</li>
<li>Link in the list is a bit bigger then normal text on the site, and typeface is bold.</li>
</ul>