sulphuris

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sulphuris | An adaptable CSS ultility library</title> <meta name="description" content="Sulphuris aims to be the soul of your next front-end project. Inspired by Bootstrap and Primer, but tailored to suit your everyday front-end development needs."> <link href="https://fonts.googleapis.com/css?family=Nunito|Roboto:400,700" rel="stylesheet"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <link rel="stylesheet" href="dist/sulphuris.css"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <link rel="shortcut icon" type="image/png" href="favicon.png"> <style> pre { border: 1px solid black; box-shadow: 10px 10px black; } .switch { align-items: center; -webkit-appearance: none; appearance: none; background: none; border: 2px solid var(--color-foreground); padding: 0; text-decoration: none; color: inherit; height: 32px; width: 58px; border-radius: 16px; background: var(--color-black); position: relative; transition: background 0.25s ease-in-out; cursor: pointer; } .switch[aria-checked="true"] { background: var(--color-primary); } .switch::before { display: block; content: ''; border-radius: 14px; border: 2px solid var(--color-background); width: 24px; height: 24px; background: var(--color-foreground); transition: transform 0.25s ease-in-out, background 0.25s ease-in-out, border 0.25s ease-in-out; } .switch[aria-checked="true"]::before { transform: translateX(26px); border-color: var(--color-primary); } .switch .icon-lightmode { opacity: 0; transition: opacity 0.25s ease-in-out; } .switch[aria-checked="true"] .icon-lightmode { opacity: 1; } .switch[aria-checked="true"] .icon-darkmode { opacity: 0; } .switch .icon-darkmode { opacity: 1; color: var(--color-foreground); transition: opacity 0.25s ease-in-out; } [data-color-scheme="dark"] .darkmode-invert { filter: invert(1); } .npm-install-snippet pre code::before { content: '$'; color: var(--color-black); margin-right: 8px; } .opacity-hover { transition: opacity 0.25s ease-in-out; } @media only screen and (min-width: 1024px) { .opacity-hover:hover { opacity: 0.5; } } </style> </head> <body class="bg-primary"> <div class="background h-100vh w-100vw position-fixed t-0 l-0 z--1"> <div class="container grid grid-gutter h-100p"> <div class="col-3 col-lg-1 h-100p"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-3 col-lg-1 h-100p"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-3 col-lg-1 h-100p"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-3 col-lg-1 h-100p"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-1 h-100p d-none d-lg-block"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-1 h-100p d-none d-lg-block"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-1 h-100p d-none d-lg-block"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-1 h-100p d-none d-lg-block"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-1 h-100p d-none d-lg-block"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-1 h-100p d-none d-lg-block"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-1 h-100p d-none d-lg-block"> <div class="h-100p border border-dashed border-y-0"></div> </div> <div class="col-1 h-100p d-none d-lg-block"> <div class="h-100p border border-dashed border-y-0"></div> </div> </div> </div>  <header class="bg-primary border-b"> <div class="container py-24 d-flex align-center"> <div class="h5 d-flex align-center"><img src="sulphuris-logo.svg" alt="🜍" height="22" width="18" class="w-100p h-auto mr-8 darkmode-invert" style="max-width: 18px;"> Sulphuris <a href="https://www.npmjs.com/package/sulphuris"><img class="ml-8 ml-lg-16 d-block" src="https://img.shields.io/npm/v/sulphuris" alt="npm version" data-canonical-src="https://img.shields.io/npm/v/sulphuris" style="max-width: 100%;"></a></div> <div class="ml-auto h6 d-flex align-center"> <a href="https://sulphuris.github.io" class="opacity-hover text-foreground text-bold text-none d-flex align-center ml-lg-24 ml-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"><path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z" fill="currentColor"></path></svg> <span class="ml-4 border-b border-2 pb-2">Docs</span></a> <a href="https://github.com/sulphuris/sulphuris" class="opacity-hover text-foreground text-bold text-none d-flex align-center ml-lg-24 ml-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" fill="currentColor"></path></svg> <span class="ml-4 border-b border-2 pb-2">Repo</span></a> <button class="js-darkmode-toggle switch ml-lg-24 ml-16" aria-checked="true" role="checkbox"> <svg class="icon-lightmode absolute-center-vertical l-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0ZM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8Zm13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8Zm-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13Zm3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061ZM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z" fill="currentColor"></path></svg> <svg class="icon-darkmode absolute-center-vertical r-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678Z" fill="currentColor"></path></svg> </button> <script> document.querySelector('.js-darkmode-toggle').addEventListener('click', function() { if (this.getAttribute('aria-checked') === 'true') { this.setAttribute('aria-checked', 'false'); document.documentElement.setAttribute('data-color-scheme', 'dark'); } else { this.setAttribute('aria-checked', 'true'); document.documentElement.setAttribute('data-color-scheme', 'light'); } }); </script> </div> </div> </header> <main role="main"> <div class="container text-center py-32 d-flex align-center justify-center mb-128"> <div class="text-center"> <img src="sulphuris-logo.svg" alt="🜍" height="538" width="432" class="w-100p h-auto mt-32 mt-lg-64 darkmode-invert" style="max-width: 200px;"> <h1 class="hello my-32">An <span class="text-underline">adaptable</span> CSS<br class="d-none d-sm-block"> ultility library.</h1> <p class="col-8-max mx-auto p1">Imagine how awesome it would be if you could quickly personalize your own utility library for every project you do? Well, you don't have to imagine anymore.</p> <div class="position-relative npm-install-snippet"> <pre><code class="hljs language-bash text-left">npm install sulphuris</code></pre> <button class="opacity-hover reset absolute-center-vertical r-0 h-48" style="padding-left: 16px; padding-right: 16px; border-left: dashed 1px black; cursor: pointer" onclick="navigator.clipboard.writeText('npm install sulphuris')"> <span class="sr-only">Copy</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg> </button> </div> </div> </div> <div class="container grid grid-gutter text-center"> <div class="col-6 col-lg-3"> <div class="h-128 bg-primary border"> <div class="grid grid-gutter text-background"> <div class="col-4"> <div class="h-64 bg-foreground">1</div> </div> <div class="col-4"> <div class="h-64 bg-foreground">2</div> </div> <div class="col-4"> <div class="h-64 bg-foreground">3</div> </div> </div> </div> </div> <div class="col-6 col-lg-3"> <div class="h-128 bg-primary border"> <div class="grid grid-gutter text-background"> <div class="col-4"> <div class="h-64 bg-foreground">4</div> </div> <div class="col-4"> <div class="h-64 bg-foreground">5</div> </div> <div class="col-4"> <div class="h-64 bg-foreground">6</div> </div> </div> </div> </div> <div class="col-6 col-lg-3"> <div class="h-128 bg-primary border"> <div class="grid grid-gutter text-background"> <div class="col-4"> <div class="h-64 bg-foreground">7</div> </div> <div class="col-4"> <div class="h-64 bg-foreground">8</div> </div> <div class="col-4"> <div class="h-64 bg-foreground">9</div> </div> </div> </div> </div> <div class="col-6 col-lg-3"> <div class="h-128 bg-primary border"> <div class="grid grid-gutter text-background"> <div class="col-4"> <div class="h-64 bg-foreground">10</div> </div> <div class="col-4"> <div class="h-64 bg-foreground">11</div> </div> <div class="col-4"> <div class="h-64 bg-foreground">12</div> </div> </div> </div> </div> </div> <div class="container mt-128"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-gray-900 text-white p-8 font-mono">gray-900</div> </div> <div class="w-10p"> <div class="h-128 bg-gray-800 text-white p-8 font-mono">gray-800</div> </div> <div class="w-10p"> <div class="h-128 bg-gray-700 text-white p-8 font-mono">gray-700</div> </div> <div class="w-10p"> <div class="h-128 bg-gray-600 text-white p-8 font-mono">gray-600</div> </div> <div class="w-10p"> <div class="h-128 bg-gray-500 text-white p-8 font-mono">gray-500</div> </div> <div class="w-10p"> <div class="h-128 bg-gray-400 p-8 font-mono">gray-400</div> </div> <div class="w-10p"> <div class="h-128 bg-gray-300 p-8 font-mono">gray-300</div> </div> <div class="w-10p"> <div class="h-128 bg-gray-200 p-8 font-mono">gray-200</div> </div> <div class="w-10p"> <div class="h-128 bg-gray-100 p-8 font-mono">gray-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-yellow-900 text-white p-8 font-mono">yellow-900</div> </div> <div class="w-10p"> <div class="h-128 bg-yellow-800 text-white p-8 font-mono">yellow-800</div> </div> <div class="w-10p"> <div class="h-128 bg-yellow-700 text-white p-8 font-mono">yellow-700</div> </div> <div class="w-10p"> <div class="h-128 bg-yellow-600 text-white p-8 font-mono">yellow-600</div> </div> <div class="w-10p"> <div class="h-128 bg-yellow-500 text-white p-8 font-mono">yellow-500</div> </div> <div class="w-10p"> <div class="h-128 bg-yellow-400 p-8 font-mono">yellow-400</div> </div> <div class="w-10p"> <div class="h-128 bg-yellow-300 p-8 font-mono">yellow-300</div> </div> <div class="w-10p"> <div class="h-128 bg-yellow-200 p-8 font-mono">yellow-200</div> </div> <div class="w-10p"> <div class="h-128 bg-yellow-100 p-8 font-mono">yellow-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-orange-900 text-white p-8 font-mono">orange-900</div> </div> <div class="w-10p"> <div class="h-128 bg-orange-800 text-white p-8 font-mono">orange-800</div> </div> <div class="w-10p"> <div class="h-128 bg-orange-700 text-white p-8 font-mono">orange-700</div> </div> <div class="w-10p"> <div class="h-128 bg-orange-600 text-white p-8 font-mono">orange-600</div> </div> <div class="w-10p"> <div class="h-128 bg-orange-500 text-white p-8 font-mono">orange-500</div> </div> <div class="w-10p"> <div class="h-128 bg-orange-400 p-8 font-mono">orange-400</div> </div> <div class="w-10p"> <div class="h-128 bg-orange-300 p-8 font-mono">orange-300</div> </div> <div class="w-10p"> <div class="h-128 bg-orange-200 p-8 font-mono">orange-200</div> </div> <div class="w-10p"> <div class="h-128 bg-orange-100 p-8 font-mono">orange-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-red-900 text-white p-8 font-mono">red-900</div> </div> <div class="w-10p"> <div class="h-128 bg-red-800 text-white p-8 font-mono">red-800</div> </div> <div class="w-10p"> <div class="h-128 bg-red-700 text-white p-8 font-mono">red-700</div> </div> <div class="w-10p"> <div class="h-128 bg-red-600 text-white p-8 font-mono">red-600</div> </div> <div class="w-10p"> <div class="h-128 bg-red-500 text-white p-8 font-mono">red-500</div> </div> <div class="w-10p"> <div class="h-128 bg-red-400 p-8 font-mono">red-400</div> </div> <div class="w-10p"> <div class="h-128 bg-red-300 p-8 font-mono">red-300</div> </div> <div class="w-10p"> <div class="h-128 bg-red-200 p-8 font-mono">red-200</div> </div> <div class="w-10p"> <div class="h-128 bg-red-100 p-8 font-mono">red-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-violet-900 text-white p-8 font-mono">violet-900</div> </div> <div class="w-10p"> <div class="h-128 bg-violet-800 text-white p-8 font-mono">violet-800</div> </div> <div class="w-10p"> <div class="h-128 bg-violet-700 text-white p-8 font-mono">violet-700</div> </div> <div class="w-10p"> <div class="h-128 bg-violet-600 text-white p-8 font-mono">violet-600</div> </div> <div class="w-10p"> <div class="h-128 bg-violet-500 text-white p-8 font-mono">violet-500</div> </div> <div class="w-10p"> <div class="h-128 bg-violet-400 p-8 font-mono">violet-400</div> </div> <div class="w-10p"> <div class="h-128 bg-violet-300 p-8 font-mono">violet-300</div> </div> <div class="w-10p"> <div class="h-128 bg-violet-200 p-8 font-mono">violet-200</div> </div> <div class="w-10p"> <div class="h-128 bg-violet-100 p-8 font-mono">violet-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-purple-900 text-white p-8 font-mono">purple-900</div> </div> <div class="w-10p"> <div class="h-128 bg-purple-800 text-white p-8 font-mono">purple-800</div> </div> <div class="w-10p"> <div class="h-128 bg-purple-700 text-white p-8 font-mono">purple-700</div> </div> <div class="w-10p"> <div class="h-128 bg-purple-600 text-white p-8 font-mono">purple-600</div> </div> <div class="w-10p"> <div class="h-128 bg-purple-500 text-white p-8 font-mono">purple-500</div> </div> <div class="w-10p"> <div class="h-128 bg-purple-400 p-8 font-mono">purple-400</div> </div> <div class="w-10p"> <div class="h-128 bg-purple-300 p-8 font-mono">purple-300</div> </div> <div class="w-10p"> <div class="h-128 bg-purple-200 p-8 font-mono">purple-200</div> </div> <div class="w-10p"> <div class="h-128 bg-purple-100 p-8 font-mono">purple-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-indigo-900 text-white p-8 font-mono">indigo-900</div> </div> <div class="w-10p"> <div class="h-128 bg-indigo-800 text-white p-8 font-mono">indigo-800</div> </div> <div class="w-10p"> <div class="h-128 bg-indigo-700 text-white p-8 font-mono">indigo-700</div> </div> <div class="w-10p"> <div class="h-128 bg-indigo-600 text-white p-8 font-mono">indigo-600</div> </div> <div class="w-10p"> <div class="h-128 bg-indigo-500 text-white p-8 font-mono">indigo-500</div> </div> <div class="w-10p"> <div class="h-128 bg-indigo-400 p-8 font-mono">indigo-400</div> </div> <div class="w-10p"> <div class="h-128 bg-indigo-300 p-8 font-mono">indigo-300</div> </div> <div class="w-10p"> <div class="h-128 bg-indigo-200 p-8 font-mono">indigo-200</div> </div> <div class="w-10p"> <div class="h-128 bg-indigo-100 p-8 font-mono">indigo-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-blue-900 text-white p-8 font-mono">blue-900</div> </div> <div class="w-10p"> <div class="h-128 bg-blue-800 text-white p-8 font-mono">blue-800</div> </div> <div class="w-10p"> <div class="h-128 bg-blue-700 text-white p-8 font-mono">blue-700</div> </div> <div class="w-10p"> <div class="h-128 bg-blue-600 text-white p-8 font-mono">blue-600</div> </div> <div class="w-10p"> <div class="h-128 bg-blue-500 text-white p-8 font-mono">blue-500</div> </div> <div class="w-10p"> <div class="h-128 bg-blue-400 p-8 font-mono">blue-400</div> </div> <div class="w-10p"> <div class="h-128 bg-blue-300 p-8 font-mono">blue-300</div> </div> <div class="w-10p"> <div class="h-128 bg-blue-200 p-8 font-mono">blue-200</div> </div> <div class="w-10p"> <div class="h-128 bg-blue-100 p-8 font-mono">blue-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-teal-900 text-white p-8 font-mono">teal-900</div> </div> <div class="w-10p"> <div class="h-128 bg-teal-800 text-white p-8 font-mono">teal-800</div> </div> <div class="w-10p"> <div class="h-128 bg-teal-700 text-white p-8 font-mono">teal-700</div> </div> <div class="w-10p"> <div class="h-128 bg-teal-600 text-white p-8 font-mono">teal-600</div> </div> <div class="w-10p"> <div class="h-128 bg-teal-500 text-white p-8 font-mono">teal-500</div> </div> <div class="w-10p"> <div class="h-128 bg-teal-400 p-8 font-mono">teal-400</div> </div> <div class="w-10p"> <div class="h-128 bg-teal-300 p-8 font-mono">teal-300</div> </div> <div class="w-10p"> <div class="h-128 bg-teal-200 p-8 font-mono">teal-200</div> </div> <div class="w-10p"> <div class="h-128 bg-teal-100 p-8 font-mono">teal-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-green-900 text-white p-8 font-mono">green-900</div> </div> <div class="w-10p"> <div class="h-128 bg-green-800 text-white p-8 font-mono">green-800</div> </div> <div class="w-10p"> <div class="h-128 bg-green-700 text-white p-8 font-mono">green-700</div> </div> <div class="w-10p"> <div class="h-128 bg-green-600 text-white p-8 font-mono">green-600</div> </div> <div class="w-10p"> <div class="h-128 bg-green-500 text-white p-8 font-mono">green-500</div> </div> <div class="w-10p"> <div class="h-128 bg-green-400 p-8 font-mono">green-400</div> </div> <div class="w-10p"> <div class="h-128 bg-green-300 p-8 font-mono">green-300</div> </div> <div class="w-10p"> <div class="h-128 bg-green-200 p-8 font-mono">green-200</div> </div> <div class="w-10p"> <div class="h-128 bg-green-100 p-8 font-mono">green-100</div> </div> </div> </div> <div class="container mt-32"> <div class="d-flex border rounded rounded-6"> <div class="w-10p"> <div class="h-128 bg-black text-white p-8 font-mono"></div> </div> <div class="w-10p"> <div class="h-128 bg-lime-900 text-white p-8 font-mono">lime-900</div> </div> <div class="w-10p"> <div class="h-128 bg-lime-800 text-white p-8 font-mono">lime-800</div> </div> <div class="w-10p"> <div class="h-128 bg-lime-700 text-white p-8 font-mono">lime-700</div> </div> <div class="w-10p"> <div class="h-128 bg-lime-600 text-white p-8 font-mono">lime-600</div> </div> <div class="w-10p"> <div class="h-128 bg-lime-500 text-white p-8 font-mono">lime-500</div> </div> <div class="w-10p"> <div class="h-128 bg-lime-400 p-8 font-mono">lime-400</div> </div> <div class="w-10p"> <div class="h-128 bg-lime-300 p-8 font-mono">lime-300</div> </div> <div class="w-10p"> <div class="h-128 bg-lime-200 p-8 font-mono">lime-200</div> </div> <div class="w-10p"> <div class="h-128 bg-lime-100 p-8 font-mono">lime-100</div> </div> </div> </div> <div class="container grid grid-gutter mt-128"> <div class="col-6 col-lg-3"> <div class="h-128 bg-primary border"></div> </div> <div class="col-6 col-offset-lg-1"> <div class="h-128 bg-primary border"></div> </div> </div> <div class="container grid grid-gutter mt-128"> <div class="col-6-max mx-auto"> <div class="h-128 bg-primary border"></div> </div> </div> <div class="container my-128"> <pre><code class="hljs language-typescript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">MyClass</span> { <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-attr">myValue</span>: <span class="hljs-built_in">string</span>; <span class="hljs-title function_">constructor</span>(<span class="hljs-params">init: <span class="hljs-built_in">string</span></span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">myValue</span> = init; } } <span class="hljs-keyword">import</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>); <span class="hljs-variable language_">module</span> <span class="hljs-title class_">MyModule</span> { <span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyInterface</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">Other</span> { <span class="hljs-attr">myProperty</span>: <span class="hljs-built_in">any</span>; } } <span class="hljs-keyword">declare</span> magicNumber <span class="hljs-built_in">number</span>; myArray.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">() =></span> { }); <span class="hljs-comment">// fat arrow syntax</span> </code></pre> <h1>Heading 1</h1> <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum facilisis finibus. Morbi ac dapibus nibh. Quisque libero ipsum, pulvinar sit amet rhoncus quis, fermentum et lectus. Ut ac ipsum eget dolor bibendum elementum ut non sapien. In tincidunt lacus sit amet ex volutpat placerat. Vestibulum ullamcorper mi erat, vel facilisis elit convallis vitae. Sed vitae accumsan ligula, vel vehicula neque. In id tristique nisl, sed ultricies justo. Pellentesque lacinia justo urna, eget blandit urna interdum in. Vivamus sit amet molestie libero.</p> <h2>Heading 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum facilisis finibus. Morbi ac dapibus nibh. Quisque libero ipsum, pulvinar sit amet rhoncus quis, fermentum et lectus. Ut ac ipsum eget dolor bibendum elementum ut non sapien. In tincidunt lacus sit amet ex volutpat placerat. Vestibulum ullamcorper mi erat, vel facilisis elit convallis vitae. Sed vitae accumsan ligula, vel vehicula neque. In id tristique nisl, sed ultricies justo. Pellentesque lacinia justo urna, eget blandit urna interdum in. Vivamus sit amet molestie libero.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum facilisis finibus. Morbi ac dapibus nibh. Quisque libero ipsum, pulvinar sit amet rhoncus quis, fermentum et lectus. Ut ac ipsum eget dolor bibendum elementum ut non sapien. In tincidunt lacus sit amet ex volutpat placerat. Vestibulum ullamcorper mi erat, vel facilisis elit convallis vitae. Sed vitae accumsan ligula, vel vehicula neque. In id tristique nisl, sed ultricies justo. Pellentesque lacinia justo urna, eget blandit urna interdum in. Vivamus sit amet molestie libero.</p> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small> <h3>Heading 3</h3> <p class="caption">Caption</p> <p class="supertitle">Supertitle</p> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div> <div class="container my-128"> <button class="btn text-bold ml-16">Button</button> <button class="btn btn-inverted text-bold ml-16">Button Inverted</button> <button class="btn btn-outline text-bold ml-16">Button Outline</button> <div class="bg-foreground p-16 mt-16"> <button class="btn btn-outline btn-inverted text-bold">Button Outline Inverted</button> </div> </div> </main>  <script> (function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document); </script> </body> </html>