|
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <title>system.css | A Tailwind retro Apple-inspired design system</title> |
| <link rel="Shortcut Icon" type="image/x-icon" href="icon.png" /> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
|
|
| <meta property="og:title" content="system.css | Tailwind Edition" /> |
| <meta name="Description" content="A Tailwind design system for building retro Apple interfaces" /> |
| <meta property="og:description" content="A Tailwind design system for building retro Apple interfaces" /> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| DEFAULT: '#d97706', |
| 50: '#fffbeb', |
| 100: '#fef3c7', |
| 200: '#fde68a', |
| 300: '#fcd34d', |
| 400: '#fbbf24', |
| 500: '#f59e0b', |
| 600: '#d97706', |
| 700: '#b45309', |
| 800: '#92400e', |
| 900: '#78350f', |
| }, |
| secondary: { |
| DEFAULT: '#334155', |
| 50: '#f8fafc', |
| 100: '#f1f5f9', |
| 200: '#e2e8f0', |
| 300: '#cbd5e1', |
| 400: '#94a3b8', |
| 500: '#64748b', |
| 600: '#475569', |
| 700: '#334155', |
| 800: '#1e293b', |
| 900: '#0f172a', |
| }, |
| }, |
| boxShadow: { |
| 'inset-1': 'inset 0 1px 0 0 rgba(255,255,255,0.6)', |
| 'inset-2': 'inset 0 2px 0 0 rgba(255,255,255,0.6)', |
| }, |
| }, |
| }, |
| } |
| </script> |
| |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body class="antialiased text-slate-900 bg-stone-100"> |
| <div class="container mx-auto px-3 py-4"> |
| <div class="grid grid-cols-12 gap-4"> |
| |
| <aside class="window col-span-12 md:col-span-4 lg:col-span-3"> |
| <div class="title-bar"> |
| <button aria-label="Close" class="close"></button> |
| <h1 class="title">Docs</h1> |
| <button aria-label="Resize" class="resize"></button> |
| </div> |
| <div class="separator"></div> |
| <div class="window-pane"> |
| <ul class="menu-items"> |
| <li><a class="nav-link" href="#intro">Intro</a></li> |
| <li> |
| Components |
| <ul> |
| <li><a class="nav-link" href="#buttons">Buttons</a></li> |
| <li><a class="nav-link" href="#radio-buttons">Radio Buttons</a></li> |
| <li><a class="nav-link" href="#checkboxes">Checkboxes</a></li> |
| <li><a class="nav-link" href="#menu-bar">Menu Bar</a></li> |
| <li><a class="nav-link" href="#select-menu">Select Menu</a></li> |
| <li><a class="nav-link" href="#text-box">Text Box</a></li> |
| </ul> |
| </li> |
| <li> |
| Windows |
| <ul> |
| <li><a class="nav-link" href="#title-bar">Title Bar</a></li> |
| <li><a class="nav-link" href="#window-contents">Window Contents</a></li> |
| <li><a class="nav-link" href="#dialogs">Dialogs</a></li> |
| </ul> |
| </li> |
| <li><a class="nav-link" href="#contributing">Contributing, Credits, etc.</a></li> |
| <li> |
| Sponsors |
| <ul> |
| <li><a href="https://getcssscan.com/?ref=systemcss" target="_blank" rel="noopener">Get CSS Scan browser extension</a></li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| </aside> |
|
|
| |
| <main class="col-span-12 md:col-span-8 lg:col-span-9"> |
| <div class="standard-dialog"> |
| <p class="heading center">System.css — Tailwind Edition</p> |
| <p class="desc center"> |
| A design system for building retro <span role="img" aria-label="Apple">🍎</span>-inspired interfaces using Tailwind utilities and a minimal system.css layer. |
| </p> |
|
|
| <h2 class="subheading" id="intro">Intro</h2> |
| <p> |
| System.css (Tailwind Edition) replicates the look-and-feel of Apple’s System 6 era using modern TailwindCSS utilities. |
| This site is a standalone demo and docs. No JavaScript frameworks required. |
| </p> |
| <p> |
| Most styles can be overridden via Tailwind config or the included system.css layer. Components are accessible and keyboard-friendly where applicable. |
| </p> |
|
|
| <h2 class="subheading">Components</h2> |
|
|
| <section class="component"> |
| <h3 class="subheading" id="buttons">Buttons</h3> |
| <div class="pl-5"> |
| <blockquote class="my-3"> |
| A button is a rounded rectangle that is named with text. Clicking a button performs the action described by the button's name. |
| <footer class="text-sm text-slate-600">— Apple HI Guidelines, p. 204</footer> |
| </blockquote> |
|
|
| <p class="my-2">A standard button measures 59px wide and 20px tall. We use the <code class="code">.btn</code> class.</p> |
|
|
| <div class="example"> |
| <button class="btn">Cancel</button> |
| <button class="btn">Submit</button> |
| </div> |
|
|
| <p class="my-2">When pressed, buttons invert. The button below is shown active.</p> |
|
|
| <div class="example"> |
| <button class="btn active">Active</button> |
| </div> |
|
|
| <p class="my-2">Buttons can have dynamic widths.</p> |
|
|
| <div class="example"> |
| <button class="btn">Buttons can be long!!</button> |
| </div> |
|
|
| <p class="my-2">Default buttons have an extra outline.</p> |
|
|
| <div class="example"> |
| <button class="btn btn-default">Find</button> |
| </div> |
|
|
| <p class="my-2">Disabled buttons use the <code class="code">disabled</code> attribute.</p> |
|
|
| <div class="example"> |
| <button class="btn" disabled>Disabled</button> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="component"> |
| <h3 class="subheading" id="radio-buttons">Radio Buttons</h3> |
| <div class="pl-5"> |
| <blockquote class="my-3"> |
| A radio button is a Macintosh control that displays a setting, either on or off, and is part of a group in which only one button can be on at a time. |
| <footer class="text-sm text-slate-600">— Apple HI Guidelines, p. 210</footer> |
| </blockquote> |
|
|
| <p class="my-2">Radio buttons can be rendered by specifying a <code class="code">radio</code> type on an <code class="code">input</code> tag and assigning it a name.</p> |
|
|
| <div class="example"> |
| <div class="field-row"> |
| <input id="radio1" type="radio" name="first-example"> |
| <label for="radio1">Left</label> |
| </div> |
| <div class="field-row"> |
| <input id="radio2" type="radio" name="first-example"> |
| <label for="radio2">Center</label> |
| </div> |
| <div class="field-row"> |
| <input id="radio3" type="radio" name="first-example"> |
| <label for="radio3">Right</label> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="component"> |
| <h3 class="subheading" id="checkboxes">Checkboxes</h3> |
| <div class="pl-5"> |
| <blockquote class="my-3"> |
| Checkboxes, like radio buttons, provide alternative choices for users. A checkbox is a square with label text next to it. |
| <footer class="text-sm text-slate-600">— Apple HI Guidelines, p. 211</footer> |
| </blockquote> |
|
|
| <p class="my-2">Checkboxes can be rendered by specifying a <code class="code">checkbox</code> type on an <code class="code">input</code> tag and assigning it a name.</p> |
|
|
| <div class="example" id="checkbox-example"> |
| <div class="field-row"> |
| <input id="cb1" type="checkbox" name="chbx-example"> |
| <label for="cb1">Left</label> |
| </div> |
| <div class="field-row"> |
| <input id="cb2" type="checkbox" name="chbx-example"> |
| <label for="cb2">Center</label> |
| </div> |
| <div class="field-row"> |
| <input id="cb3" type="checkbox" name="chbx-example"> |
| <label for="cb3">Right</label> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="component"> |
| <h3 class="subheading" id="menu-bar">Menu Bar</h3> |
| <div class="pl-5"> |
| <blockquote class="my-3"> |
| The menu bar extends across the top of the screen and contains words and icons that serve as the title of each menu. |
| <footer class="text-sm text-slate-600">— Apple HI Guidelines, p. 52</footer> |
| </blockquote> |
|
|
| <p class="my-2">A menu bar consists of menu elements with dropdown menus. We use the <code class="code">.menu-bar</code> class.</p> |
|
|
| <div class="example"> |
| <ul role="menu-bar" class="menu-bar"> |
| <li role="menu-item" tabindex="0" aria-haspopup="true"> |
| File |
| <ul role="menu" class="menu"> |
| <li role="menu-item"><a href="#menu">Action</a></li> |
| <li role="menu-item"><a href="#menu">Another Action</a></li> |
| <li role="menu-item" class="divider"><a href="#menu">Something else here</a></li> |
| <li role="menu-item"><a href="https://twitter.com" target="_blank" rel="noopener">External Link</a></li> |
| </ul> |
| </li> |
| <li role="menu-item" tabindex="0" aria-haspopup="true"> |
| Edit |
| <ul role="menu" class="menu"> |
| <li role="menu-item"><a href="#menu">Action</a></li> |
| <li role="menu-item"><a href="#menu">Another Action</a></li> |
| <li role="menu-item" class="divider"><a href="#menu">Something else here</a></li> |
| <li role="menu-item"><a href="#menu">More...</a></li> |
| </ul> |
| </li> |
| <li role="menu-item" tabindex="0" aria-haspopup="true"> |
| View |
| <ul role="menu" class="menu"> |
| <li role="menu-item"><a href="#menu">Action</a></li> |
| <li role="menu-item"><a href="#menu">Another Action</a></li> |
| <li role="menu-item"><a href="#menu">Something else here</a></li> |
| </ul> |
| </li> |
| <li role="menu-item" tabindex="0" aria-haspopup="true"> |
| Special |
| <ul role="menu" class="menu"> |
| <li role="menu-item"><a href="#menu">You</a></li> |
| <li role="menu-item"><a href="#menu">Get the</a></li> |
| <li role="menu-item"><a href="#menu">Idea</a></li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
|
|
| <p class="my-2">Single items use <code class="code">aria-haspopup="false"</code>.</p> |
| <div class="example"> |
| <ul role="menu-bar" class="menu-bar"> |
| <li role="menu-item" tabindex="0" aria-haspopup="false">Single Item</li> |
| <li role="menu-item" tabindex="0" aria-haspopup="false"><a target="_blank" href="https://github.com">GitHub</a></li> |
| </ul> |
| </div> |
|
|
| <p class="my-2">Dropdown-only menu:</p> |
| <div class="example"> |
| <ul role="menu-bar" class="menu-bar"> |
| <li role="menu-item" tabindex="0" aria-haspopup="true"> |
| Dropdown |
| <ul role="menu" class="menu"> |
| <li role="menu-item"><a href="#menu">Action</a></li> |
| <li role="menu-item"><a href="#menu">Another Action</a></li> |
| <li role="menu-item" class="divider"><a href="#menu">Something else here</a></li> |
| <li role="menu-item"><a href="https://twitter.com" target="_blank" rel="noopener">Twitter</a></li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="component"> |
| <h3 class="subheading" id="select-menu">Select Menu</h3> |
| <div class="pl-5"> |
| <blockquote class="my-3"> |
| A select menu can be used to create a drop-down list, typically used in forms. |
| </blockquote> |
|
|
| <p class="my-2">Select menus can be rendered using the <code class="code">select</code> and <code class="code">option</code> elements.</p> |
|
|
| <div class="example"> |
| <select name="select-menu" id="select-menu-example"> |
| <option value="Option 1">Option 1</option> |
| <option value="Option 2">Option 2</option> |
| <option value="Option 3">Option 3</option> |
| </select> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="component"> |
| <h3 class="subheading" id="text-box">Text Box</h3> |
| <div class="pl-5"> |
| <blockquote class="my-3"> |
| A text box is a basic control that allows users to enter text. |
| </blockquote> |
|
|
| <p class="my-2">Text boxes can be rendered using the <code class="code">input</code> element with a <code class="code">text</code> type.</p> |
|
|
| <div class="example"> |
| <input type="text" placeholder="Enter text..."> |
| </div> |
| </div> |
| </section> |
|
|
| <h2 class="subheading">Windows</h2> |
|
|
| <section class="component"> |
| <h3 class="subheading" id="title-bar">Title Bar</h3> |
| <div class="pl-5"> |
| <blockquote class="my-3"> |
| The title bar displays the name of the document or application. |
| <footer class="text-sm text-slate-600">— Apple HI Guidelines, p. 137</footer> |
| </blockquote> |
|
|
| <p class="my-2">Title bars can be created using the <code class="code">.title-bar</code> class along with <code class="code">.title</code>, <code class="code">.close</code>, and <code class="code">.resize</code> elements.</p> |
|
|
| <div class="example"> |
| <div class="window"> |
| <div class="title-bar"> |
| <button aria-label="Close" class="close"></button> |
| <h1 class="title">Untitled</h1> |
| <button aria-label="Resize" class="resize"></button> |
| </div> |
| <div class="separator"></div> |
| <div class="window-pane"> |
| <p>Window contents go here.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="component"> |
| <h3 class="subheading" id="window-contents">Window Contents</h3> |
| <div class="pl-5"> |
| <blockquote class="my-3"> |
| The window's content area is where users interact with the document or application. |
| <footer class="text-sm text-slate-600">— Apple HI Guidelines, p. 138</footer> |
| </blockquote> |
|
|
| <p class="my-2">Window contents can be created using the <code class="code">.window-pane</code> class.</p> |
|
|
| <div class="example"> |
| <div class="window"> |
| <div class="title-bar"> |
| <button aria-label="Close" class="close"></button> |
| <h1 class="title">Window</h1> |
| <button aria-label="Resize" class="resize"></button> |
| </div> |
| <div class="separator"></div> |
| <div class="window-pane"> |
| <p>This is the content area of the window.</p> |
| <div class="field-row"> |
| <label for="textbox1">Label:</label> |
| <input id="textbox1" type="text"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="component"> |
| <h3 class="subheading" id="dialogs">Dialogs</h3> |
| <div class="pl-5"> |
| <blockquote class="my-3"> |
| A dialog box is a type of window that requests information or provides information to the user. |
| <footer class="text-sm text-slate-600">— Apple HI Guidelines, p. 151</footer> |
| </blockquote> |
|
|
| <p class="my-2">Dialogs can be created using the <code class="code">.standard-dialog</code> class.</p> |
|
|
| <div class="example"> |
| <div class="standard-dialog"> |
| <p class="heading">Dialog Title</p> |
| <p class="desc">This is a dialog box with some content.</p> |
| <div class="window-pane"> |
| <p>Dialog content goes here.</p> |
| <div class="field-row"> |
| <button class="btn">OK</button> |
| <button class="btn">Cancel</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <p class="my-2">Alert dialogs can be created using the <code class="code">.alert-dialog</code> class.</p> |
|
|
| <div class="example"> |
| <div class="alert-dialog"> |
| <p class="heading">Alert</p> |
| <p class="desc">An alert dialog box displays an alert message.</p> |
| <div class="window-pane"> |
| <p>Are you sure you want to continue?</p> |
| <div class="field-row"> |
| <button class="btn">OK</button> |
| <button class="btn">Cancel</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <h2 class="subheading" id="contributing">Contributing, Credits, etc.</h2> |
| <div class="pl-5"> |
| <p> |
| This design system is based on Apple's Human Interface Guidelines from the classic Mac OS era. |
| The styling is inspired by System 6 and early System 7 interfaces. |
| </p> |
| <p> |
| Built with <a href="https://tailwindcss.com/" target="_blank" rel="noopener">Tailwind CSS</a>. |
| No JavaScript frameworks were harmed in the making of this design system. |
| </p> |
| <p> |
| If you find any issues or have suggestions for improvements, please feel free to contribute. |
| </p> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
| {"ok":false,"message":"terminated"} |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
