Skip to content

Instantly share code, notes, and snippets.

@sometgirldotonline

sometgirldotonline/readme.md

Last active August 31, 2025 08:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sometgirldotonline/96284d07080767edd56d2ca719f4cfe5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sometgirldotonline/96284d07080767edd56d2ca719f4cfe5 to your computer and use it in GitHub Desktop.
Download ZIP
tuik - tiny ui kit
Raw
template.html
<!-- tuik HTML template. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TUIK Preview</title>
<link rel="stylesheet" href="https://ghraw.novafurry.workers.dev/gist/novafurry/96284d07080767edd56d2ca719f4cfe5/raw/77704dc0c33b33931aa2b2750cfd5ce551f064dd/tuik.css" />
</head>
<body>
<nav>
<h1>TUIK Preview</h1>
<ul>
<li><a href="#" active>Nav Link 1</a></li>
<li><a href="#">Nav Link 2</a></li>
<li><a href="#">Nav Link 3</a></li>
</ul>
</nav>
<main>
<article>
<h2>Typography</h2>
<p>
This is a paragraph with <strong>strong</strong>, <em>emphasis</em>,
<a href="#">a link</a>, and <code>inline code</code>.
</p>
<blockquote>This is a blockquote.</blockquote>
<pre><code>preformatted code block</code></pre>
<ul>
<li>Unordered list item</li>
<li>Another item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Another item</li>
</ol>
<dl>
<dt>Definition term</dt>
<dd>Definition description</dd>
</dl>
</article>
<article>
<h2>Forms</h2>
<form>
<p>
<label>Text <input type="text" placeholder="Text" /></label>
</p>
<p>
<label
>Password <input type="password" placeholder="Password"
/></label>
</p>
<p>
<label>Email <input type="email" placeholder="Email" /></label>
</p>
<p>
<label>Number <input type="number" value="5" /></label>
</p>
<p>
<label>Range <input type="range" /></label>
</p>
<p>
<label>File <input type="file" /></label>
</p>
<p>
<label><input type="checkbox" /> Checkbox</label>
</p>
<p>
<label><input type="radio" name="r" /> Radio 1</label>
<label><input type="radio" name="r" /> Radio 2</label>
</p>
<p>
<label>Textarea <textarea></textarea></label>
</p>
<p>
<label
>Select
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
</label>
</p>
<p>
<button type="button">Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</p>
</form>
</article>
<article>
<h2>Tables</h2>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell A1</td>
<td>Cell A2</td>
</tr>
<tr>
<td>Cell B1</td>
<td>Cell B2</td>
</tr>
</tbody>
</table>
</article>
<article>
<h2>Components</h2>
<section>
<h3>Card Example</h3>
<p>
Cards can be represented with <code>&lt;section&gt;</code> or
<code>&lt;article&gt;</code>.
</p>
</section>
<div role="alert">This is an alert message.</div>
<progress value="50" max="100"></progress>
<meter value="0.7">70%</meter>
<details>
<summary>Accordion (details/summary)</summary>
<p>Hidden content</p>
</details>
<dialog open>
<p>This is a modal dialog.</p>
<button>Close</button>
</dialog>
<nav aria-label="Breadcrumb">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Section</a></li>
<li>Current</li>
</ol>
</nav>
<nav aria-label="Pagination">
<ul>
<li><a href="#">&laquo; Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">Next &raquo;</a></li>
</ul>
</nav>
</article>
<article>
<h2>Tabs</h2>
<section>
<details tab open>
<summary>Tab One</summary>
<p>Content for Tab One.</p>
</details>
<details tab>
<summary>Tab Two</summary>
<p>Content for Tab Two.</p>
</details>
<details tab>
<summary>Tab Three</summary>
<p>Content for Tab Three.</p>
</details>
</section>
</article>
</main>
<aside>
<h2>Sidebar</h2>
<ul>
<li><a href="#">Sidebar link 1</a></li>
<li><a href="#">Sidebar link 2</a></li>
</ul>
</aside>
<footer>
<p>Footer content © 2025</p>
</footer>
</body>
</html>
Raw
tuik.css
/* tuik v0.0 by github.com/novafurry */
:root {
background-color: #fdfaf5;
font-family: system-ui;
}
nav:first-child {
border-bottom: 3px #474747 solid;
width: 100vw;
background-color: #fdfaf5;
position: fixed;
left: 0px;
top: 0px;
padding: 5px;
}
nav ul a[active] {
font-weight: bold;
}
nav ul a:not([active]):hover {
font-weight: bold;
}
nav ul:has(:hover) a[active] {
font-weight: normal;
}
nav * {
display: inline-block;
margin: 0px;
}
nav ul {
float: right;
list-style-type: none;
margin-right: 30px;
margin-top: auto;
margin-bottom: auto;
}
body {
margin-top: 50px;
}
blockquote {
margin: 0px;
padding: 10px;
border-left: #000 3px solid;
}
code {
background-color: #0000001e;
padding: 10px;
}
p code {
padding: 4px;
}
dl {
padding: 10px;
background-color: #0000001e;
width: fit-content;
min-width: 45%;
}
dl dt {
font-size: 1.4em;
font-weight: bold;
font-style: italic;
}
dl dd {
margin-left: 10px;
}
input:not([type="file"], [type="range"]),
button {
outline: none;
background-color: #fdfaf5;
border: 2px solid black;
}
button {
padding: 3px;
border-radius: 2px;
}
/*********** Baseline, reset styles ***********/
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
width: 25rem;
}
/* Removes default focus */
input[type="range"]:focus {
outline: none;
}
/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
background-color: #000000;
border-radius: 0rem;
height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: -4px; /* Centers thumb on the track */
background-color: #000000;
border-radius: 0rem;
height: 1rem;
width: 1rem;
}
input[type="range"]:focus::-webkit-slider-thumb {
outline-offset: 0.125rem;
}
/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
background-color: #000000;
border-radius: 0rem;
height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-moz-range-thumb {
background-color: #000000;
border: 2px solid #fdfaf5; /*Removes extra border that FF applies*/
border-radius: 0rem;
height: 1rem;
width: 1rem;
}
input[type="range"]:focus::-moz-range-thumb {
outline-offset: 0.125rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment