@graphery/stylent.css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.graphery.online/stylent/stylent.min.css"> <script src="utils/colorize.js"></script> <title>stylent css</title> </head> <body> <a href="https://github.com/graphery/stylent.css" aria-label="View source on GitHub"> <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor"></path> <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path> </svg> </a> <header class="row"> <h1 class="col"><img src="https://www.graphery.org/img/gy.svg" width="100px" alt="graphery"> stylent css</h1> <div class="col align-center justify-end" style="font-size: var(--st-font-size-s)">version 1.1.0</div> </header> <main> <section id="why"> <p><strong>stylent css</strong> provides minimal style configuration for a quick and clean starting point. It is specially designed for better performance and higher productivity with fewer properties to result in cleaner code. It is small, powerful, elegant, and fully configurable via CSS variables.</p> </section> <section id="guidelines"> <div class="box"> <div class="row gutter"> <div class="col"> <h5 class="text-center">Intuitive</h5> <p class="content">Including <strong>stylent css</strong> in your HTML will automatically give an elegant style to all elements. No need to learn complicated and confusing CSS classes. It is all simple and intuitive. </p> </div> <div class="col"> <h5 class="text-center">Lightweight</h5> <p class="content"><strong>stylent css</strong> includes all the features you need, including grid, styles for all elements, utility class, dark mode support, keeping everything with a minimal footprint.</p> </div> <div class="col"> <h5 class="text-center">Customizable</h5> <p class="content"><strong>stylent css</strong> allows complete configuration and theming using CSS variables. The default style is beautiful, but you can quickly adapt it to your flavors and needs with our <a href="https://www.graphery.org/stylent.css/theme-editor/">theme editor</a>.</p> </div> </div> </div> </section> <section id="getting-started"> <h2>Getting Started</h2> <p>You simply add the main <strong>stylent css</strong> file in the header of your HTML project, that's all!</p> <pre><code><link rel="stylesheet" href="https://cdn.graphery.online/stylent/stylent.min.css"></code></pre> <p>Also, you can install it locally with <a href="https://www.npmjs.com/package/@graphery/stylent.css">NPM</a>:</p> <pre><code>npm i @graphery/stylent.css</code></pre> </section> <section id="desktop-and-mobile"> <h2>Desktop and mobile</h2> <p><strong>stylent css</strong> is wholly prepared for work perfectly in desktop, tablet, or mobile environments. Each element adjusts its characteristics for the best style in every size. For example, when a screen width of less 768px, default font is reduced to 14px, and all headers are reduced in size. </p> </section> <section id="browser-support"> <h2>Browser support</h2> <p><strong>stylent css</strong> works perfectly in all modern browsers, but does not work in older browsers that do not have support for CSS Variables. Check the CSS Variables support in <a href="https://caniuse.com/css-variables" target="_blank">caniuse.com</a>. </p> </section> <section id="index"> <h2>Table of content</h2> <ul> <li><a href="#typography">Typography</a></li> <li><a href="#link">Link</a></li> <li><a href="#blockquote">Blockquote</a></li> <li><a href="#list">List</a></li> <li><a href="#code">Code</a></li> <li><a href="#box">Box</a></li> <li><a href="#buttons">Buttons</a></li> <li><a href="#forms">Forms</a></li> <li><a href="#tables">Tables</a></li> <li><a href="#blocks">Header, Main, Footer, Section, and Article</a></li> <li><a href="#grids">Grids</a></li> <li><a href="#dark">Dark mode</a></li> <li><a href="#auxiliar">Auxiliary Classes</a> <ul> <li><a href="#hidden">Hidden</a></li> <li><a href="#align">Text align</a></li> <li><a href="#distribution">Element distribution (flex)</a></li> <li><a href="#size">Element size</a></li> <li><a href="#selection">Selection</a></li> <li><a href="#wrap">Wrap</a></li> </ul> </li> <li><a href="#customization">Customization and Theming</a></li> </ul> </section> <section id="typography"> <h2>Typography</h2> <p>The typography has <code>font-size</code> defined in 16px and <code>line-height</code> in 1.5em. <strong>stylent css</strong> uses the <code>font-family</code> by operative system: <ul> <li>Mac & iOS: <code>-apple-system, BlinkMacSystemFont</code></li> <li>Windows: <code>'Segoe UI'</code></li> <li>Android: <code>'Roboto'</code></li> <li>Generic: <code>'Helvetica Neue', Arial, sans-serif</code></li> </ul> <article class="box"> <h1>Heading <code>h1</code></h1> <h2>Heading <code>h2</code></h2> <h3>Heading <code>h3</code></h3> <h4>Heading <code>h4</code></h4> <h5>Heading <code>h5</code></h5> <h6>Heading <code>h6</code></h6> <p>Regular text</p> </article> <pre><code lang="html"><h1>Heading <code>h1</code></h1> <h2>Heading <code>h2</code></h2> <h3>Heading <code>h3</code></h3> <h4>Heading <code>h4</code></h4> <h5>Heading <code>h5</code></h5> <h6>Heading <code>h6</code></h6> <p>Regular Text</p></code></pre> </section> <section id="link"> <h2>Link</h2> <p>The Anchor element creates a hyperlink to web pages, files, email addresses, or locations in the same page.</p> <article class="box"> <p><a href="#">simple link</a></p> </article> <pre><code><p><a href="#">simple link</a></p></code></pre> </section> <section id="blockquotes"> <h2>Blockquotes</h2> <p>The Blockquote represents a section that is quoted from another source.</p> <article class="box"> <blockquote><p><strong>stylent css</strong> is amazing.</p></blockquote> </article> <pre><code><blockquote> <strong>stylent css</strong> is amazing. </blockquote></code></pre> </section> <section id="lists"> <h2>Lists</h2> <p class="description">The List is a very versatile and common way to display items. <strong>stylent css</strong> has three types of lists: The unordered list use <code>ul</code> element will be marked with an outline circles, the ordered list use <code>ol</code> element and your items will be marked with numbers, the description list use <code>dl</code> element and your items will not be marking, only spacings.</p> <article class="box"> <div class="row"> <div class="column"> <h6>Unordered list</h6> <ul> <li>item 1</li> <li>item 2</li> </ul> </div> <div class="column"> <h6>Ordered list</h6> <ol> <li>item 1</li> <li>item 2</li> </ol> </div> <div class="column"> <h6>Description list </h6> <dl> <dt>item 1</dt> <dd>item 1.1</dd> </dl> </div> </div> </article> <pre><code><h6>Unordered list</h6> <ul> <li>item 1</li> <li>item 2</li> </ul> <h6>Ordered list</h6> <ol> <li>item 1</li> <li>item 2</li> </ol> <h6>Description list </h6> <dl> <dt>item 1</dt> <dd>item 1.1</dd> </dl></code></pre> </section> <section id="image"> <h2>Image</h2> <p class="description">The Images don't have special style, only we remove the border when is included into an anchor, and the <code>vertical-align</code> is defined as `bottom`.</p> <article class="box"> <p>This is an inline image <img src="./img/image.png" alt="image"></p> </article> <pre><code><p>This is an inline image <img src="./img/image.png" alt="image"></p></code></pre> </section> <section id="code"> <h2>Code</h2> <p>The Code element represents a fragment of computer code. Just wrap anything in a <code>code</code> and it will appear like this. if you need a block, by default, enter the <code>code</code> within the <code>pre</code> element.</p> <article class="box"> <pre><code lang="css">.class { color: #9b4dca; }</code></pre> </article> <pre><code><pre><code lang="css">.class { color: #9b4dca; }</code></pre></code></pre> </section> <section id="box"> <h2>Box</h2> <p>You can define a box with the class <code>.box</code></p> <article> <div class="box">Message in a box</div> </article> <pre><code><div class="box">Message in a box</div></code></pre> </section> <section id="buttons"><h3>Buttons</h3> <p class="description">The Button, an essential part of any user experience. Buttons come in three basic styles in <strong>stylent css</strong>: The <code>button</code> element has flat color by default, whereas <code>.outline</code> has a simple outline around.</p> <article class="box"> <a class="button" href="javascript:void(0)">Default Button (a class="button")</a> <button>Default Button (<button>)</button> <button class="outline">Outlined Button (class="outline")</button> <a class="button" disabled href="javascript:void(0)">Disabled Default Button (a class="button")</a> <button disabled>Disabled Default Button (<button>)</button> <button disabled class="outline">Disabled Outlined Button (class="outline")</button> </article> <pre><code><a class="button" href="javascript:void(0)">Default Button (a class="button")</a> <button>Default Button (<button>)</button> <button class="outline">Outlined Button (class="outline")</button></code></pre> </section> <section id="forms"><h3>Forms</h3> <p class="description"><strong>stylent css</strong> helps to define forms that work perfectly on desktop and mobile in an easy way and with a design focused on user experience.</p> <form action="javascript: void(0)"> <fieldset> <legend>Example</legend> <label for="nameField">Name</label> <input id="nameField" type="text" placeholder="name"> <label for="ageRangeField">Age Range</label> <select id="ageRangeField"> <option value="0-13">0-13</option> <option value="14-17">14-17</option> <option value="18-23">18-23</option> <option value="24+">24+</option> </select> <label for="disabledField">Disabled field</label> <input id="disabledField" type="text" placeholder="disabled" disabled> <label for="commentField">Comment</label> <textarea id="commentField" placeholder="text…"></textarea> <div class="row"> <div class="col"> <button>Send</button> </div> <div class="col text-right"> <input id="confirmField" type="checkbox"> <label class="label-inline" for="confirmField">Send a copy to yourself</label></div> </div> </fieldset> </form> <pre><code><form action="javascript: void(0)"> <fieldset> <legend>Example</legend> <label for="name">Name</label> <input id="name" type="text" placeholder="name"> <label for="age">Age Range</label> <select id="age"> <option value="0-13">0-13</option> <option value="14-17">14-17</option> <option value="18-23">18-23</option> <option value="24+">24+</option> </select> <label for="comment">Comment</label> <textarea id="comment" placeholder="text…"></textarea> <div class="row"> <div class="col"> <button>Send</button> </div> <div class="col text-right"> <input id="confirm" type="checkbox"> <label class="label-inline" for="confirm">Send a copy to yourself</label></div> </div> </fieldset> </form></code></pre> <h3>All form elements</h3> <p>Check how is displayed every form element with <strong>stylent css</strong>:</p> <table aria-describedby="form elements"> <thead> <tr><th id="table-type">type</th><th id="table-code">code</th><th id="table-example">example</th></tr> </thead> <tbody> <tr><td>button</td><td><code><input type="button"></code></td><td><input type="button" value="button"/></td></tr> <tr><td>checkbox</td><td><code><input type="checkbox"></code></td><td><input type="checkbox"/></td></tr> <tr><td>color</td><td><code><input type="color"></code></td><td><input type="color"/></td></tr> <tr><td>date</td><td><code><input type="date"></code></td><td><input type="date"/></td></tr> <tr><td>datetime</td><td><code><input type="datetime-local"></code></td><td><input type="datetime-local"/></td></tr> <tr><td>email</td><td><code><input type="email"></code></td><td><input type="email"/></td></tr> <tr><td>file</td><td><code><input type="file"></code></td><td><input type="file"/></td></tr> <tr><td>hidden</td><td><code><input type="hidden"></code></td><td><input type="hidden"/></td></tr> <tr><td>image</td><td><code><input type="image" src=""></code></td><td><input type="image" src="img/up.svg" alt="up"/></td></tr> <tr><td>month</td><td><code><input type="month"></code></td><td><input type="month"/></td></tr> <tr><td>number</td><td><code><input type="number"></code></td><td><input type="number"/></td></tr> <tr><td>password</td><td><code><input type="password"></code></td><td><input type="password"/></td></tr> <tr><td>radio</td><td><code><input type="radio"></code></td><td><input type="radio"/></td></tr> <tr><td>range</td><td><code><input type="range"></code></td><td><input type="range"/></td></tr> <tr><td>reset</td><td><code><input type="reset"></code></td><td><input type="reset"/></td></tr> <tr><td>search</td><td><code><input type="search"></code></td><td><input type="search"/></td></tr> <tr><td>submit</td><td><code><input type="submit"></code></td><td><input type="submit"/></td></tr> <tr><td>tel</td><td><code><input type="tel"></code></td><td><input type="tel"/></td></tr> <tr><td>text</td><td><code><input type="text"></code></td><td><input type="text"/></td></tr> <tr><td>time</td><td><code><input type="time"></code></td><td><input type="time"/></td></tr> <tr><td>url</td><td><code><input type="url"></code></td><td><input type="url"/></td></tr> <tr><td>week</td><td><code><input type="week"></code></td><td><input type="week"/></td></tr> <tr><td>select</td><td><code><select><option>one</option><option>two</option></select></code></td><td><select> <option>one</option> <option>two</option> </select></td></tr> <tr><td>textarea</td><td><code><textarea"></textarea"></code></td><td><textarea></textarea></td></tr> </tbody> </table> <h3>Multi field per row</h3> <p>You can combine forms element and grid for define multiple fields per row.</p> <article class="box"> <div class="row"> <div class="col-10"><input type="text"></div> <div class="col-2"><a class="button size-full-width" href="javascript: void(0)">send</a></div> </div> <div class="row"> <div class="col-10"><input type="text"></div> <div class="col-2"> <button class="outline size-full-width">search</button> </div> </div> <div class="row align-center gutter"> <div class="col text-right"><label>Name</label></div> <div class="col-4"><input type="text"></div> <div class="col text-right"><label>Lastname</label></div> <div class="col-4"><input type="text"></div> </div> </article> <pre><code><div class="row"> <div class="col-10"><input type="text"></div> <div class="col-2"><a class="button size-full-width" href="javascript: void(0)">send</a></div> </div> <div class="row"> <div class="col-10"><input type="text"></div> <div class="col-2"> <button class="outline size-full-width">search</button> </div> </div> <div class="row align-center gutter"> <div class="col text-right"><label>Name</label></div> <div class="col-4"><input type="text"></div> <div class="col text-right"><label>Lastname</label></div> <div class="col-4"><input type="text"></div> </div> </code></pre> </section> <section id="tables"> <h2>Tables</h2> <p>The Table element represents data in two dimensions. <strong>stylent css</strong> displays an elegant table with <code>thead</code> and <code>tbody</code> estructure.</p> <article class="box"> <table aria-describedby="table"> <thead> <tr><th>Fist name</th><th>Last name</th><th>Age</th><th>Location</th></tr> </thead> <tbody> <tr><td>Jane</td><td>Doe</td><td>27</td><td>Los Angeles, CA</td></tr> <tr><td>John</td><td> Thompson</td><td>25</td><td>Los Angeles, CA</td></tr> </tbody> </table> </article> <pre><code><table aria-describedby="table"> <thead> <tr><th>Fist name</th><th>Last name</th><th>Age</th><th>Location</th></tr> </thead> <tbody> <tr><td>Jane</td><td>Doe</td><td>27</td><td>Los Angeles, CA</td></tr> <tr><td>John</td><td> Thompson</td><td>25</td><td>Los Angeles, CA</td></tr> </tbody> </table></code></pre> </section> <section id="blocks"> <h2>Semantic blocks</h2> <p>The Block Semantic Tags allow you to structure HTML content in an orderly and well-defined manner. <strong>stylent css</strong> defines styles for <code>header</code>, <code>main</code>, and<code>footer</code> with a maximum width of 960px, reducing their width when the screen is less than that value. Also, you can use the <code>section</code> or<code>article</code> tags to define isolated parts of your HTML.</p> <pre><code lang="html"><main> <section> <h2>Main, section and other semantic tags</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum felis ac purus malesuada rutrum. Aliquam cursus eget nisl non finibus. Fusce accumsan metus sit amet enim lobortis placerat. Sed volutpat diam eu bibendum euismod. Cras sit amet tortor sed dolor euismod scelerisque.</p> </section> </main></code></pre> <p>As example, this document uses this kind of tag.</p> </section> <section id="grids"> <h2>Grids</h2> <p>The Grid Layout is a two-dimensional grid-based layout system. With <strong>stylent css</strong> you only must be include a <code>.rom</code> and every <code>.col</code> classes. Alternativatly you can use <code>.col-1</code> to <code>.col-12</code> for defines the column relative size.</p> <article> <div class="row"> <div class="col box">.col</div> <div class="col box">.col</div> <div class="col box">.col</div> <div class="col box">.col</div> </div> <div class="row"> <div class="col-2 box">.col-2</div> <div class="col-10 box">.col-10</div> </div> </article> <pre><code> <div class="row"> <div class="col box">.col</div> <div class="col box">.col</div> <div class="col box">.col</div> <div class="col box">.col</div> </div> <div class="row"> <div class="col-2 box">.col-2</div> <div class="col-10 box">.col-10</div> </div> </code></pre> <p>By default, the columns of the grid have no space between them, but you can use the <code>.gutter</code> class to add space between columns.</p> <article> <div class="row gutter"> <div class="col box">.col</div> <div class="col box">.col</div> <div class="col box">.col</div> <div class="col box">.col</div> </div> <div class="row gutter"> <div class="col-2 box">.col-2</div> <div class="col-10 box">.col-10</div> </div> </article> <pre><code> <div class="row gutter"> <div class="col box">.col</div> <div class="col box">.col</div> <div class="col box">.col</div> <div class="col box">.col</div> </div> <div class="row gutter"> <div class="col-2 box">.col-2</div> <div class="col-10 box">.col-10</div> </div> </code></pre> </section> <section id="dark"> <h2>Dark mode</h2> <p>Dark mode has gone mainstream and Apple, Microsoft and Google have added dark mode to their operating systems. That's why stylent css includes an automatic dark mode style. You don't need to do anything. </p> <p>If you want to set the dark mode on your page regardless of the operating system, you can use the <code>.dark</code> auxiliary style, usually in the <body> tag.</p> <p>Conversely, if you want to set the light mode on your page regardless of the operating system, you can use the <code>.light</code> auxiliary style, usually in the <body> tag.</p> <article> <div id="current-mode">Your operating system is in <span></span></div> <button id="change-mode">force the <span></span> in this page</button> </article> <script> const body = document.body; const defaultLabel = document.querySelector('#current-mode span'); const buttonLabel = document.querySelector('#change-mode span'); let isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { defaultLabel.innerHTML = e.matches ? 'dark mode' : 'ligth mode'; }); defaultLabel.innerHTML = isDark ? 'dark mode' : 'ligth mode'; buttonLabel.innerHTML = isDark ? 'ligth mode' : 'dark mode'; document.querySelector('#change-mode').addEventListener('click', () => { body.classList.add(isDark ? 'no-dark' : 'dark'); body.classList.remove(isDark ? 'dark' : 'no-dark'); isDark = body.classList.contains('dark'); buttonLabel.innerHTML = isDark ? 'ligth mode' : 'dark mode'; }); </script> <table aria-describedby="dark"> <thead> <tr><th>Class</th><th>Description</th></tr> </thead> <tbody> <tr><td><code>.dark</code></td><td>force the dark mode</td></tr> <tr><td><code>.light</code></td><td>force the light mode</td></tr> </tbody> </table> </section> <section id="auxiliar"> <h2>Auxiliary Classes</h2> <p><strong>stylent css</strong> provides others useful basic classes to speed up development.</p> <h3 id="hidden">Hidden</h3> <table aria-describedby="hidden"> <thead> <tr><th>Class</th><th>Description</th></tr> </thead> <tbody> <tr><td><code>.hidden</code></td><td>hide the element</td></tr> </tbody> </table> <pre><code><div class="hidden">hidden text</div></code></pre> <h3 id="align">Text align</h3> <table aria-describedby="text align"> <thead> <tr><th>Class</th><th>Description</th></tr> </thead> <tr><td><code>.text-left</code></td><td>left align text</td></tr> <tr><td><code>.text-center</code></td><td>center align text</td></tr> <tr><td><code>.text-right</code></td><td>right align text</td></tr> </tbody> </table> <div class="box"> <p class="text-left">Left</p> <p class="text-center">Center</p> <p class="text-right">Right</p> </div> <pre><code><p class="text-left">Left</p> <p class="text-center">Center</p> <p class="text-right">Right</p></code></pre> <h3 id="distribution">Element distribution (flex)</h3> <table aria-describedby="element distribution"> <thead> <tr><th>Class</th><th>Description</th></tr> </thead> <tbody> <tr><td><code>.justify-start</code></td><td>defines content to the left</tr> <tr><td><code>.justify-center</code></td><td>defines content to the center</td></tr> <tr><td><code>.justify-end</code></td><td>defines content to the right</td></tr> <tr><td><code>.justify-distributed</code></td><td>define content distributed</td></tr> <tr><td><code>.align-start</code></td><td>vertical align content to the top</td></tr> <tr><td><code>.align-center</code></td><td>vertical align content to the center</td></tr> <tr><td><code>.align-end</code></td><td>vertical align content to the bottom</td></tr> <tr><td><code>.direction-vertical</code></td><td>distribute content as the column</td></tr> <tr><td><code>.direction-horizontal</code></td><td>distribute content as the row</td></tr> <tr><td><code>.center</code></td><td>center the element</td></tr> </tbody> </table> <div class="box"> <style> .example { height : 6em; } </style> <div class="row gutter"> <div class="col box justify-start example"> <p>justify-start</p> </div> <div class="col box justify-center example"> <p>justify-center</p> </div> <div class="col box justify-end example"> <p>justify-end</p> </div> </div> <div class="row gutter"> <div class="col box align-start example"> <p>align-start</p> </div> <div class="col box align-center example"> <p>align-center</p> </div> <div class="col box align-end example"> <p>align-end</p> </div> </div> <div class="row gutter"> <div class="col box direction-horizontal"> <p>direction-horizontal</p> <p>direction-horizontal</p> </div> <div class="col box direction-vertical"> <p>direction-vertical</p> <p>direction-verticall</p> </div> <div class="col box center example"> <p>center</p> </div> </div> </div> <h3 id="size">Element size</h3> <table aria-describedby="element size"> <thead> <tr><th>Class</th><th>Description</th></tr> </thead> <tr><td><code>.size-full-height</code></td><td>defines element height as 100%</td></tr> <tr><td><code>.size-full-width</code></td><td>defines element width as 100%</td></tr> <tr><td><code>.size-full</code></td><td>defines element height and width as 100%</td></tr> </tbody> </table> <h3 id="selection">Selection</h3> <table aria-describedby="selection"> <thead> <tr><th>Class</th><th>Description</th></tr> </thead> <tr><td><code>.not-selectable</code></td><td>This text is not selectable by the user</td></tr> </tbody> </table> <h3 id="wrap">Wrap</h3> <table aria-describedby="wrap"> <thead> <tr><th>Class</th><th>Description</th></tr> </thead> <tr><td><code>.no-wrap</code></td><td>Suppresses line breaks</td></tr> </tbody> </table> </section> <section id="customization"> <h2>Customization and Theming</h2> <p>You can define our own style with a few of CSS custom variables. If you change the initial values, you can define a custom theme for <strong>stylent css</strong>. You can create your own style and see the result directly with our</p> <p class="text-center"> <a href="https://www.graphery.org/stylent.css/theme-editor/" class="button">interactive theme editor</a> </p> <p>Of course, if you prefer to work directly by code, this is the list of available CSS custom variables and its initial values:</p> <table aria-describedby="custom variables"> <thead> <tr> <th id="custom-var">Variable</th> <th id="default-value">Default value</th> </tr> </thead> <tbody> <tr><td class="no-wrap">--st-link-hover-style </td><td><code>underline solid var(--st-fore-color);</code></td></tr> <tr><td class="no-wrap">--st-font-family</td><td><code> -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;</code></td></tr> <tr><td class="no-wrap">--st-font-family-mono</td><td><code> "Consolas", "Monaco", "Menlo", monospace;</code></td></tr> <tr><td class="no-wrap">--st-font-weight</td><td><code> 400;</code></td></tr> <tr><td class="no-wrap">--st-font-bold-weight</td><td><code> 500;</code></td></tr> <tr><td class="no-wrap">--st-font-size-xs</td><td><code> 0.8em;</code></td></tr> <tr><td class="no-wrap">--st-font-size-s</td><td><code> 0.9em;</code></td></tr> <tr><td class="no-wrap">--st-font-size</td><td><code> 15px;</code></td></tr> <tr><td class="no-wrap">--st-font-size-l</td><td><code> 1.15em;</code></td></tr> <tr><td class="no-wrap">--st-font-size-xl</td><td><code> 1.30em;</code></td></tr> <tr><td class="no-wrap">--st-font-size-xxl</td><td><code> 1.60em;</code></td></tr> <tr><td class="no-wrap">--st-font-size-xxxl</td><td><code> 2.00em;</code></td></tr> <tr><td class="no-wrap">--st-font-size-xxxxl</td><td><code> 2.30em;</code></td></tr> <tr><td class="no-wrap">--st-line-height</td><td><code> 1.6em;</code></td></tr> <tr><td class="no-wrap">--st-line-height-l</td><td><code> 2em;</code></td></tr> <tr><td class="no-wrap">--st-color-0</td><td><code> #fafafa;</code></td></tr> <tr><td class="no-wrap">--st-color-1</td><td><code> #f5f5f5;</code></td></tr> <tr><td class="no-wrap">--st-color-2</td><td><code> #e5e5e5;</code></td></tr> <tr><td class="no-wrap">--st-color-3</td><td><code> #d4d4d4;</code></td></tr> <tr><td class="no-wrap">--st-color-4</td><td><code> #a3a3a3;</code></td></tr> <tr><td class="no-wrap">--st-color-5</td><td><code> #737373;</code></td></tr> <tr><td class="no-wrap">--st-color-6</td><td><code> #525252;</code></td></tr> <tr><td class="no-wrap">--st-color-7</td><td><code> #404040;</code></td></tr> <tr><td class="no-wrap">--st-color-8</td><td><code> #262626;</code></td></tr> <tr><td class="no-wrap">--st-color-9</td><td><code> #171717;</code></td></tr> <tr><td class="no-wrap">--st-fore-color</td><td><code> var(--st-color-9);</code></td></tr> <tr><td class="no-wrap">--st-bg-color</td><td><code> var(--st-color-0);</code></td></tr> <tr><td class="no-wrap">--st-fore-color-alt</td><td><code> var(--st-color-3);</code></td></tr> <tr><td class="no-wrap">--st-bg-color-alt</td><td><code> var(--st-color-9);</code></td></tr> <tr><td class="no-wrap">--st-fore-color-code</td><td><code> var(--st-color-9);</code></td></tr> <tr><td class="no-wrap">--st-bg-color-code</td><td><code> var(--st-color-2);</code></td></tr> <tr><td class="no-wrap">--st-focus-border-color</td><td><code> var(--st-color-7);</code></td></tr> <tr><td class="no-wrap">--st-border-color</td><td><code> var(--st-color-4);</code></td></tr> <tr><td class="no-wrap">--st-fore-color-dark</td><td><code> var(--st-color-0);</code></td></tr> <tr><td class="no-wrap">--st-bg-color-dark</td><td><code> var(--st-color-9);</code></td></tr> <tr><td class="no-wrap">--st-fore-color-alt-dark</td><td><code> var(--st-color-9);</code></td></tr> <tr><td class="no-wrap">--st-bg-color-alt-dark</td><td><code> var(--st-color-3);</code></td></tr> <tr><td class="no-wrap">--st-border-width</td><td><code> 1px;</code></td></tr> <tr><td class="no-wrap">--st-border-radius</td><td><code> 2px;</code></td></tr> <tr><td class="no-wrap">--st-space</td><td><code> 0.5em;</code></td></tr> <tr><td class="no-wrap">--st-space-after</td><td><code> var(--st-space);</code></td></tr> <tr><td class="no-wrap">--st-space-before</td><td><code> calc(var(--st-space) * 2);</code></td></tr> <tr><td class="no-wrap">--st-gutter</td><td><code> calc(var(--st-space) * 3)";</code></td></tr> <tr><td class="no-wrap">--st-link-style</td><td><code> underline dotted var(--st-color-4);</code></td></tr> <tr><td class="no-wrap">--st-link-hover-style</td><td><code> underline solid var(--st-fore-color);</code></td></tr> </tbody> </table> </section> </main> <footer class="text-center"> <p><a href="LICENSE.html">MIT License</a> | Graphery Project made with ❤️</p> </footer> <script> document.querySelectorAll('pre > code').forEach(code => { code.innerHTML = colorize(htmlEscape(code), code.getAttribute('lang') || 'html') }); </script> </body> </html>