The latest articles on DEV Community by FSCSS tutorial (@fscss-ttr). https://dev.to/fscss-ttr https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2605174%2F8c1f0686-e922-4c08-b66f-08e912d8add1.png https://dev.to/fscss-ttr en FSCSS tutorial Sat, 03 Oct 2026 11:41:51 +0000 https://dev.to/fscss/i-built-a-lightweight-runtime-for-fscss-property-shorthands-with-a-js-api-511o https://dev.to/fscss/i-built-a-lightweight-runtime-for-fscss-property-shorthands-with-a-js-api-511o <p>Full FSCSS can compile <code>@define</code>, arrays, <code>pattern()</code>, imports, and more. That’s powerful — and heavier than you need when all you want is <strong><code>size</code></strong>, <strong><code>mx</code> / <code>px</code></strong>, <strong><code>rounded</code></strong>, <strong><code>bg</code></strong>, <strong><code>stack</code></strong>, or <strong><code>inset: ratio-fit(16/9)</code></strong> in the browser.</p> <p>So I shipped <strong><a href="https://github.com/Figsh/fscss-props" rel="noopener noreferrer">fscss-props</a></strong>: a <strong>properties-only</strong> runtime. It expands those shorthands at runtime and exposes a small DOM API. It does <strong>not</strong> parse advanced FSCSS features, so it stays fast even when the DOM is large.</p> <p><strong>Repo:</strong> <a href="https://github.com/Figsh/fscss-props" rel="noopener noreferrer">github.com/Figsh/fscss-props</a><br><br> <strong>Shorthand map (same names as 1.2.5):</strong> <a href="https://fscss.devtem.org/shorthands" rel="noopener noreferrer">fscss.devtem.org/shorthands</a><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/fscss-props@1.0.0/fscss-props.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> </code></pre> </div> <p>Load it <strong>early in <code>&lt;head&gt;</code></strong> (no <code>defer</code>) if the first paint should already see expanded CSS.</p> <h2> What it does </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>In CSS</th> <th>In JS</th> </tr> </thead> <tbody> <tr> <td> <code>&lt;style&gt;</code> blocks rewritten in place</td> <td><code>el.fscssProp.mx = '1rem'</code></td> </tr> <tr> <td>Inline <code>style="size: 80px; …"</code> </td> <td> <code>el.fscssProp.size = null</code> removes owned longhands</td> </tr> <tr> <td> <code>link[data-fscss]</code> stylesheets</td> <td><code>el.fscssPropText = 'stack: 12px; p: 16px'</code></td> </tr> </tbody> </table></div> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.box</span> <span class="p">{</span> <span class="py">mx</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">size</span><span class="p">:</span> <span class="m">200px</span> <span class="m">100px</span><span class="p">;</span> <span class="py">rounded-t</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span> <span class="py">center</span><span class="p">:</span> <span class="n">true</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.vid</span> <span class="p">{</span> <span class="py">inset</span><span class="p">:</span> <span class="n">ratio-fit</span><span class="p">(</span><span class="m">16</span> <span class="p">/</span> <span class="m">9</span><span class="p">);</span> <span class="c">/* parent: container-type: size */</span> <span class="p">}</span> </code></pre> </div> <p>Not included on purpose: <code>@define</code>, <code>@arr</code>, <code>pattern()</code>, module <code>@import</code>. For those, use the full <a href="https://www.npmjs.com/package/fscss" rel="noopener noreferrer">FSCSS</a> CLI/runtime and ship plain CSS.</p> <h2> Why this matters when you use JS </h2> <p>Utilities in pure CSS are fine until <strong>state</strong> drives the UI: theme, density, layout mode, open/closed. Then you either:</p> <ul> <li>toggle classes and keep a big CSS file, or </li> <li>set <code>element.style</code> with longhands and remember every property you touched.</li> </ul> <p><strong>fscss-props</strong> sits in between:</p> <ol> <li> <strong>Same names as design CSS</strong> — <code>px</code>, <code>rounded</code>, <code>stack</code>, not only <code>paddingLeft</code>.</li> <li> <strong>Ownership</strong> — setting a shorthand applies longhands; setting it to <code>null</code> clears <em>those</em> longhands, not random inline noise.</li> <li> <strong>Bulk modes</strong> — <code>fscssPropText</code> replaces the whole FSCSS-owned set (great for <code>stack</code> vs <code>cols</code> vs <code>hstack</code> without leftover <code>display</code>/<code>gap</code>).</li> <li> <strong>Small surface</strong> — no stylesheet AST for the whole language; property table + observers, so it’s aimed at large DOMs and frequent updates. </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">el</span><span class="p">.</span><span class="nx">fscssProp</span><span class="p">.</span><span class="nx">mx</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">1rem</span><span class="dl">'</span><span class="p">;</span> <span class="nx">el</span><span class="p">.</span><span class="nx">fscssProp</span><span class="p">[</span><span class="dl">'</span><span class="s1">ratio-fit</span><span class="dl">'</span><span class="p">]</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">16/9</span><span class="dl">'</span><span class="p">;</span> <span class="nx">el</span><span class="p">.</span><span class="nx">fscssProp</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">red</span><span class="dl">'</span><span class="p">;</span> <span class="c1">// normal CSS works too</span> <span class="nx">el</span><span class="p">.</span><span class="nx">fscssProp</span><span class="p">.</span><span class="nx">mx</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="c1">// remove</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">el</span><span class="p">.</span><span class="nx">fscssPropText</span><span class="p">);</span> </code></pre> </div> <h2> Example: vanilla store → styles </h2> <p>A tiny subscribe store writes one <code>fscssPropText</code> blob whenever padding, radius, or theme changes:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/fscss-props@1.0.0/fscss-props.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="py">m</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="py">min-h</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span> <span class="py">center</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="py">p</span><span class="p">:</span> <span class="m">24px</span><span class="p">;</span> <span class="py">bg</span><span class="p">:</span> <span class="m">#0b1020</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#e6edf7</span><span class="p">;</span> <span class="py">ff</span><span class="p">:</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.panel</span> <span class="p">{</span> <span class="py">w</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="py">max-w</span><span class="p">:</span> <span class="m">420px</span><span class="p">;</span> <span class="py">stack</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="py">p</span><span class="p">:</span> <span class="m">24px</span><span class="p">;</span> <span class="py">bg</span><span class="p">:</span> <span class="m">#121a30</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#22304f</span><span class="p">;</span> <span class="py">rounded</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.preview</span> <span class="p">{</span> <span class="py">min-h</span><span class="p">:</span> <span class="m">120px</span><span class="p">;</span> <span class="py">center</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="py">fw</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span> <span class="py">trans</span><span class="p">:</span> <span class="n">all</span> <span class="m">0.15s</span> <span class="n">ease</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* …labels, range inputs, buttons… */</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"panel"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"preview"</span> <span class="na">id=</span><span class="s">"box"</span><span class="nt">&gt;</span>Preview<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;label&gt;</span>Padding <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"pad"</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">min=</span><span class="s">"8"</span> <span class="na">max=</span><span class="s">"40"</span> <span class="na">value=</span><span class="s">"16"</span><span class="nt">&gt;&lt;/label&gt;</span> <span class="nt">&lt;label&gt;</span>Radius <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"rad"</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">min=</span><span class="s">"0"</span> <span class="na">max=</span><span class="s">"32"</span> <span class="na">value=</span><span class="s">"12"</span><span class="nt">&gt;&lt;/label&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bar"</span> <span class="na">id=</span><span class="s">"themes"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-bg=</span><span class="s">"#6366f1"</span> <span class="na">aria-pressed=</span><span class="s">"true"</span><span class="nt">&gt;</span>Indigo<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-bg=</span><span class="s">"#0ea5e9"</span><span class="nt">&gt;</span>Sky<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-bg=</span><span class="s">"#10b981"</span><span class="nt">&gt;</span>Emerald<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;pre</span> <span class="na">id=</span><span class="s">"out"</span><span class="nt">&gt;&lt;/pre&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="kd">function</span> <span class="nf">createStore</span><span class="p">(</span><span class="nx">initial</span><span class="p">)</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">initial</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">subs</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Set</span><span class="p">();</span> <span class="k">return</span> <span class="p">{</span> <span class="na">get</span><span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">state</span><span class="p">,</span> <span class="nf">set</span><span class="p">(</span><span class="nx">patch</span><span class="p">)</span> <span class="p">{</span> <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">state</span><span class="p">,</span> <span class="p">...</span><span class="nx">patch</span> <span class="p">};</span> <span class="nx">subs</span><span class="p">.</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">fn</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nf">fn</span><span class="p">(</span><span class="nx">state</span><span class="p">));</span> <span class="p">},</span> <span class="nf">subscribe</span><span class="p">(</span><span class="nx">fn</span><span class="p">)</span> <span class="p">{</span> <span class="nx">subs</span><span class="p">.</span><span class="nf">add</span><span class="p">(</span><span class="nx">fn</span><span class="p">);</span> <span class="nf">fn</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span> <span class="k">return </span><span class="p">()</span> <span class="o">=&gt;</span> <span class="nx">subs</span><span class="p">.</span><span class="k">delete</span><span class="p">(</span><span class="nx">fn</span><span class="p">);</span> <span class="p">},</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">const</span> <span class="nx">box</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">box</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">out</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">out</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">store</span> <span class="o">=</span> <span class="nf">createStore</span><span class="p">({</span> <span class="na">pad</span><span class="p">:</span> <span class="mi">16</span><span class="p">,</span> <span class="na">radius</span><span class="p">:</span> <span class="mi">12</span><span class="p">,</span> <span class="na">bg</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#6366f1</span><span class="dl">'</span> <span class="p">});</span> <span class="nx">store</span><span class="p">.</span><span class="nf">subscribe</span><span class="p">((</span><span class="nx">s</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">box</span><span class="p">.</span><span class="nx">fscssPropText</span> <span class="o">=</span> <span class="p">[</span> <span class="s2">`p: </span><span class="p">${</span><span class="nx">s</span><span class="p">.</span><span class="nx">pad</span><span class="p">}</span><span class="s2">px`</span><span class="p">,</span> <span class="s2">`rounded: </span><span class="p">${</span><span class="nx">s</span><span class="p">.</span><span class="nx">radius</span><span class="p">}</span><span class="s2">px`</span><span class="p">,</span> <span class="s2">`bg: </span><span class="p">${</span><span class="nx">s</span><span class="p">.</span><span class="nx">bg</span><span class="p">}</span><span class="s2">`</span><span class="p">,</span> <span class="dl">'</span><span class="s1">color: #fff</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">center: true</span><span class="dl">'</span><span class="p">,</span> <span class="p">].</span><span class="nf">join</span><span class="p">(</span><span class="dl">'</span><span class="s1">; </span><span class="dl">'</span><span class="p">);</span> <span class="nx">out</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">box</span><span class="p">.</span><span class="nx">fscssPropText</span><span class="p">.</span><span class="nf">replace</span><span class="p">(</span><span class="sr">/; /g</span><span class="p">,</span> <span class="dl">'</span><span class="s1">;</span><span class="se">\n</span><span class="dl">'</span><span class="p">);</span> <span class="p">});</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">pad</span><span class="dl">'</span><span class="p">).</span><span class="nx">oninput</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">store</span><span class="p">.</span><span class="nf">set</span><span class="p">({</span> <span class="na">pad</span><span class="p">:</span> <span class="o">+</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span> <span class="p">});</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">rad</span><span class="dl">'</span><span class="p">).</span><span class="nx">oninput</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">store</span><span class="p">.</span><span class="nf">set</span><span class="p">({</span> <span class="na">radius</span><span class="p">:</span> <span class="o">+</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span> <span class="p">});</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">themes</span><span class="dl">'</span><span class="p">).</span><span class="nx">onclick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">btn</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nf">closest</span><span class="p">(</span><span class="dl">'</span><span class="s1">button</span><span class="dl">'</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">btn</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="p">[...</span><span class="nx">e</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">.</span><span class="nx">children</span><span class="p">].</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">b</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">b</span><span class="p">.</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">aria-pressed</span><span class="dl">'</span><span class="p">,</span> <span class="nx">b</span> <span class="o">===</span> <span class="nx">btn</span><span class="p">));</span> <span class="nx">store</span><span class="p">.</span><span class="nf">set</span><span class="p">({</span> <span class="na">bg</span><span class="p">:</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">bg</span> <span class="p">});</span> <span class="p">};</span> <span class="nt">&lt;/script&gt;</span> </code></pre> </div> <p>Full demos (shape lab, ratio-fit, reactive list): <a href="https://github.com/Figsh/fscss-props/tree/main/examples" rel="noopener noreferrer">examples/</a> in the repo.</p> <h2> When to use which </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Need</th> <th>Tool</th> </tr> </thead> <tbody> <tr> <td>Author modules, arrays, patterns; ship static CSS</td> <td> <strong>FSCSS</strong> CLI / full runtime</td> </tr> <tr> <td>Live property shorthands + JS control</td> <td><strong>fscss-props</strong></td> </tr> <tr> <td>Max performance in production, no live expand</td> <td>Compile with CLI; omit the script</td> </tr> </tbody> </table></div> <h2> Links </h2> <ul> <li> <strong>GitHub:</strong> <a href="https://github.com/Figsh/fscss-props" rel="noopener noreferrer">Figsh/fscss-props</a> </li> <li> <strong>npm:</strong> <a href="https://www.npmjs.com/package/fscss-props" rel="noopener noreferrer">fscss-props</a> </li> <li> <strong>Shorthands reference:</strong> <a href="https://fscss.devtem.org/shorthands" rel="noopener noreferrer">fscss.devtem.org/shorthands</a> </li> <li> <strong>FSCSS core:</strong> <a href="https://github.com/Figsh/xfscss" rel="noopener noreferrer">Figsh/xfscss</a> </li> </ul> <p>MIT</p> fscss javascript css opensource FSCSS tutorial Wed, 30 Sep 2026 23:34:34 +0000 https://dev.to/fscss/fscss-125-size-padding-x-inset-x-and-ratio-fit-without-the-usual-css-gymnastics-jon https://dev.to/fscss/fscss-125-size-padding-x-inset-x-and-ratio-fit-without-the-usual-css-gymnastics-jon <p>Who else was waiting for CSS that could say <strong>size both axes</strong>, <strong>pad left and right</strong>, <strong>inset horizontally</strong>, or <strong>fit a ratio in a box</strong> — without stacking four properties or reaching for a utility framework?</p> <p><strong>FSCSS 1.2.5</strong> ships compile-time <strong>property shorthands</strong>. You write short names; the CLI/runtime expands them to plain CSS. No runtime polyfill for these names in production if you compile ahead of time.</p> <ul> <li>Release: <a href="https://github.com/Figsh/xfscss/releases/tag/v1.2.5" rel="noopener noreferrer">v1.2.5</a> </li> <li>Full map: <a href="https://fscss.devtem.org/shorthands" rel="noopener noreferrer">fscss.devtem.org/shorthands</a> </li> <li>Real UI using them: <a href="https://github.com/fscss-ttr/st-core.fscss/blob/main/templates/budget-app/budget.fscss" rel="noopener noreferrer">budget-app <code>budget.fscss</code></a> </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install </span>fscss@1.2.5 fscss input.fscss output.css </code></pre> </div> <h2> The pain these replace </h2> <p>Native CSS is powerful but often <strong>verbose for pairs</strong>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="c">/* “Make a square icon” */</span> <span class="nt">width</span><span class="o">:</span> <span class="err">32</span><span class="nt">px</span><span class="o">;</span> <span class="nt">height</span><span class="o">:</span> <span class="err">32</span><span class="nt">px</span><span class="o">;</span> <span class="c">/* “Horizontal padding only” */</span> <span class="nt">padding-left</span><span class="o">:</span> <span class="err">16</span><span class="nt">px</span><span class="o">;</span> <span class="nt">padding-right</span><span class="o">:</span> <span class="err">16</span><span class="nt">px</span><span class="o">;</span> <span class="c">/* “Pin left and right, leave top/bottom alone” */</span> <span class="nt">left</span><span class="o">:</span> <span class="err">45</span><span class="nt">px</span><span class="o">;</span> <span class="nt">right</span><span class="o">:</span> <span class="err">45</span><span class="nt">px</span><span class="o">;</span> <span class="c">/* not the same as inset: auto 45px — that sets all four */</span> </code></pre> </div> <p>People solve this with design systems, Tailwind-style utilities, or copy-paste. FSCSS 1.2.5 puts the <strong>same idea in the stylesheet language</strong>, then emits <strong>standard CSS</strong>.</p> <h2> <code>size</code> / <code>max-size</code> — width and height together </h2> <p>FSCSS:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.icon-btn</span> <span class="p">{</span> <span class="nl">size</span><span class="p">:</span> <span class="m">32px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.panel</span> <span class="p">{</span> <span class="nl">size</span><span class="p">:</span> <span class="m">100%</span> <span class="m">200px</span><span class="p">;</span> <span class="py">max-size</span><span class="p">:</span> <span class="m">480px</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>CSS:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.icon-btn</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">32px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">32px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.panel</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">480px</span><span class="p">;</span> <span class="nl">max-height</span><span class="p">:</span> <span class="m">480px</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>One value → both axes. Two values → width then height. Same idea for <code>min-size</code> / <code>max-size</code>.</p> <h2> <code>padding-x</code> / <code>px</code>, <code>margin-x</code> / <code>mx</code>, <code>inset-x</code> / <code>inset-y</code> </h2> <p>Horizontal and vertical <strong>pairs</strong>, without touching the other axis:</p> <p>FSCSS:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.card</span> <span class="p">{</span> <span class="py">px</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="c">/* or padding-x 16px */</span> <span class="py">py</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span> <span class="py">mx</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="py">max-w</span><span class="p">:</span> <span class="m">360px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.overlay-side</span> <span class="p">{</span> <span class="py">pos</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="py">inset-x</span><span class="p">:</span> <span class="m">45px</span><span class="p">;</span> <span class="c">/* left + right only */</span> <span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="py">h</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>CSS:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.card</span> <span class="p">{</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="nl">padding-right</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="nl">padding-top</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span> <span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">360px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.overlay-side</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">45px</span><span class="p">;</span> <span class="nl">right</span><span class="p">:</span> <span class="m">45px</span><span class="p">;</span> <span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>That’s the “<strong>without invoking the other axis</strong>” story: not <code>inset: auto 45px</code> (which sets top/bottom too), but <strong><code>inset-x</code></strong> when you only mean left and right.</p> <p>Also in the family: <code>gap-x</code> / <code>gap-y</code>, scroll margin/padding axes, safe-area helpers.</p> <h2> <code>ratio-fit()</code> — ratio inside a container </h2> <p>Fitting media to a box while keeping aspect ratio usually means absolute positioning, <code>inset: 0</code>, <code>margin: auto</code>, <code>aspect-ratio</code>, and careful width/height caps. <strong><code>ratio-fit()</code></strong> packages that expansion:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.media</span> <span class="o">&gt;</span> <span class="nt">img</span> <span class="p">{</span> <span class="py">inset</span><span class="p">:</span> <span class="n">ratio-fit</span><span class="p">(</span><span class="m">16</span> <span class="p">/</span> <span class="m">9</span><span class="p">);</span> <span class="py">obj-fit</span><span class="p">:</span> <span class="n">cover</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>You get a compile-time expansion aimed at “fill the containing block, keep the ratio.” Details and exact formula: <a href="https://fscss.devtem.org/shorthands" rel="noopener noreferrer">shorthands docs</a>.</p> <h2> In a real template </h2> <p>The dual-phone <strong>budget UI</strong> (<a href="https://github.com/fscss-ttr/st-core.fscss/blob/main/templates/budget-app/budget.fscss" rel="noopener noreferrer"><code>budget.fscss</code></a>) mixes <strong>st-core@v2</strong> charts, <strong>icon-mask</strong>, and 1.2.5 sugar:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">body</span> <span class="p">{</span> <span class="py">ff</span><span class="p">:</span> <span class="s2">'Inter'</span><span class="p">,</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="py">bg</span><span class="p">:</span> <span class="m">#e8eaf0</span><span class="p">;</span> <span class="py">min-h</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span> <span class="py">center</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="py">gap</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="py">py</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="py">px</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span> <span class="py">fwrap</span><span class="p">:</span> <span class="n">wrap</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.icon-btn</span> <span class="p">{</span> <span class="nl">size</span><span class="p">:</span> <span class="m">32px</span><span class="p">;</span> <span class="py">rounded</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="py">bg</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">0.06</span><span class="p">);</span> <span class="py">center</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.loan-card</span> <span class="p">{</span> <span class="py">mx</span><span class="p">:</span> <span class="m">22px</span><span class="p">;</span> <span class="py">mb</span><span class="p">:</span> <span class="m">18px</span><span class="p">;</span> <span class="py">rounded</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="py">px</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="py">py</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span> <span class="py">hstack</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span> <span class="py">ai</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>Preview / template folder: <a href="https://github.com/fscss-ttr/st-core.fscss/tree/main/templates/budget-app" rel="noopener noreferrer">st-core templates · budget-app ui</a>.</p> <h2> What else ships in the same release </h2> <ul> <li>Layout helpers: <code>stack</code>, <code>hstack</code>, <code>center</code>, <code>auto-fit</code>, <code>truncate</code>, <code>line-clamp</code> </li> <li>Borders: <code>border-x</code>, <code>rounded</code>, corner variants</li> <li>Background: <code>bg</code>, <code>bg-x</code> / <code>bg-y</code> </li> <li>Aliases: <code>fs</code>, <code>fw</code>, <code>jc</code>, <code>ai</code>, <code>pos</code>, <code>shadow</code>, …</li> <li>Side blocks: <code>top| padding: 8px; |</code> </li> </ul> <p>Older <strong>value multiplexing</strong> (<code>%2</code>, <code>%3</code>) still works; 1.2.5 is about <strong>named properties</strong> that expand to longhands.</p> <h2> Takeaway </h2> <p>If you’ve been typing the same width/height or padding-left/right pairs for years — or wishing <code>inset</code> could mean <strong>only the x axis</strong> — FSCSS 1.2.5 is aimed at that. Write the short form, compile once, ship CSS the browser already understands.</p> <p><strong>Links</strong></p> <ul> <li> <a href="https://github.com/Figsh/xfscss/releases/tag/v1.2.5" rel="noopener noreferrer">Release v1.2.5</a> </li> <li><a href="https://fscss.devtem.org/shorthands" rel="noopener noreferrer">Shorthands reference</a></li> <li> <a href="https://marketplace.visualstudio.com/items?itemName=Figsh.fscss" rel="noopener noreferrer">VSCode extention</a> </li> <li> <a href="https://github.com/fscss-ttr/st-core.fscss/blob/main/templates/budget-app/budget.fscss" rel="noopener noreferrer">budget.fscss (st-core template)</a> </li> <li><a href="https://www.npmjs.com/package/fscss" rel="noopener noreferrer">npm <code>fscss</code></a></li> </ul> frontend fscss opensource css FSCSS tutorial Tue, 29 Sep 2026 11:38:22 +0000 https://dev.to/fscss/pure-css-budget-ui-two-phones-one-chart-with-st-corefscss-15g9 https://dev.to/fscss/pure-css-budget-ui-two-phones-one-chart-with-st-corefscss-15g9 <blockquote> <p>The Figma design in pure CSS</p> </blockquote> <p>A mobile <strong>Home + Budget</strong> template for <a href="https://github.com/fscss-ttr/st-core.fscss" rel="noopener noreferrer">st-core@v2</a>: dual phone frames, card carousel, finance shortcuts, loans, and a spend chart drawn with <code>clip-path</code> + CSS variables.</p> <p><a href="https://hub.devtem.org/st-core.fscss/templates/budget-app/" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqta8eaujmdm8liojnt50.jpg" alt="Template Preview" width="720" height="904"></a></p> <p><strong>Live preview:</strong> <a href="https://hub.devtem.org/st-core.fscss/templates/budget-app/" rel="noopener noreferrer">hub.devtem.org/st-core.fscss/templates/budget-app/</a><br><br> <strong>Source:</strong> <a href="https://github.com/fscss-ttr/st-core.fscss/tree/main/templates/budget-app" rel="noopener noreferrer">templates/budget-app</a></p> <h3> What’s in it </h3> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Layer</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td><strong>st-core@v2</strong></td> <td>Tokens, phone shell helpers, area/line chart from <code>@arr budgetData</code> </td> </tr> <tr> <td><strong>icon-mask</strong></td> <td>Nav, menu, search, finance icons</td> </tr> <tr> <td><strong>Compiled CSS</strong></td> <td>Preview ships plain CSS — no FSCSS runtime required</td> </tr> </tbody> </table></div> <p>HTML stays light: two <code>.phone</code> blocks, a chart stack (grid / fill / line / dot), and a transaction list. Data for the series is an FSCSS array</p> <h3> Try it </h3> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>git clone https://github.com/fscss-ttr/st-core.fscss.git <span class="nb">cd </span>st-core.fscss/templates/budget-app <span class="c"># open index.html with budget.css linked</span> <span class="c"># or recompile: fscss budget.fscss budget.css</span> </code></pre> </div> <p>Same as the <a href="https://hub.devtem.org/st-core.fscss/templates/admin-dashboard/" rel="noopener noreferrer">admin-dashboard</a> template</p> <p><a href="https://fscss.devtem.org" rel="noopener noreferrer">FSCSS</a></p> ui fscss opensource showdev FSCSS tutorial Mon, 28 Sep 2026 11:30:36 +0000 https://dev.to/fscss/build-st-corev2-from-scratch-1ia7 https://dev.to/fscss/build-st-corev2-from-scratch-1ia7 <p>A deep dive into <a href="https://github.com/fscss-ttr/st-core.fscss" rel="noopener noreferrer">st-core@v2.fscss</a> — how a pure-CSS chart module is assembled with FSCSS: tokens, inverted Y, array indexes, <code>inline()</code>, and dual-pass strokes.</p> <p><strong>Requires:</strong> FSCSS ≥ 1.2.3<br><br> <strong>Repo:</strong> <a href="https://github.com/fscss-ttr/st-core.fscss" rel="noopener noreferrer">github.com/fscss-ttr/st-core.fscss</a></p> <h2> What you’re building </h2> <p>Not a JS chart engine. A <strong>set of <code>@define</code> mixins</strong> that:</p> <ol> <li>Install design tokens </li> <li>Map a data array → <code>--st-p1…N</code> (CSS Y positions) </li> <li>Paint <strong>fill</strong> and <strong>line</strong> with <code>clip-path: polygon(...)</code> </li> <li>Optionally add grid, dots, stat cards, phone shell </li> </ol> <p>Runtime data changes only <strong>CSS variables</strong>. Geometry is compile-time (or runtime-expanded) CSS.</p> <h2> Step 0 — Mental model </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Human values [42, 58, 65, …] // “higher = better” │ ▼ num(100 - v)% --st-p1, --st-p2, … // CSS top% (0% = top of box) │ ▼ even X: (i-1)/(N-1) * 100% clip-path polygon points │ ▼ .area fill + fake “stroke” line + dots </code></pre> </div> <p>In CSS, <strong>y = 0% is the top</strong>. A score of 90 should sit near the top → store <code>10%</code> in <code>--st-p*</code>.</p> <h2> Step 1 — Token root </h2> <p>Everything themable hangs off custom properties.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@define</span> <span class="n">st-root</span><span class="p">(</span><span class="n">root</span><span class="p">:</span><span class="n">root</span><span class="p">){</span><span class="err">`</span> <span class="o">:</span><span class="k">@use</span><span class="p">(</span><span class="n">root</span><span class="p">){</span> <span class="py">--st-bg</span><span class="p">:</span> <span class="m">#0e0d14</span><span class="p">;</span> <span class="py">--st-surface</span><span class="p">:</span> <span class="m">#161422</span><span class="p">;</span> <span class="py">--st-card</span><span class="p">:</span> <span class="m">#1c1a2e</span><span class="p">;</span> <span class="py">--st-accent</span><span class="p">:</span> <span class="m">#9d7eff</span><span class="p">;</span> <span class="py">--st-accent-2</span><span class="p">:</span> <span class="m">#c4a8ff</span><span class="p">;</span> <span class="py">--st-green</span><span class="p">:</span> <span class="m">#4fffb0</span><span class="p">;</span> <span class="py">--st-red</span><span class="p">:</span> <span class="m">#ff5e7d</span><span class="p">;</span> <span class="py">--st-text</span><span class="p">:</span> <span class="m">#e8e3ff</span><span class="p">;</span> <span class="py">--st-muted</span><span class="p">:</span> <span class="m">#6b6488</span><span class="p">;</span> <span class="py">--st-border</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">157</span><span class="p">,</span><span class="m">126</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">.15</span><span class="p">);</span> <span class="py">--st-radius-xl</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="py">--st-radius-lg</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="py">--st-pad</span><span class="p">:</span> <span class="m">24px</span><span class="p">;</span> <span class="c">/* default 8-point chart (overwritten by data) */</span> <span class="py">--st-p1</span><span class="p">:</span> <span class="m">68%</span><span class="p">;</span> <span class="py">--st-p2</span><span class="p">:</span> <span class="m">59%</span><span class="p">;</span> <span class="py">--st-p3</span><span class="p">:</span> <span class="m">70%</span><span class="p">;</span> <span class="py">--st-p4</span><span class="p">:</span> <span class="m">35%</span><span class="p">;</span> <span class="py">--st-p5</span><span class="p">:</span> <span class="m">58%</span><span class="p">;</span> <span class="py">--st-p6</span><span class="p">:</span> <span class="m">22%</span><span class="p">;</span> <span class="py">--st-p7</span><span class="p">:</span> <span class="m">42%</span><span class="p">;</span> <span class="py">--st-p8</span><span class="p">:</span> <span class="m">55%</span><span class="p">;</span> <span class="py">--st-chart-line-width</span><span class="p">:</span> <span class="m">1.5px</span><span class="p">;</span> <span class="p">}</span> <span class="err">`</span><span class="p">}</span> </code></pre> </div> <p><strong>Usage:</strong> <code>@st-root()</code> → usually on <code>:root</code>.<br><br> <strong>Why:</strong> Fill/line/dot only read variables — swap brand without touching polygon math.</p> <h2> Step 2 — Fixed 8-point setter (v1-style helper) </h2> <p>Still useful for demos with a fixed series length:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@define</span> <span class="n">st-chart</span><span class="p">(</span><span class="n">p1</span><span class="p">:</span> <span class="m">88</span><span class="p">,</span> <span class="n">p2</span><span class="p">:</span> <span class="m">59</span><span class="p">,</span> <span class="n">p3</span><span class="p">:</span> <span class="m">70</span><span class="p">,</span> <span class="n">p4</span><span class="p">:</span> <span class="m">35</span><span class="p">,</span> <span class="n">p5</span><span class="p">:</span> <span class="m">58</span><span class="p">,</span> <span class="n">p6</span><span class="p">:</span> <span class="m">22</span><span class="p">,</span> <span class="n">p7</span><span class="p">:</span> <span class="m">42</span><span class="p">,</span> <span class="n">p8</span><span class="p">:</span> <span class="m">55</span><span class="p">){</span> <span class="py">--st-p1</span><span class="p">:</span> <span class="n">num</span><span class="p">(</span><span class="m">100</span> <span class="n">-</span> <span class="err">@</span><span class="n">use</span><span class="p">(</span><span class="n">p1</span><span class="p">))</span><span class="err">%</span><span class="p">;</span> <span class="py">--st-p2</span><span class="p">:</span> <span class="n">num</span><span class="p">(</span><span class="m">100</span> <span class="n">-</span> <span class="err">@</span><span class="n">use</span><span class="p">(</span><span class="n">p2</span><span class="p">))</span><span class="err">%</span><span class="p">;</span> <span class="c">/* … p3–p8 same pattern … */</span> <span class="p">}</span> </code></pre> </div> <p><code>num(100 - x)</code> is the <strong>invert-Y</strong> core. v2 generalizes this to <strong>any N</strong> via arrays.</p> <h2> Step 3 — Array → <code>--st-pN</code> (<code>st-chart-points</code>) </h2> <p>This is the heart of v2: length comes from <code>@arr</code>, not eight parameters.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@define</span> <span class="n">st-chart-points</span><span class="p">(</span><span class="n">p</span><span class="p">){</span><span class="err">`</span> <span class="nt">inline</span><span class="o">(</span><span class="s1">" @arr @use(p)-idx[count(@arr.@use(p)!.length, 1)] empty{ /* preserve */ } empty-@arr.@use(p)-idx[]{ $idx: @arr.@use(p)-idx[]; --st-p$idx: num(100 - @arr.@use(p)[$idx])%; }"</span><span class="o">)</span> <span class="err">`</span><span class="p">}</span> </code></pre> </div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Piece</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td><code>p</code></td> <td> <strong>Name</strong> of the data array (e.g. <code>myData</code>)</td> </tr> <tr> <td><code>count(@arr.@use(p)!.length, 1)</code></td> <td>Index list <code>1…N</code> </td> </tr> <tr> <td><code>empty{ /* preserve */ }</code></td> <td>Keeps loop output from being eaten as selectors</td> </tr> <tr> <td><code>--st-p$idx: num(100 - value)%</code></td> <td>One variable per point</td> </tr> <tr> <td><code>inline("…")</code></td> <td>Emits <strong>declarations only</strong> so you can call this inside <code>.chart { }</code> </td> </tr> </tbody> </table></div> <p><strong>Call site:</strong><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@arr</span> <span class="n">myData</span><span class="p">[</span><span class="m">42</span><span class="p">,</span> <span class="m">58</span><span class="p">,</span> <span class="m">65</span><span class="p">,</span> <span class="m">60</span><span class="p">,</span> <span class="m">78</span><span class="p">,</span> <span class="m">70</span><span class="p">,</span> <span class="m">92</span><span class="p">]</span> <span class="p">.</span><span class="n">chart</span> <span class="p">{</span> <span class="k">@st-chart-points</span><span class="p">(</span><span class="n">myData</span><span class="p">)</span> <span class="n">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="nt">height</span><span class="o">:</span> <span class="err">220</span><span class="nt">px</span><span class="o">;</span> <span class="p">}</span> </code></pre> </div> <p>After expand: <code>--st-p1</code>…<code>--st-p7</code> exist. JS can later overwrite them; the polygon still reads the same names.</p> <h2> Step 4 — Area fill (<code>st-chart-fill</code>) </h2> <p>Close a polygon: <strong>along the series</strong>, then <strong>bottom-right</strong>, <strong>bottom-left</strong>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@define</span> <span class="n">st-chart-fill</span><span class="p">(</span><span class="n">st</span><span class="p">:.</span><span class="n">st-chart-fill</span><span class="p">,</span> <span class="n">p</span><span class="p">){</span><span class="err">`</span> <span class="k">@use</span><span class="p">(</span><span class="n">st</span><span class="p">){</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="py">inset</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="err">@arr</span> <span class="err">@use(p)-idx[count(@arr.@use(p)!.length,</span> <span class="err">1)]</span> <span class="nl">clip-path</span><span class="p">:</span> <span class="n">polygon</span><span class="p">(</span> <span class="nb">inline</span><span class="p">(</span><span class="s1">"{} empty-@arr.@use(p)-idx[] { $i: @arr.@use(p)-idx[]; num(&lt;$i - 1&gt; * 100 / &lt;@arr.@use(p)!.length - 1&gt;)% var(--st-p$i), } 100% 100%, 0% 100% "</span><span class="p">)</span> <span class="p">);</span> <span class="nl">background</span><span class="p">:</span> <span class="n">linear-gradient</span><span class="p">(</span> <span class="m">180deg</span><span class="p">,</span> <span class="n">color-mix</span><span class="p">(</span><span class="n">in</span> <span class="n">srgb</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--st-accent</span><span class="p">)</span> <span class="m">35%</span><span class="p">,</span> <span class="nb">transparent</span><span class="p">),</span> <span class="nb">transparent</span> <span class="p">);</span> <span class="p">}</span> <span class="err">`</span><span class="p">}</span> </code></pre> </div> <p><strong>X formula</strong></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fq9l8ohldth6zuklsotzh.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fq9l8ohldth6zuklsotzh.jpg" alt="st-core.fscss clip-path formula" width="720" height="177"></a></p> <p>Even spacing for any <code>N ≥ 2</code>.</p> <p><strong>Y</strong> = <code>var(--st-p$i)</code> (already inverted).</p> <p><strong><code>inline("{} …")</code></strong> — loop body is rule-shaped (<code>empty-@arr… { }</code>); <code>inline()</code> strips braces so only <code>x% y%,</code> fragments sit inside <code>polygon()</code>.</p> <p>HTML:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"st-chart-fill"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@st-chart-fill</span><span class="p">(.</span><span class="n">st-chart-fill</span><span class="p">,</span> <span class="n">myData</span><span class="p">)</span> </code></pre> </div> <h2> Step 5 — Line as a thin polygon (<code>st-chart-line</code>) </h2> <p>CSS has no “stroke this polyline” for arbitrary points. st-core fakes a stroke:</p> <ol> <li>Walk <strong>forward</strong> along the top edge (the visible line). </li> <li>Walk <strong>back</strong> slightly <strong>below</strong> each point (<code>y + line-width</code>). </li> <li>Close the strip. </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@define</span> <span class="n">st-chart-line</span><span class="p">(</span><span class="n">st</span><span class="p">:.</span><span class="n">st-chart-line</span><span class="p">,</span> <span class="n">p</span><span class="p">){</span><span class="err">`</span> <span class="k">@use</span><span class="p">(</span><span class="n">st</span><span class="p">){</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="py">inset</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="err">@arr</span> <span class="err">@use(p)-idx[count(@arr.@use(p)!.length,</span> <span class="err">1)]</span> <span class="err">@arr</span> <span class="err">@use(p)-reversed-idx[@arr.@use(p)-idx!.reverse]</span> <span class="nl">clip-path</span><span class="p">:</span> <span class="n">polygon</span><span class="p">(</span> <span class="nb">inline</span><span class="p">(</span><span class="s1">"{} empty-@arr.@use(p)-idx[] { $i: @arr.@use(p)-idx[]; num(&lt;$i - 1&gt; * 100 / &lt;@arr.@use(p)!.length - 1&gt;)% var(--st-p$i), } "</span><span class="p">)</span> <span class="nb">inline</span><span class="p">(</span><span class="s1">"{} empty-@arr.@use(p)-reversed-idx[] reverse { $i: @arr.@use(p)-reversed-idx[]; num(&lt;$i - 1&gt; * 100 / &lt;@arr.@use(p)!.length - 1&gt;)% calc(var(--st-p$i) + var(--st-chart-line-width)), } "</span><span class="p">)</span> <span class="m">-100%</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--st-p1</span><span class="p">)</span> <span class="err">+</span> <span class="n">var</span><span class="p">(</span><span class="n">--st-chart-line-width</span><span class="p">))</span> <span class="p">);</span> <span class="nl">background</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--st-accent</span><span class="p">);</span> <span class="p">}</span> <span class="err">`</span><span class="p">}</span> </code></pre> </div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Idea</th> <th>Detail</th> </tr> </thead> <tbody> <tr> <td>Derived array</td> <td> <code>@arr …-reversed-idx[@arr.…-idx!.reverse]</code> (1.2.x)</td> </tr> <tr> <td>Second pass</td> <td>Same X, Y shifted by <code>--st-chart-line-width</code> </td> </tr> <tr> <td>Width helper</td> <td> <code>@st-chart-line-width(2.5px)</code> sets the variable</td> </tr> </tbody> </table></div> <p>Fill and line share <strong><code>--st-p*</code></strong>; only the polygon path differs.</p> <h2> Step 6 — Dots (<code>st-chart-dots</code> / <code>st-chart-dot</code>) </h2> <p><strong>One series of dots</strong> — loop selectors:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@define</span> <span class="n">st-chart-dots</span><span class="p">(</span><span class="n">st</span><span class="p">:.</span><span class="n">st-chart-dot-</span><span class="p">,</span> <span class="n">p</span><span class="p">,</span> <span class="n">size</span><span class="p">:</span> <span class="m">8px</span><span class="p">){</span><span class="err">`</span> <span class="k">@arr</span> <span class="err">@</span><span class="n">use</span><span class="p">(</span><span class="n">p</span><span class="p">)</span><span class="n">-idx</span><span class="p">[</span><span class="n">count</span><span class="p">(</span><span class="err">@</span><span class="n">arr</span><span class="p">.</span><span class="err">@</span><span class="n">use</span><span class="p">(</span><span class="n">p</span><span class="p">)</span><span class="err">!</span><span class="p">.</span><span class="n">length</span><span class="p">,</span> <span class="m">1</span><span class="p">)]</span> <span class="n">empty</span><span class="p">{</span> <span class="c">/* preserve */</span> <span class="p">}</span> <span class="k">@use</span><span class="p">(</span><span class="n">st</span><span class="p">)</span><span class="err">@</span><span class="n">arr</span><span class="p">.</span><span class="err">@</span><span class="n">use</span><span class="p">(</span><span class="n">p</span><span class="p">)</span><span class="n">-idx</span><span class="p">[]</span> <span class="p">{</span> <span class="err">$</span><span class="nt">i</span><span class="o">:</span> <span class="k">@arr</span><span class="p">.</span><span class="err">@</span><span class="n">use</span><span class="p">(</span><span class="n">p</span><span class="p">)</span><span class="n">-idx</span><span class="p">[];</span> <span class="nt">position</span><span class="o">:</span> <span class="nt">absolute</span><span class="o">;</span> <span class="nt">left</span><span class="o">:</span> <span class="nt">calc</span><span class="o">(</span><span class="nt">num</span><span class="o">(&lt;</span><span class="err">$</span><span class="nt">i</span> <span class="nt">-</span> <span class="err">1</span><span class="o">&gt;</span> <span class="o">*</span> <span class="err">100</span> <span class="o">/</span> <span class="o">&lt;</span><span class="k">@arr</span><span class="p">.</span><span class="err">@</span><span class="n">use</span><span class="p">(</span><span class="n">p</span><span class="p">)</span><span class="err">!</span><span class="p">.</span><span class="n">length</span> <span class="n">-</span> <span class="m">1</span><span class="err">&gt;</span><span class="p">)</span><span class="err">%</span> <span class="n">-</span> <span class="m">6px</span><span class="p">);</span> <span class="nt">top</span><span class="o">:</span> <span class="nt">calc</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--st-p</span><span class="err">$</span><span class="nt">i</span><span class="o">)</span> <span class="nt">-</span> <span class="err">6</span><span class="nt">px</span><span class="o">);</span> <span class="o">%</span><span class="err">2</span><span class="o">(</span><span class="nt">width</span><span class="o">,</span> <span class="nt">height</span><span class="o">[:</span> <span class="k">@use</span><span class="p">(</span><span class="n">size</span><span class="p">);</span><span class="o">])</span> <span class="nt">border-radius</span><span class="o">:</span> <span class="err">50</span><span class="o">%;</span> <span class="nt">background</span><span class="o">:</span> <span class="nf">#fff</span><span class="o">;</span> <span class="nt">border</span><span class="o">:</span> <span class="err">2</span><span class="o">.</span><span class="err">5</span><span class="nt">px</span> <span class="nt">solid</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--st-accent</span><span class="o">);</span> <span class="p">}</span> <span class="err">`</span><span class="p">}</span> </code></pre> </div> <p>Emits <code>.st-chart-dot-1</code>, <code>.st-chart-dot-2</code>, … positioned on the series.</p> <p><strong>Single highlight dot</strong> — explicit x/y (human y inverted in the mixin):<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@define</span> <span class="n">st-chart-dot</span><span class="p">(</span><span class="n">st</span><span class="p">:.</span><span class="n">st-chart-dot</span><span class="p">,</span> <span class="n">x</span><span class="p">:</span><span class="m">0</span><span class="p">,</span> <span class="n">y</span><span class="p">:</span><span class="m">0</span><span class="p">,</span> <span class="n">size</span><span class="p">:</span> <span class="m">12px</span><span class="p">){</span><span class="err">`</span> <span class="k">@use</span><span class="p">(</span><span class="n">st</span><span class="p">){</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="err">@</span><span class="n">use</span><span class="p">(</span><span class="n">x</span><span class="p">)</span><span class="err">%</span> <span class="n">-</span> <span class="m">6px</span><span class="p">);</span> <span class="nl">top</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">num</span><span class="p">(</span><span class="n">-</span><span class="err">&lt;@</span><span class="n">use</span><span class="p">(</span><span class="n">y</span><span class="p">)</span><span class="err">&gt;</span> <span class="err">+</span> <span class="m">100</span><span class="p">)</span><span class="err">%</span> <span class="n">-</span> <span class="m">6px</span><span class="p">);</span> <span class="err">%2(width,</span> <span class="err">height[:</span> <span class="err">@use(size);])</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">2.5px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--st-accent</span><span class="p">);</span> <span class="p">}</span> <span class="err">`</span><span class="p">}</span> </code></pre> </div> <h2> Step 7 — Chrome: grid, axes, stat card, phone </h2> <p>These are ordinary layout mixins on the same tokens:</p> <ul> <li> <strong><code>st-chart-grid(st, rows, cols)</code></strong> — <code>repeating-linear-gradient</code> mesh </li> <li> <strong><code>st-chart-axis-x</code> / <code>st-chart-axis-y</code></strong> — flex label rows </li> <li> <strong><code>st-stat-card</code></strong> — label / value / delta (<code>.up</code> / <code>.down</code>) </li> <li> <strong><code>st-phone</code> / <code>st-container</code></strong> — device frame and page shell </li> </ul> <p>No new math — they make it look like a product, not a codepen fragment.</p> <h2> Step 8 — Minimal page that uses it </h2> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@import</span><span class="p">((</span><span class="err">*</span><span class="p">)</span> <span class="n">from</span> <span class="n">st-core</span><span class="err">@</span><span class="n">v2</span><span class="p">)</span> <span class="err">@</span><span class="n">st-root</span><span class="p">()</span> <span class="err">@</span><span class="n">arr</span> <span class="n">sales</span><span class="p">[</span><span class="m">42</span><span class="p">,</span> <span class="m">58</span><span class="p">,</span> <span class="m">65</span><span class="p">,</span> <span class="m">60</span><span class="p">,</span> <span class="m">78</span><span class="p">,</span> <span class="m">70</span><span class="p">,</span> <span class="m">92</span><span class="p">]</span> <span class="err">@</span><span class="n">st-chart-fill</span><span class="p">(.</span><span class="n">fill</span><span class="p">,</span> <span class="n">sales</span><span class="p">)</span> <span class="err">@</span><span class="n">st-chart-line</span><span class="p">(.</span><span class="n">line</span><span class="p">,</span> <span class="n">sales</span><span class="p">)</span> <span class="p">.</span><span class="n">chart</span> <span class="p">{</span> <span class="k">@st-chart-points</span><span class="p">(</span><span class="n">sales</span><span class="p">)</span> <span class="n">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="nt">height</span><span class="o">:</span> <span class="err">220</span><span class="nt">px</span><span class="o">;</span> <span class="nt">background</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--st-surface</span><span class="o">);</span> <span class="nt">border-radius</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--st-radius-lg</span><span class="o">);</span> <span class="p">}</span> <span class="nc">.fill</span> <span class="p">{</span> <span class="py">--st-accent</span><span class="p">:</span> <span class="m">#22c55e</span><span class="p">;</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">0.25</span><span class="p">;</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">clip-path</span> <span class="m">0.6s</span> <span class="n">ease</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.line</span> <span class="p">{</span> <span class="py">--st-accent</span><span class="p">:</span> <span class="m">#22c55e</span><span class="p">;</span> <span class="err">@st-chart-line-width(2.5px)</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">clip-path</span> <span class="m">0.6s</span> <span class="n">ease</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fill"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"line"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> </code></pre> </div> <p>Live values from JS:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">el</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.chart</span><span class="dl">'</span><span class="p">);</span> <span class="nx">el</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">cssText</span> <span class="o">=</span> <span class="nx">values</span> <span class="p">.</span><span class="nf">map</span><span class="p">((</span><span class="nx">v</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="s2">`--st-p</span><span class="p">${</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="mi">100</span> <span class="o">-</span> <span class="nx">v</span><span class="p">}</span><span class="s2">%;`</span><span class="p">)</span> <span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="dl">'</span><span class="s1"> </span><span class="dl">'</span><span class="p">);</span> </code></pre> </div> <h2> Design rules baked into v2 </h2> <ol> <li> <strong>Points once, draw many times</strong> — <code>@st-chart-points</code> owns <code>--st-p*</code>; fill/line/dots only consume. </li> <li> <strong>Index arrays are local</strong> — <code>count(length, 1)</code> next to each mixin; don’t hand-write <code>1,2,3,…</code>. </li> <li> <strong><code>inline()</code> at polygon boundaries</strong> — loops need <code>{ }</code>; <code>polygon()</code> needs commas, not rules. </li> <li> <strong><code>empty</code> / <code>empty-</code> preserve</strong> — stops the compiler from treating loop output as selectors. </li> <li> <strong>N is fixed at expand time</strong> — changing series <em>length</em> in JS needs a compiled template ≥ max N (pad or recompile). Changing <em>values</em> is always fine.</li> </ol> <h2> Feature map (source order) </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Define</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td><code>st-root</code></td> <td>Tokens + default <code>--st-p*</code> </td> </tr> <tr> <td><code>st-chart</code></td> <td>Fixed 8-arg invert helper</td> </tr> <tr> <td><code>st-chart-points</code></td> <td>Array → <code>--st-pN</code> </td> </tr> <tr> <td><code>st-chart-fill</code></td> <td>Area polygon</td> </tr> <tr> <td><code>st-chart-line</code></td> <td>Dual-pass stroke polygon</td> </tr> <tr> <td><code>st-chart-line-width</code></td> <td>Stroke thickness token</td> </tr> <tr> <td> <code>st-chart-dot</code> / <code>st-chart-dots</code> </td> <td>Markers</td> </tr> <tr> <td> <code>st-chart-grid</code> / axes</td> <td>Background mesh + labels</td> </tr> <tr> <td><code>st-stat-card</code></td> <td>KPI block</td> </tr> <tr> <td> <code>st-phone</code> / <code>st-container</code> </td> <td>Shell UI</td> </tr> <tr> <td><code>st-cat-bar-fill</code></td> <td>Horizontal bar</td> </tr> </tbody> </table></div> <h2> From scratch checklist </h2> <ol> <li> <code>@st-root</code> with accent + <code>--st-chart-line-width</code> </li> <li>Data <code>@arr</code> + <code>@st-chart-points</code> </li> <li>Fill polygon (series + baseline) </li> <li>Line polygon (forward + reverse + width) </li> <li>Optional dots/grid </li> <li>JS only assigns <code>--st-pN</code> </li> </ol> <p>You’re not implementing a chart library in JavaScript. You’re <strong>compiling a CSS renderer</strong> and treating data as <strong>theme variables</strong>.</p> <p><strong>Source:</strong> <a href="https://raw.githubusercontent.com/fscss-ttr/st-core.fscss/main/st-core@v2.fscss" rel="noopener noreferrer">st-core@v2.fscss</a> · <a href="https://github.com/fscss-ttr/st-core.fscss/blob/main/README.md" rel="noopener noreferrer">README.md</a> · <a href="https://github.com/fscss-ttr/st-core.fscss/tree/main/templates/admin-dashboard" rel="noopener noreferrer">templates/admin-dashboard</a></p> <p><strong>Invert Y. Index the array. <code>inline</code> the points. Let the browser paint.</strong></p> tutorial fscss css opensource FSCSS tutorial Sat, 26 Sep 2026 23:22:28 +0000 https://dev.to/fscss/fscss-inline-overview-4m1b https://dev.to/fscss/fscss-inline-overview-4m1b <p><code>inline()</code> is a <strong>low-level utility</strong>: take a block (often generated), <strong>strip outer curly braces / selector wrapper noise</strong>, and emit <strong>declaration or fragment lines</strong> you can drop inside another construct.</p> <p>Docs line: <em>Remove curly brackets, selectors and format lines.</em></p> <p>Not a core architecture piece like <code>@arr</code> or <code>@define</code> — but important for <strong>advanced mixins</strong> (charts, <code>clip-path</code>, nested loops).</p> <h2> What it does </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Input</th> <th>Rough output</th> </tr> </thead> <tbody> <tr> <td><code>inline(":root{ --a: 1; --b: 2; }")</code></td> <td> <code>--a: 1;</code> <code>--b: 2;</code> </td> </tr> <tr> <td><code>inline(".sel{ color: red; }")</code></td> <td><code>color: red;</code></td> </tr> </tbody> </table></div> <p>You get <strong>inner CSS</strong>, not a full rule set.</p> <h2> Why it exists </h2> <p>FSCSS array loops expand into <strong>rule-shaped</strong> chunks:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>@arr.idx[] { /* … */ } </code></pre> </div> <p>That needs <code>{</code> <code>}</code> for the loop. If you are already inside:</p> <ul> <li><code>clip-path: polygon( … )</code></li> <li>a single <code>.chart { … }</code> block </li> <li>a comma-separated value list </li> </ul> <p>those extra braces <strong>break</strong> the outer syntax. <code>inline()</code> unwraps the generated block so only the <strong>useful tokens</strong> (e.g. <code>10% var(--st-p1),</code>) remain.</p> <h3> st-core-style use </h3> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">clip-path</span><span class="o">:</span> <span class="nt">polygon</span><span class="o">(</span> <span class="nt">inline</span><span class="o">(</span><span class="s1">"{} empty-@arr.p-idx[] { $i: @arr.p-idx[]; num(&lt;$i - 1&gt; * 100 / &lt;@arr.p!.length - 1&gt;)% var(--st-p$i), } "</span><span class="o">)</span> <span class="o">);</span> </code></pre> </div> <p>Flow:</p> <ol> <li>Loop runs in a normal block form (braces allowed). </li> <li> <code>inline()</code> strips the brace/selector shell. </li> <li>Result is a list of polygon points inside <code>polygon()</code>.</li> </ol> <p>Same idea for custom properties inside one rule:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.something</span> <span class="p">{</span> <span class="err">inline("{</span><span class="p">}</span> <span class="k">@arr</span><span class="p">.</span><span class="n">some</span><span class="p">[]</span> <span class="p">{</span> <span class="nt">--some-</span><span class="k">@arr</span><span class="p">.</span><span class="n">some</span><span class="p">[]:</span> <span class="err">…</span><span class="p">;</span> <span class="p">}</span> <span class="err">"</span><span class="o">)</span> <span class="nt">color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--some-1</span><span class="o">);</span> <span class="err">}</span> </code></pre> </div> <h2> Mental model </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>[ generated block with { } for the compiler ] │ ▼ inline() [ flat fragments: decls, points, commas ] │ ▼ [ parent: polygon(), :root merge, one selector, … ] </code></pre> </div> <h2> Compared to other tools </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Feature</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td><code>@arr</code></td> <td>Lists + auto-index loops</td> </tr> <tr> <td><code>@define</code></td> <td>Parameterized reusable blocks</td> </tr> <tr> <td><code>@fun</code></td> <td>Named token maps</td> </tr> <tr> <td><code>str()</code></td> <td>Store multi-line strings</td> </tr> <tr> <td><strong><code>inline()</code></strong></td> <td>Peel braces/selectors so fragments compose</td> </tr> </tbody> </table></div> <h2> When to use it </h2> <ul> <li>Building <strong><code>clip-path</code> / <code>path()</code> / multi-value</strong> lists from <code>@arr</code> </li> <li>Emitting <strong>many <code>--vars</code></strong> inside one selector without nested rule noise </li> <li>Large mixins that <strong>assemble CSS text</strong> from loops </li> </ul> <p>When <strong>not</strong> to: normal rules and mixins — plain <code>@define</code> / selectors are enough.</p> <h2> In short </h2> <p><strong><code>inline()</code> = “paste the inside of this block, not the wrapper.”</strong><br><br> Uncommon in day-to-day stylesheets; essential for heavy generation (e.g. <a href="https://github.com/fscss-ttr/st-core.fscss" rel="noopener noreferrer">st-core</a> chart polygons). Advanced, but the right tool when braces fight the parent syntax.</p> fscss css opensource discuss FSCSS tutorial Fri, 25 Sep 2026 23:25:39 +0000 https://dev.to/fscss/fscss-auto-loop-percentage-keyframes-from-an-array-56j5 https://dev.to/fscss/fscss-auto-loop-percentage-keyframes-from-an-array-56j5 <p>This snippet builds a <strong>stepped “processing 0% → 99% → done”</strong> animation by <strong>looping an array into <code>@keyframes</code> percentages</strong> — not a JS timer.</p> <h2> Setup </h2> <ol> <li><code>npm install -g fscss@latest</code></li> <li>VS Code: <strong>FSCSS</strong> language support (<a href="https://marketplace.visualstudio.com/items?itemName=Figsh.fscss" rel="noopener noreferrer">FSCSS Support</a>)</li> <li>File: <code>my-first-fscss.fscss</code> → compile or runtime-load</li> </ol> <h2> Source (your idea, tightened) </h2> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">h2</span><span class="nd">::after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"..."</span><span class="p">;</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">count</span> <span class="m">10s</span> <span class="n">steps</span><span class="p">(</span><span class="m">100</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* 1, 2, … 99 (auto list for keyframe stops) */</span> <span class="k">@arr</span> <span class="n">numlist</span><span class="p">[</span><span class="n">count</span><span class="p">(</span><span class="m">99</span><span class="p">)]</span> <span class="err">@</span><span class="n">define</span> <span class="n">counter</span><span class="p">(</span><span class="n">start</span><span class="p">:</span><span class="n">ing</span><span class="p">...,</span> <span class="n">process</span><span class="p">:</span><span class="n">ing</span><span class="p">...,</span> <span class="n">end</span><span class="p">:</span><span class="n">ed</span><span class="p">){</span><span class="err">`</span> <span class="err">0</span><span class="o">%</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"@use(start)0%"</span><span class="p">;</span> <span class="p">}</span> <span class="k">@arr</span><span class="p">.</span><span class="n">numlist</span><span class="p">[]</span><span class="err">%</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"@use(process)@arr.numlist[]%"</span><span class="p">;</span> <span class="p">}</span> <span class="err">100</span><span class="o">%</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"@use(end)"</span><span class="p">;</span> <span class="p">}</span> <span class="err">`</span><span class="p">}</span> <span class="k">@keyframes</span> <span class="n">count</span> <span class="p">{</span> <span class="k">@counter</span><span class="p">(</span><span class="n">Processing</span><span class="p">...,</span> <span class="n">Processing</span><span class="p">...,</span> <span class="n">Processed</span><span class="p">)</span> <span class="err">}</span> </code></pre> </div> <h2> What “auto-loop” is here </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Piece</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td><code>count(99)</code></td> <td>Builds a numeric list used as <strong>1–99</strong> (engine: <code>count(n)</code> / <code>count(n, 1)</code> → index list).</td> </tr> <tr> <td><code>@arr numlist[…]</code></td> <td>Stores that list.</td> </tr> <tr> <td><code>@arr.numlist[]</code></td> <td> <strong>Auto-index</strong>: expand once per item.</td> </tr> <tr> <td><code>@arr.numlist[]%</code></td> <td>Each item becomes a <strong>keyframe selector</strong>: <code>1%</code>, <code>2%</code>, … <code>99%</code>.</td> </tr> <tr> <td><code>@define counter(…)</code></td> <td>Template for the keyframe body; `<a class="mentioned-user" href="https://dev.to/use">@use</a>(start</td> </tr> <tr> <td>{% raw %}<code>@counter(…)</code> inside <code>@keyframes</code> </td> <td>Injects the whole ladder into <code>count</code>.</td> </tr> </tbody> </table></div> <p>So the loop is <strong>compile-time expansion</strong>, not <code>for</code> in the browser.</p> <h2> Breakdown </h2> <h3> 1. Target </h3> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">h2</span><span class="nd">::after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"..."</span><span class="p">;</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">count</span> <span class="m">10s</span> <span class="n">steps</span><span class="p">(</span><span class="m">100</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <ul> <li>Animates <strong><code>content</code></strong> on the pseudo-element. </li> <li> <code>steps(100)</code> ≈ one visual step per percent over 10s. </li> <li> <code>forwards</code> keeps the final <code>Processed</code> text.</li> </ul> <h3> 2. Index array </h3> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@arr</span> <span class="n">numlist</span><span class="p">[</span><span class="n">count</span><span class="p">(</span><span class="m">99</span><span class="p">)]</span> </code></pre> </div> <p>Same family as modules indexes: a list long enough to drive stops. Here each value is also the <strong>percentage number</strong> in the output.</p> <h3> 3. Reusable keyframe block </h3> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@define</span> <span class="n">counter</span><span class="p">(</span><span class="n">start</span><span class="p">:</span><span class="err">…</span><span class="p">,</span> <span class="n">process</span><span class="p">:</span><span class="err">…</span><span class="p">,</span> <span class="n">end</span><span class="p">:</span><span class="err">…</span><span class="p">){</span><span class="err">`</span> <span class="err">…</span> <span class="err">`</span><span class="p">}</span> </code></pre> </div> <ul> <li> <strong><code>0%</code></strong> — intro label + <code>0%</code>. </li> <li> <strong><code>@arr.numlist[]%</code></strong> — for each <code>n</code> in <code>numlist</code>, emit: <ul> <li>selector: <code>n%</code> </li> <li> <code>content: "&lt;process&gt;n%"</code> </li> </ul> </li> <li> <strong><code>100%</code></strong> — final label only (e.g. <code>Processed</code>).</li> </ul> <h3> 4. Wire into a named animation </h3> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@keyframes</span> <span class="n">count</span> <span class="p">{</span> <span class="k">@counter</span><span class="p">(</span><span class="n">Processing</span><span class="p">...,</span> <span class="n">Processing</span><span class="p">...,</span> <span class="n">Processed</span><span class="p">)</span> <span class="err">}</span> </code></pre> </div> <p>Expands to a long <code>@keyframes count { … }</code> with ~100 content stops.</p> <h2> Shape of compiled CSS (illustrative) </h2> <p>Exact quoting depends on the compiler; structure is:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">h2</span><span class="nd">::after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"..."</span><span class="p">;</span> <span class="nl">animation</span><span class="p">:</span> <span class="n">count</span> <span class="m">10s</span> <span class="n">steps</span><span class="p">(</span><span class="m">100</span><span class="p">)</span> <span class="n">forwards</span><span class="p">;</span> <span class="p">}</span> <span class="k">@keyframes</span> <span class="n">count</span> <span class="p">{</span> <span class="err">0</span><span class="o">%</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"Processing...0%"</span><span class="p">;</span> <span class="p">}</span> <span class="err">1</span><span class="o">%</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"Processing...1%"</span><span class="p">;</span> <span class="p">}</span> <span class="err">2</span><span class="o">%</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"Processing...2%"</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* … */</span> <span class="err">99</span><span class="o">%</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"Processing...99%"</span><span class="p">;</span> <span class="p">}</span> <span class="err">100</span><span class="o">%</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">"Processed"</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> </code></pre> </div> <p>That is the auto-loop: <strong>one array walk → many keyframe rules</strong>.</p> <h2> Example HTML </h2> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>FSCSS auto-loop counter<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/fscss@1.2.4/runtime.min.js"</span> <span class="na">async</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;link</span> <span class="na">type=</span><span class="s">"text/fscss"</span> <span class="na">href=</span><span class="s">"my-first-fscss.fscss"</span><span class="nt">&gt;</span> <span class="c">&lt;!-- or: &lt;link rel="stylesheet" href="my-first-fscss.css"&gt; after CLI --&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">2rem</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#0f172a</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#e2e8f0</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h2</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.25rem</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="p">}</span> <span class="nt">h2</span><span class="nd">::after</span> <span class="p">{</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">0.35em</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#38bdf8</span><span class="p">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;h2&gt;</span>Status<span class="nt">&lt;/h2&gt;</span> <span class="c">&lt;!-- ::after shows Processing...0% → … → Processed --&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <h2> Compile </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>fscss my-first-fscss.fscss my-first-fscss.css </code></pre> </div> <h2> Mental model </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>count(99) → list of stops @arr.x[]% → “for each item, emit item% { … }” @define → reuse labels (start / process / end) @keyframes → holds the expanded ladder </code></pre> </div> <p><strong>Auto-loop</strong> = array auto-index used as <strong>keyframe percentages</strong> (or selectors elsewhere), so one definition drives N rules.</p> <h2> Variants </h2> <ul> <li>Progress label only: change <code>@use(process)</code> strings. </li> <li>Fewer steps: <code>count(20)</code> + shorter animation / <code>steps(20)</code>. </li> <li>Same pattern for staggered selectors: <code>.item-@arr.idx[] { animation-delay: … }</code> (as in arrays docs).</li> </ul> <p><strong>Loop the array at compile time; the browser only plays the keyframes.</strong></p> webdev tutorial fscss discuss FSCSS tutorial Thu, 24 Sep 2026 18:43:21 +0000 https://dev.to/fscss/pure-css-analytics-ui-st-core-admin-dashboard-template-4p https://dev.to/fscss/pure-css-analytics-ui-st-core-admin-dashboard-template-4p <p>Build an analytics shell without a chart library — <strong>st-core@v2</strong> for the revenue line, <strong>circle-progress</strong> for traffic, <strong>icon-mask</strong> for nav icons. Markup stays plain HTML; styles are CSS (compiled FSCSS); a small script only updates CSS variables.</p> <p><a href="https://hub.devtem.org/st-core.fscss/templates/admin-dashboard/" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcu1x1skeluvd0w8no78q.jpg" alt="Template Preview" width="720" height="645"></a></p> <p><strong>Live preview:</strong> <a href="https://hub.devtem.org/st-core.fscss/templates/admin-dashboard/" rel="noopener noreferrer">hub.devtem.org/st-core.fscss/templates/admin-dashboard/</a><br><br> <strong>Source:</strong> <a href="https://github.com/fscss-ttr/st-core.fscss" rel="noopener noreferrer">github.com/fscss-ttr/st-core.fscss</a> → <code>templates/admin-dashboard/</code></p> <h2> What’s in the box </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Piece</th> <th>Job</th> </tr> </thead> <tbody> <tr> <td><strong>st-core@v2</strong></td> <td>Tokens, area/line chart via <code>clip-path</code> + <code>--st-pN</code> </td> </tr> <tr> <td><strong>circle-progress</strong></td> <td>Multi-slice traffic pie</td> </tr> <tr> <td><strong>icon-mask</strong></td> <td>Sidebar / toolbar icons</td> </tr> <tr> <td><strong>dashboard.js</strong></td> <td>Mobile drawer, profile menu, range tabs → variables</td> </tr> </tbody> </table></div> <p>Layout: sticky sidebar, stat cards, revenue chart (7d / 30d / 90d), goals, messages, activity, sales table — responsive under 1100px (off-canvas nav + swipe).</p> <h2> File split </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>templates/admin-dashboard/ ├── index.html ├── dashboard.fscss # source ├── dashboard.css # CLI output (CI can compile this) ├── dashboard.js └── README.md </code></pre> </div> <p>Production path: compile FSCSS once, ship CSS + HTML + JS. No chart runtime in the browser.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install</span> <span class="nt">-g</span> fscss@1.2.4 fscss dashboard.fscss dashboard.css </code></pre> </div> <p>Then link <code>dashboard.css</code></p> <h2> Chart idea in one line </h2> <p>FSCSS builds polygon geometry from an <code>[Array](https://fscss.devtem.org/arrays)</code>. JS only writes:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="o">--</span><span class="nx">st</span><span class="o">-</span><span class="nx">p1</span><span class="p">:</span> <span class="mi">58</span><span class="o">%</span><span class="p">;</span> <span class="cm">/* 100 - humanValue */</span> </code></pre> </div> <p>Same pattern as the <a href="https://github.com/fscss-ttr/st-core.fscss/tree/main/integration/svelte" rel="noopener noreferrer">Svelte integration</a>: framework or vanilla owns data; CSS paints.</p> <h2> CI </h2> <p><code>.github/workflows/compile-templates.yml</code> installs FSCSS, compiles <code>dashboard.fscss</code>, and can commit <code>dashboard.css</code> on <code>main</code> so the hub preview stays on static CSS.</p> <h2> Try it </h2> <ol> <li>Open the <a href="https://hub.devtem.org/st-core.fscss/templates/admin-dashboard/" rel="noopener noreferrer">preview</a>. </li> <li>Clone <a href="https://github.com/fscss-ttr/st-core.fscss" rel="noopener noreferrer">st-core.fscss</a>, open <code>templates/admin-dashboard/</code>. </li> <li>Swap data in <code>dashboard.js</code> or restyle tokens in <code>dashboard.fscss</code>.</li> </ol> <p>React/Next variants can reuse the same compile step and only map props &gt; <code>--st-pN</code>.</p> webdev fscss css javascript FSCSS tutorial Tue, 22 Sep 2026 23:47:55 +0000 https://dev.to/fscss/fscss-124-pattern-that-listens-when-you-want-it-to-1621 https://dev.to/fscss/fscss-124-pattern-that-listens-when-you-want-it-to-1621 <p><strong>Ship intent, not only exact API calls.</strong><br><br> FSCSS <strong>1.2.4</strong> hardens semantic <code>pattern()</code>: natural-language lines in a stylesheet can expand into real CSS (or FSCSS) when they score high enough against a registered description — optionally pulling values out of the phrase with <code>@match</code>.</p> <ul> <li>Docs: <a href="https://fscss.devtem.org/pattern" rel="noopener noreferrer">fscss.devtem.org/pattern</a> </li> <li>Install: <code>npm install fscss@1.2.4</code> </li> <li>Runtime: <code>https://cdn.jsdelivr.net/npm/fscss@1.2.4/runtime.min.js</code> </li> <li>Editor: <a href="https://marketplace.visualstudio.com/items?itemName=Figsh.fscss" rel="noopener noreferrer">VS Code · Figsh.fscss</a> </li> </ul> <h2> The idea </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>_patterns.fscss → register descriptions + templates main.fscss → @import patterns, write human phrases compiler → score → inject → @match → CSS </code></pre> </div> <p>You are not replacing selectors. You add a <strong>listener layer</strong>: some lines are prose; if they match a pattern, they become declarations or whole blocks at compile time.</p> <p>That works <strong>cleanest</strong> when definitions live in a <strong>deferred file or module</strong>, and the app stylesheet only imports and speaks.</p> <h2> Install </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install </span>fscss@1.2.4 </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/fscss@1.2.4/runtime.min.js"</span> <span class="na">defer</span><span class="nt">&gt;&lt;/script&gt;</span> </code></pre> </div> <p>CLI for production:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>fscss main.fscss main.css </code></pre> </div> <h2> Anatomy of a pattern </h2> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">pattern</span><span class="o">(</span><span class="nt">threshold</span><span class="o">:</span> <span class="s1">"plain language description"</span><span class="o">,</span> <span class="err">`</span> <span class="c">/* CSS or FSCSS template */</span> <span class="err">`</span><span class="o">)</span> </code></pre> </div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Piece</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td><strong>threshold</strong></td> <td>Minimum similarity <code>0–1</code>. Omit → default <strong>1</strong> (strict).</td> </tr> <tr> <td><strong>description</strong></td> <td>Words used for scoring against call lines.</td> </tr> <tr> <td><strong>template</strong></td> <td>What gets injected; backticks allow quotes inside CSS.</td> </tr> </tbody> </table></div> <p><strong>Calling:</strong> a line that isn’t “hard” CSS structure is treated as a phrase — often inside a rule (property pattern) or alone (block pattern).<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">pattern</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="o">:</span> <span class="s1">"Hello World card"</span><span class="o">,</span> <span class="err">`</span> <span class="nt">border-radius</span><span class="o">:</span> <span class="err">12</span><span class="nt">px</span><span class="o">;</span> <span class="nt">padding</span><span class="o">:</span> <span class="err">24</span><span class="nt">px</span><span class="o">;</span> <span class="nt">background</span><span class="o">:</span> <span class="nt">linear-gradient</span><span class="o">(</span><span class="err">135</span><span class="nt">deg</span><span class="o">,</span> <span class="err">#667</span><span class="nt">eea</span><span class="o">,</span> <span class="err">#764</span><span class="nt">ba2</span><span class="o">);</span> <span class="nt">color</span><span class="o">:</span> <span class="nf">#fff</span><span class="o">;</span> <span class="err">`</span><span class="o">)</span> <span class="nc">.card</span> <span class="p">{</span> <span class="err">hello</span> <span class="err">world</span> <span class="err">card</span> <span class="p">}</span> </code></pre> </div> <h2> Defer definitions: module → main </h2> <p><strong><code>_patterns.fscss</code></strong> (library — no page-specific selectors required):<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">pattern</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">75</span><span class="o">:</span> <span class="s1">"glass panel elevated"</span><span class="o">,</span> <span class="err">`</span> <span class="nt">background</span><span class="o">:</span> <span class="nt">color-mix</span><span class="o">(</span><span class="nt">in</span> <span class="nt">srgb</span><span class="o">,</span> <span class="nf">#fff</span> <span class="err">12</span><span class="o">%,</span> <span class="nt">transparent</span><span class="o">);</span> <span class="nt">backdrop-filter</span><span class="o">:</span> <span class="nt">blur</span><span class="o">(</span><span class="err">12</span><span class="nt">px</span><span class="o">);</span> <span class="nt">border</span><span class="o">:</span> <span class="err">1</span><span class="nt">px</span> <span class="nt">solid</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">255</span><span class="o">,</span><span class="err">255</span><span class="o">,</span><span class="err">255</span><span class="o">,</span><span class="err">0</span><span class="o">.</span><span class="err">12</span><span class="o">);</span> <span class="nt">border-radius</span><span class="o">:</span> <span class="err">16</span><span class="nt">px</span><span class="o">;</span> <span class="err">`</span><span class="o">)</span> <span class="nt">pattern</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">6</span><span class="o">:</span> <span class="s1">"rounded primary button with color: white, bg: red"</span><span class="o">,</span> <span class="err">`</span> <span class="nt">background</span><span class="o">:</span> <span class="k">@match</span><span class="p">(</span><span class="n">background</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">#\</span><span class="n">w</span><span class="err">\</span><span class="n">d-_</span><span class="p">]</span><span class="err">+</span><span class="p">))</span> <span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">bg</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">#\</span><span class="n">w</span><span class="err">\</span><span class="n">d-_</span><span class="p">]</span><span class="err">+</span><span class="p">));</span> <span class="nt">color</span><span class="o">:</span> <span class="k">@match</span><span class="p">(</span><span class="n">color</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">#\</span><span class="n">w</span><span class="err">\</span><span class="n">d-_</span><span class="p">]</span><span class="err">+</span><span class="p">))</span> <span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="nb">text</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">#\</span><span class="n">w</span><span class="err">\</span><span class="n">d-_</span><span class="p">]</span><span class="err">+</span><span class="p">));</span> <span class="nt">border-radius</span><span class="o">:</span> <span class="err">25</span><span class="nt">px</span><span class="o">;</span> <span class="nt">padding</span><span class="o">:</span> <span class="err">10</span><span class="nt">px</span> <span class="err">20</span><span class="nt">px</span><span class="o">;</span> <span class="nt">font-weight</span><span class="o">:</span> <span class="err">700</span><span class="o">;</span> <span class="nt">border</span><span class="o">:</span> <span class="err">2</span><span class="nt">px</span> <span class="nt">solid</span><span class="o">;</span> <span class="err">`</span><span class="o">)</span> </code></pre> </div> <p><strong><code>main.fscss</code></strong> (product code):<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@import</span><span class="p">((</span><span class="err">*</span><span class="p">)</span> <span class="n">from</span> <span class="s1">"./_patterns.fscss"</span><span class="p">)</span> <span class="c">/* or registry / URL form your setup uses */</span> <span class="p">.</span><span class="n">hero-card</span> <span class="p">{</span> <span class="nt">glass</span> <span class="nt">panel</span> <span class="nt">elevated</span> <span class="p">}</span> <span class="nc">.cta</span> <span class="p">{</span> <span class="err">rounded</span> <span class="err">primary</span> <span class="err">button</span> <span class="err">with</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0BCEAE</span><span class="p">,</span> <span class="n">background</span><span class="p">:</span> <span class="no">midnightblue</span> <span class="p">}</span> </code></pre> </div> <p>Why this split helps:</p> <ul> <li>Patterns are <strong>versioned and shared</strong> like design modules. </li> <li>Main files stay readable: intent lines, not giant mixins. </li> <li>Thresholds and <code>@match</code> regexes are tuned once in the library. </li> <li>Teams can contribute patterns without touching every page.</li> </ul> <p>Same idea as <code>@define</code> libraries — different trigger (phrase vs exact name).</p> <h2> Sensitivity: when it “listens” </h2> <p>Similarity is word-oriented and case-insensitive. A phrase must clear the pattern’s threshold and beat other candidates.</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Threshold</th> <th>Feel</th> <th>Good for</th> </tr> </thead> <tbody> <tr> <td> <code>1</code> (default)</td> <td>Almost exact</td> <td>Short, generic labels</td> </tr> <tr> <td><code>0.8–0.9</code></td> <td>Strict listener</td> <td>Named components</td> </tr> <tr> <td><code>0.5–0.7</code></td> <td>Forgiving</td> <td>Longer descriptions</td> </tr> <tr> <td><code>≤ 0.35</code></td> <td>Very open</td> <td>Risky; keep wording unique</td> </tr> </tbody> </table></div> <p><strong>Sensitive pattern</strong> (harder to trigger by accident):<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">pattern</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">9</span><span class="o">:</span> <span class="s1">"primary cta button solid indigo"</span><span class="o">,</span> <span class="err">`</span> <span class="nt">background</span><span class="o">:</span> <span class="err">#4</span><span class="nt">f46e5</span><span class="o">;</span> <span class="nt">color</span><span class="o">:</span> <span class="nf">#fff</span><span class="o">;</span> <span class="nt">border-radius</span><span class="o">:</span> <span class="err">8</span><span class="nt">px</span><span class="o">;</span> <span class="nt">padding</span><span class="o">:</span> <span class="err">10</span><span class="nt">px</span> <span class="err">20</span><span class="nt">px</span><span class="o">;</span> <span class="err">`</span><span class="o">)</span> </code></pre> </div> <p><strong>Open pattern</strong> (more paraphrases work):<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">pattern</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="o">:</span> <span class="s1">"Beautiful card"</span><span class="o">,</span> <span class="err">`</span> <span class="nt">background</span><span class="o">:</span> <span class="err">#0066</span><span class="nt">ff</span><span class="o">;</span> <span class="nt">border-radius</span><span class="o">:</span> <span class="err">12</span><span class="nt">px</span><span class="o">;</span> <span class="err">`</span><span class="o">)</span> </code></pre> </div> <p>If two descriptions share the same nouns at low thresholds, the wrong template can win. Prefer distinct verbs: <code>create … array</code> vs <code>render … chart</code>.</p> <h2> <code>@match</code>: parameters without a formal signature </h2> <p><code>@match(regex)</code> runs on the <strong>caller’s phrase</strong>, not the description. First capturing group wins; else the full match. Nested parentheses in the regex are handled with balanced parsing.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">pattern</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">6</span><span class="o">:</span> <span class="s1">"rounded primary button with color: white, bg: red"</span><span class="o">,</span> <span class="err">`</span> <span class="nt">background</span><span class="o">:</span> <span class="k">@match</span><span class="p">(</span><span class="n">background</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">#\</span><span class="n">w</span><span class="err">\</span><span class="n">d-_</span><span class="p">]</span><span class="err">+</span><span class="p">))</span> <span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">bg</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">#\</span><span class="n">w</span><span class="err">\</span><span class="n">d-_</span><span class="p">]</span><span class="err">+</span><span class="p">));</span> <span class="nt">color</span><span class="o">:</span> <span class="k">@match</span><span class="p">(</span><span class="n">color</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">#\</span><span class="n">w</span><span class="err">\</span><span class="n">d-_</span><span class="p">]</span><span class="err">+</span><span class="p">))</span> <span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="nb">text</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">#\</span><span class="n">w</span><span class="err">\</span><span class="n">d-_</span><span class="p">]</span><span class="err">+</span><span class="p">));</span> <span class="nt">border-radius</span><span class="o">:</span> <span class="err">25</span><span class="nt">px</span><span class="o">;</span> <span class="nt">padding</span><span class="o">:</span> <span class="err">10</span><span class="nt">px</span> <span class="err">20</span><span class="nt">px</span><span class="o">;</span> <span class="err">`</span><span class="o">)</span> <span class="nc">.primary</span> <span class="p">{</span> <span class="err">rounded</span> <span class="err">primary</span> <span class="err">button</span> <span class="err">with</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#0BCEAE</span><span class="p">,</span> <span class="n">background</span><span class="p">:</span> <span class="no">midnightblue</span> <span class="p">}</span> </code></pre> </div> <p>Authors get “arguments” by writing them in prose; the library harvests them. Offer aliases (<code>bg</code> / <code>background</code>, <code>color</code> / <code>text</code>) so one pattern tolerates different wording.</p> <p><strong>Safety (1.2.4):</strong> hostile nested quantifiers and invalid sources are rejected before <code>RegExp</code> runs. Keep captures simple.</p> <h2> Beyond plain CSS: FSCSS in the template </h2> <p>Patterns can emit <code>@arr</code>, module hooks, etc. Example sketch with <strong>st-core@v2</strong>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="k">@import</span><span class="p">((</span><span class="err">*</span><span class="p">)</span> <span class="n">from</span> <span class="n">st-core</span><span class="err">@</span><span class="n">v2</span><span class="p">)</span> <span class="err">@</span><span class="n">st-root</span><span class="p">()</span> <span class="n">pattern</span><span class="p">(</span><span class="m">0.35</span><span class="p">:</span> <span class="s1">"create sales array value: 0,"</span><span class="p">,</span> <span class="err">`</span> <span class="err">@</span><span class="n">arr</span> <span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">create</span><span class="err">\</span><span class="n">s</span><span class="p">([</span><span class="err">\</span><span class="n">w-_</span><span class="p">]</span><span class="err">+</span><span class="p">))[</span> <span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">value</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">\</span><span class="n">d</span><span class="err">\</span><span class="p">,</span> <span class="err">\</span><span class="n">s</span><span class="p">]</span><span class="err">+</span><span class="p">))</span><span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">data</span><span class="p">:</span><span class="err">?\</span><span class="n">s</span><span class="p">([</span><span class="err">\</span><span class="n">d</span><span class="err">\</span><span class="p">,</span> <span class="err">\</span><span class="n">s</span><span class="p">]</span><span class="err">+</span><span class="p">))</span> <span class="p">]</span> <span class="err">`</span><span class="p">)</span> <span class="n">pattern</span><span class="p">(</span><span class="m">0.50</span><span class="p">:</span> <span class="s1">"render sales chart with st-core "</span><span class="p">,</span> <span class="err">`</span> <span class="err">@</span><span class="n">st-chart-fill</span><span class="p">(.</span><span class="n">fill</span><span class="p">,</span> <span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">render</span><span class="err">\</span><span class="n">s</span><span class="p">([</span><span class="err">\</span><span class="n">w-_</span><span class="p">]</span><span class="err">+</span><span class="p">))</span><span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">st-core</span><span class="err">\</span><span class="n">s</span><span class="p">([</span><span class="err">\</span><span class="n">w-_</span><span class="p">]</span><span class="err">+</span><span class="p">)))</span> <span class="err">@</span><span class="n">st-chart-line</span><span class="p">(.</span><span class="n">line</span><span class="p">,</span> <span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">render</span><span class="err">\</span><span class="n">s</span><span class="p">([</span><span class="err">\</span><span class="n">w-_</span><span class="p">]</span><span class="err">+</span><span class="p">))</span><span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">st-core</span><span class="err">\</span><span class="n">s</span><span class="p">([</span><span class="err">\</span><span class="n">w-_</span><span class="p">]</span><span class="err">+</span><span class="p">)))</span> <span class="p">.</span><span class="n">chart</span> <span class="p">{</span> <span class="k">@st-chart-points</span><span class="p">(</span><span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">render</span><span class="err">\</span><span class="n">s</span><span class="p">([</span><span class="err">\</span><span class="n">w-_</span><span class="p">]</span><span class="err">+</span><span class="p">))</span><span class="err">@</span><span class="n">match</span><span class="p">(</span><span class="n">st-core</span><span class="err">\</span><span class="n">s</span><span class="p">([</span><span class="err">\</span><span class="n">w-_</span><span class="p">]</span><span class="err">+</span><span class="p">)))</span> <span class="err">}</span> <span class="err">`</span><span class="p">)</span> <span class="n">create</span> <span class="n">sample</span> <span class="n">array</span> <span class="n">value</span><span class="p">:</span> <span class="m">77</span><span class="p">,</span> <span class="m">7</span><span class="p">,</span> <span class="m">66</span><span class="p">,</span> <span class="m">78</span><span class="p">,</span> <span class="m">16</span> <span class="n">render</span> <span class="n">sample</span> <span class="n">chart</span> <span class="n">with</span> <span class="n">st-core</span> <span class="p">.</span><span class="n">chart</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">300px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">200px</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>Flow: human lines → array + chart binds → normal st-core geometry. Tune thresholds so “create” and “render” don’t steal each other’s hits.</p> <h2> Property vs block calls </h2> <ul> <li> <strong>Property:</strong> phrase inside <code>.btn { … }</code> → declarations join that rule. </li> <li> <strong>Block:</strong> phrase alone → <code>@keyframes</code>, top-level FSCSS, large structures. </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nt">pattern</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">7</span><span class="o">:</span> <span class="s1">"animated keyframe for spin"</span><span class="o">,</span> <span class="err">`</span> <span class="k">@keyframes</span> <span class="n">spin</span> <span class="p">{</span> <span class="nt">to</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">360deg</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="err">`</span><span class="o">)</span> <span class="nt">an</span> <span class="nt">Animated</span> <span class="nt">keyframes</span> <span class="nt">for</span> <span class="nt">spin</span> </code></pre> </div> <h2> <code>pattern()</code> vs <code>@define</code> </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th></th> <th><code>@define</code></th> <th><code>pattern()</code></th> </tr> </thead> <tbody> <tr> <td>Trigger</td> <td>Exact <code>@name(args)</code> </td> <td>Fuzzy phrase</td> </tr> <tr> <td>Inputs</td> <td><code>@use(param)</code></td> <td> <code>@match</code> on free text</td> </tr> <tr> <td>Best for</td> <td>Stable module APIs</td> <td>Authoring UX, demos, shared intent libraries</td> </tr> </tbody> </table></div> <p>Use both: defines for precise systems (st-core, design tokens); patterns for how people <em>describe</em> common UI.</p> <h2> Workflow that scales </h2> <ol> <li>Collect patterns in <code>_patterns.fscss</code> or a published module. </li> <li> <code>@import</code> into app sheets. </li> <li>Write natural lines in components/pages. </li> <li>Compile with CLI for production; use runtime for playgrounds. </li> <li>Highlight and edit with <a href="https://marketplace.visualstudio.com/items?itemName=Figsh.fscss" rel="noopener noreferrer">FSCSS Support</a> in VS Code.</li> </ol> <h2> Quick checklist </h2> <ul> <li>Distinct descriptions; high thresholds for short phrases. </li> <li>Backtick templates; small, safe <code>@match</code> groups. </li> <li>Defer pattern libraries; keep main stylesheets intent-heavy. </li> <li>Prefer <strong>1.2.4+</strong> for matching/<code>@match</code> behavior described here.</li> </ul> <p><strong>Listen on purpose:</strong> register what you care about, import it, and speak in the stylesheet. FSCSS turns the hits into CSS — at compile time, under your thresholds.</p> <p><strong>Source:</strong> <a href="https://fscss.devtem.org/pattern" rel="noopener noreferrer">fscss.devtem.org/pattern</a></p> fscss ai webdev regex FSCSS tutorial Tue, 22 Sep 2026 11:51:26 +0000 https://dev.to/fscss/what-screen-readers-actually-announce-for-a-css-only-chart-and-why-data-isnt-enough-21a4 https://dev.to/fscss/what-screen-readers-actually-announce-for-a-css-only-chart-and-why-data-isnt-enough-21a4 <p>Good pushback in the comments, worth a proper answer instead of a quick reply, because "store the value in a <code>data-*</code> attribute" is a common instinct that doesn't actually solve the problem.</p> <h3> The core issue </h3> <p>A st-core chart is a handful of <code>&lt;div&gt;</code>s: <code>.chart-fill</code>, <code>.chart-line</code>, <code>.chart-dot</code>, <code>.chart-grid</code>. Visually they're a polygon shape. To the accessibility tree, they're empty, unlabeled <code>&lt;div&gt;</code>s with no text content. A screen reader landing on <code>.chart-fill</code> announces... nothing. Not the shape, not the numbers, not even "chart." It's invisible in the literal sense assistive tech cares about.</p> <h3> Why <code>data-*</code> attributes don't fix this </h3> <p>This is the specific thing worth being precise about. Putting <code>data-value="72"</code> on a <code>.chart-dot</code> does not make a screen reader say "72."</p> <p><code>data-*</code> attributes exist for JavaScript and CSS hooks, not for the accessibility tree. Browsers don't expose arbitrary <code>data-*</code> values to assistive tech at all. Two ways people try to route around this, and why they're both unreliable:</p> <ul> <li> <strong><code>content: attr(data-value)</code> in CSS</strong> — technically renders the value visually via generated content, but screen reader support for CSS generated content is inconsistent across NVDA, JAWS, and VoiceOver. Some announce it, some skip it entirely, and it's never been part of the reliable accessibility contract. Don't build on it.</li> <li> <strong>Reading <code>data-*</code> via JS and injecting it somewhere on interaction</strong> — works, but only if you're injecting it into something the accessibility tree actually surfaces (a live region, visible text, an <code>aria-label</code>). The <code>data-*</code> attribute itself is just storage; it does no announcing on its own.</li> </ul> <p>So the value has to end up as real text, or a real ARIA attribute, somewhere in the DOM. That's the actual constraint everything below is solving for.</p> <h2> Two patterns, and when to use each </h2> <h3> Method 1 — Visually hidden data table (best for multi-point charts) </h3> <p>The most structured option. A real <code>&lt;table&gt;</code>, hidden from sighted users, fully readable by assistive tech.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.sr-only</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">1px</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">margin</span><span class="p">:</span> <span class="m">-1px</span><span class="p">;</span> <span class="nl">overflow</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span> <span class="nl">clip</span><span class="p">:</span> <span class="n">rect</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">);</span> <span class="nl">white-space</span><span class="p">:</span> <span class="nb">nowrap</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Weekly revenue chart"</span> <span class="na">aria-describedby=</span><span class="s">"chart-data-table"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart-fill"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart-line"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart-grid"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;table</span> <span class="na">id=</span><span class="s">"chart-data-table"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span> <span class="nt">&lt;caption&gt;</span>Weekly revenue by day<span class="nt">&lt;/caption&gt;</span> <span class="nt">&lt;thead&gt;</span> <span class="nt">&lt;tr&gt;&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">&gt;</span>Day<span class="nt">&lt;/th&gt;&lt;th</span> <span class="na">scope=</span><span class="s">"col"</span><span class="nt">&gt;</span>Revenue<span class="nt">&lt;/th&gt;&lt;/tr&gt;</span> <span class="nt">&lt;/thead&gt;</span> <span class="nt">&lt;tbody&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Sun<span class="nt">&lt;/td&gt;&lt;td&gt;</span>$450<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Mon<span class="nt">&lt;/td&gt;&lt;td&gt;</span>$700<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Tue<span class="nt">&lt;/td&gt;&lt;td&gt;</span>$300<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Wed<span class="nt">&lt;/td&gt;&lt;td&gt;</span>$900<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Thu<span class="nt">&lt;/td&gt;&lt;td&gt;</span>$600<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Fri<span class="nt">&lt;/td&gt;&lt;td&gt;</span>$800<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Sat<span class="nt">&lt;/td&gt;&lt;td&gt;</span>$500<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;/tbody&gt;</span> <span class="nt">&lt;/table&gt;</span> </code></pre> </div> <p>Two things doing the real work here:</p> <ul> <li> <strong><code>aria-hidden="true"</code> on the decorative divs</strong> tells the screen reader to skip them entirely, so it never lands on an empty, unlabeled <code>.chart-fill</code> and announces nothing confusing.</li> <li> <strong><code>aria-describedby</code> links the chart container to the table's id.</strong> This is what makes the announcement sequence coherent instead of just "here's a table somewhere on the page, good luck."</li> </ul> <p><strong>What actually gets announced</strong>, tabbing through with NVDA or VoiceOver: the chart container reads as <em>"Weekly revenue chart, image"</em> (from <code>role="img"</code> + <code>aria-label</code>), and because of <code>aria-describedby</code>, most screen readers will also read the table's caption right after, or the user can explicitly navigate into it. Once inside the table, standard table navigation takes over, arrow keys or table-specific shortcuts move cell to cell, and each cell reads its column header plus value: <em>"Revenue, column 2 of 2, $900"</em>. That's the payoff of using a real <code>&lt;table&gt;</code> instead of a styled list, the semantics come free.</p> <h3> Method 2 — Text summary or live region (best for simple stats) </h3> <p>Overkill to build a full table for a single trend line or one headline number. A sentence does more work:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart"</span> <span class="na">role=</span><span class="s">"img"</span> <span class="na">aria-label=</span><span class="s">"Weekly revenue trend, increasing"</span> <span class="na">aria-describedby=</span><span class="s">"chart-summary"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"chart-summary"</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span> Revenue rose from $450 on Sunday to a peak of $900 on Wednesday, ending the week at $500, a 12% increase overall. <span class="nt">&lt;/p&gt;</span> </code></pre> </div> <p>One paragraph, one clear announcement, no table navigation required for something that doesn't need it.</p> <h2> Combining both, and handling live updates </h2> <p>For anything with a "Randomize Data" button, there's a wrinkle: updating a table's cells doesn't automatically announce anything, screen readers only speak up on their own when something is in an <code>aria-live</code> region. But making the <em>whole table</em> a live region is a bad idea, every cell update fires a fresh announcement and buries the user in noise.</p> <p>The pattern that actually works well:</p> <ol> <li> <strong>Keep the full data table static</strong> (no <code>aria-live</code>). It's there for on-demand navigation, the user tabs in and reads it whenever they want, at their own pace.</li> <li> <strong>Add a separate, short <code>aria-live="polite"</code> summary just for interaction feedback</strong>, updated alongside the chart on every data change: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"chart-live-summary"</span> <span class="na">class=</span><span class="s">"sr-only"</span> <span class="na">aria-live=</span><span class="s">"polite"</span><span class="nt">&gt;&lt;/p&gt;</span> </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">function</span> <span class="nf">updateChart</span><span class="p">(</span><span class="nx">values</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">style</span> <span class="o">=</span> <span class="nx">values</span><span class="p">.</span><span class="nf">map</span><span class="p">((</span><span class="nx">v</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="s2">`--st-p</span><span class="p">${</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="mi">100</span> <span class="o">-</span> <span class="nx">v</span><span class="p">}</span><span class="s2">%;`</span><span class="p">).</span><span class="nf">join</span><span class="p">(</span><span class="dl">'</span><span class="s1"> </span><span class="dl">'</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.chart-fill</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">cssText</span> <span class="o">=</span> <span class="nx">style</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.chart-line</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">cssText</span> <span class="o">=</span> <span class="nx">style</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.chart</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">cssText</span> <span class="o">=</span> <span class="nx">style</span><span class="p">;</span> <span class="c1">// Keep the full sr-only table in sync too</span> <span class="kd">const</span> <span class="nx">days</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Sun</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Mon</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Tue</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Wed</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Thu</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Fri</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Sat</span><span class="dl">'</span><span class="p">];</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">#chart-data-table tbody tr</span><span class="dl">'</span><span class="p">).</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">row</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">row</span><span class="p">.</span><span class="nx">children</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">textContent</span> <span class="o">=</span> <span class="s2">`$</span><span class="p">${</span><span class="nx">values</span><span class="p">[</span><span class="nx">i</span><span class="p">]}</span><span class="s2">`</span><span class="p">;</span> <span class="p">});</span> <span class="c1">// Short, live-announced summary for the interaction itself</span> <span class="kd">const</span> <span class="nx">peak</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">max</span><span class="p">(...</span><span class="nx">values</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">peakDay</span> <span class="o">=</span> <span class="nx">days</span><span class="p">[</span><span class="nx">values</span><span class="p">.</span><span class="nf">indexOf</span><span class="p">(</span><span class="nx">peak</span><span class="p">)];</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">chart-live-summary</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="s2">`Chart updated. Peak value $</span><span class="p">${</span><span class="nx">peak</span><span class="p">}</span><span class="s2"> on </span><span class="p">${</span><span class="nx">peakDay</span><span class="p">}</span><span class="s2">.`</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>Clicking "Randomize" now gets a screen reader user a concise, immediate confirmation ("Chart updated. Peak value $900 on Wednesday.") without forcing them to re-navigate a whole table just to know something changed, while the detailed table stays available if they want to dig in.</p> <h2> The short version </h2> <ul> <li> <code>data-*</code> attributes are storage, not an accessibility mechanism. They announce nothing on their own.</li> <li> <code>role="img"</code> + <code>aria-label</code> gives a one-line identity to the chart.</li> <li> <code>aria-hidden="true"</code> on every decorative <code>.chart-*</code> div keeps the screen reader from stumbling into empty presentational elements.</li> <li> <code>aria-describedby</code> pointing at a real <code>&lt;table&gt;</code> (or a short <code>&lt;p&gt;</code> for simple charts) is what actually gets the data announced, and gets it announced <em>in context</em>.</li> <li>For live-updating charts, keep the detailed table silent and pair it with a small <code>aria-live="polite"</code> region just for change notifications, don't make the whole table live</li> </ul> seo performance fscss css FSCSS tutorial Mon, 21 Sep 2026 12:01:57 +0000 https://dev.to/fscss-ttr/pure-css-charts-driven-by-svelte-updated-custom-properties-is-a-clean-approach-no-canvas-no-svg-2pdl https://dev.to/fscss-ttr/pure-css-charts-driven-by-svelte-updated-custom-properties-is-a-clean-approach-no-canvas-no-svg-2pdl <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/fscss/how-to-use-st-corefscss-with-svelte-compiled-4cg9" class="crayons-story__hidden-navigation-link">How to Use st-core.fscss with Svelte (Compiled)</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/fscss"> <img alt="FSCSS tutorial logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F10079%2F03f5d662-652b-4b9a-be33-c148848119c2.jpg" class="crayons-logo__image" width="503" height="486"> </a> <a href="/figsh" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1898831%2Ff90cc0c8-d0e9-4a04-8a50-145e660e7099.png" alt="figsh profile" class="crayons-avatar__image" width="128" height="128"> </a> </div> <div> <div> <a href="/figsh" class="crayons-story__secondary fw-medium m:hidden"> FSCSS </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> FSCSS <div id="story-author-preview-content-4706774" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/figsh" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1898831%2Ff90cc0c8-d0e9-4a04-8a50-145e660e7099.png" class="crayons-avatar__image" alt="" width="128" height="128"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">FSCSS </span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/fscss" class="crayons-story__secondary fw-medium">FSCSS tutorial</a> </span> </div> <a href="https://dev.to/fscss/how-to-use-st-corefscss-with-svelte-compiled-4cg9" class="crayons-story__tertiary fs-xs"><time>Sep 21</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/fscss/how-to-use-st-corefscss-with-svelte-compiled-4cg9" id="article-link-4706774"> How to Use st-core.fscss with Svelte (Compiled) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/svelte"><span class="crayons-tag__prefix">#</span>svelte</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/sveltekit"><span class="crayons-tag__prefix">#</span>sveltekit</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/fscss"><span class="crayons-tag__prefix">#</span>fscss</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/performance"><span class="crayons-tag__prefix">#</span>performance</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/fscss/how-to-use-st-corefscss-with-svelte-compiled-4cg9" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline">&nbsp;reaction</span></span> </div> </a> <a href="https://dev.to/fscss/how-to-use-st-corefscss-with-svelte-compiled-4cg9#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> <span class="hidden s:inline">Add&nbsp;Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> </div> </div> </div> </div> </div> </div> FSCSS tutorial Sun, 20 Sep 2026 21:40:48 +0000 https://dev.to/fscss/pure-css-charts-with-st-corev2-and-svelte-if-you-want-4945 https://dev.to/fscss/pure-css-charts-with-st-corev2-and-svelte-if-you-want-4945 <p><strong>st-core</strong> is FSCSS module that draws area/line charts with <code>clip-path</code> and CSS variables — no SVG, no canvas, no chart library.</p> <p>Repo: <a href="https://github.com/fscss-ttr/st-core.fscss" rel="noopener noreferrer">github.com/fscss-ttr/st-core.fscss</a></p> <h2> What v2 adds </h2> <ul> <li> <strong>Any length series</strong> via <code>@arr</code> (not only 8 fixed points)</li> <li>Even X spacing from array length</li> <li>Y as <code>num(100 - value)%</code> so “higher score = higher on the chart”</li> <li>Fill + dual-pass line stroke, dots, grid, stat card, phone shell</li> </ul> <p>Needs <strong>FSCSS ≥ 1.2.3</strong>.</p> <h2> 30-second HTML </h2> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/fscss@1.2.3/runtime.min.js"</span> <span class="na">async</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="k">@import</span><span class="p">((</span><span class="err">*</span><span class="p">)</span> <span class="n">from</span> <span class="n">st-core</span><span class="err">@</span><span class="n">v2</span><span class="p">)</span> <span class="err">@</span><span class="n">st-root</span><span class="p">()</span> <span class="err">@</span><span class="n">arr</span> <span class="n">myData</span><span class="p">[</span><span class="m">56</span><span class="p">,</span> <span class="m">67</span><span class="p">,</span> <span class="m">70</span><span class="p">,</span> <span class="m">43</span><span class="p">,</span> <span class="m">67</span><span class="p">,</span> <span class="m">80</span><span class="p">]</span> <span class="err">@</span><span class="n">st-chart-fill</span><span class="p">(.</span><span class="n">chart-fill</span><span class="p">,</span> <span class="n">myData</span><span class="p">)</span> <span class="err">@</span><span class="n">st-chart-line</span><span class="p">(.</span><span class="n">chart-line</span><span class="p">,</span> <span class="n">myData</span><span class="p">)</span> <span class="p">.</span><span class="n">chart</span> <span class="p">{</span> <span class="k">@st-chart-points</span><span class="p">(</span><span class="n">myData</span><span class="p">)</span> <span class="n">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="nt">height</span><span class="o">:</span> <span class="err">200</span><span class="nt">px</span><span class="o">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart-fill"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"chart-line"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> </code></pre> </div> <p>Live data? Only update <code>--st-p1</code>, <code>--st-p2</code>, … — CSS does the rest.</p> <h2> Production + Svelte </h2> <p>Don’t ship the FSCSS runtime just for static chart CSS.</p> <ol> <li>Compile: <code>fscss chart.fscss chart.css</code> </li> <li>Import the CSS </li> <li>Let Svelte set variables: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">$</span><span class="p">:</span> <span class="nx">cssVars</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nf">map</span><span class="p">((</span><span class="nx">v</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="s2">`--st-p</span><span class="p">${</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="mi">100</span> <span class="o">-</span> <span class="nx">v</span><span class="p">}</span><span class="s2">%`</span><span class="p">).</span><span class="nf">join</span><span class="p">(</span><span class="dl">'</span><span class="s1">; </span><span class="dl">'</span><span class="p">)</span> </code></pre> </div> <p>Guide + sample: <a href="https://github.com/fscss-ttr/st-core.fscss/tree/main/integration/svelte" rel="noopener noreferrer"><code>integration/svelte</code></a><br><br> HTML demos: <a href="https://github.com/fscss-ttr/st-core.fscss/tree/main/integration/html" rel="noopener noreferrer"><code>integration/html</code></a></p> <h2> Open to more stacks </h2> <p>Vue, React, Astro, … — same pattern. See <a href="https://github.com/fscss-ttr/st-core.fscss/tree/main/integration" rel="noopener noreferrer"><code>integration/README.md</code></a> and PR a folder if you want to share how you wire it.</p> <p>Under the hood: <a href="https://github.com/fscss-ttr/st-core.fscss/blob/main/EXPLAINED.md" rel="noopener noreferrer">EXPLAINED.md</a></p> <p><strong>FSCSS builds the renderer. Your app only moves the numbers.</strong></p> svelte fscss css opensource FSCSS tutorial Sat, 19 Sep 2026 21:47:25 +0000 https://dev.to/fscss-ttr/st-corefscss-v2-is-out-which-has-no-fixed-8-point-setting-2hho https://dev.to/fscss-ttr/st-corefscss-v2-is-out-which-has-no-fixed-8-point-setting-2hho <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/sheraz046/building-charts-with-pure-css-no-svg-no-canvas-no-js-required-3aa9" class="crayons-story__hidden-navigation-link">Building Charts with Pure CSS — No SVG, No Canvas, No JS Required</a> <div class="crayons-story__body crayons-story__body-full_post"> <a href="https://dev.to/sheraz046/building-charts-with-pure-css-no-svg-no-canvas-no-js-required-3aa9" class="crayons-article__context-note crayons-article__context-note__feed"><p>Uses clip-path and CSS variables</p> </a> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/sheraz046" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3685245%2F54ce438c-af84-45ac-aacf-23fda4316025.jpeg" alt="sheraz046 profile" class="crayons-avatar__image" width="460" height="460"> </a> </div> <div> <div> <a href="/sheraz046" class="crayons-story__secondary fw-medium m:hidden"> Muhammad Sheraz </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Muhammad Sheraz <div id="story-author-preview-content-3508105" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/sheraz046" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3685245%2F54ce438c-af84-45ac-aacf-23fda4316025.jpeg" class="crayons-avatar__image" alt="" width="460" height="460"> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Muhammad Sheraz</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/sheraz046/building-charts-with-pure-css-no-svg-no-canvas-no-js-required-3aa9" class="crayons-story__tertiary fs-xs"><time>Apr 16</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/sheraz046/building-charts-with-pure-css-no-svg-no-canvas-no-js-required-3aa9" id="article-link-3508105"> Building Charts with Pure CSS — No SVG, No Canvas, No JS Required </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/sheraz046/building-charts-with-pure-css-no-svg-no-canvas-no-js-required-3aa9" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"> </span> </span> <span class="aggregate_reactions_counter">8<span class="hidden s:inline">&nbsp;reactions</span></span> </div> </a> <a href="https://dev.to/sheraz046/building-charts-with-pure-css-no-svg-no-canvas-no-js-required-3aa9#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> 3<span class="hidden s:inline">&nbsp;comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> </div> </div> </div> </div> </div> </div>