2025-12-09 00:47:23 +07:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > Installation - terminal.css< / title >
<!-- terminal.css Components (Bulma - style) -->
< link rel = "stylesheet" href = "./index.css" / >
2025-12-10 06:08:01 +07:00
< link rel = "stylesheet" href = "themes/default.css" id = "theme-switcher" / >
2025-12-09 00:47:23 +07:00
<!-- Tailwind for layout (optional) -->
< script src = "https://cdn.tailwindcss.com" > < / script >
<!-- terminal.css JavaScript -->
< script src = "./index.js" > < / script >
< / head >
2025-12-09 10:39:52 +07:00
< body class = "min-h-screen p-0 md:p-8" >
2025-12-09 00:47:23 +07:00
<!-- MAIN TERMINAL WINDOW -->
< div class = "terminal max-w-6xl mx-auto mb-20" >
<!-- HEADER -->
< div class = "terminal-header" >
< div class = "flex gap-2" >
< div class = "w-3 h-3 rounded-full bg-red-500" > < / div >
< div class = "w-3 h-3 rounded-full bg-yellow-500" > < / div >
< div class = "w-3 h-3 rounded-full bg-green-500" > < / div >
< / div >
< div class = "has-text-muted text-sm font-bold" >
dev@localhost:~/tcss/installation
< / div >
2025-12-10 06:08:01 +07:00
< div class = "flex items-center gap-2" >
< label for = "theme-selector" class = "has-text-muted text-xs" > Theme:< / label >
< select id = "theme-selector" class = "select" style = "width: auto;" >
< option value = "default" > Default< / option >
< option value = "dracula" > Dracula< / option >
< option value = "light" > Light< / option >
< option value = "gruvbox-dark" > Gruvbox Dark< / option >
< option value = "gruvbox-light" > Gruvbox Light< / option >
< option value = "ayu-dark" > Ayu Dark< / option >
< option value = "ayu-light" > Ayu Light< / option >
< option value = "rose-pine" > Rosé Pine< / option >
< option value = "rose-pine-light" > Rosé Pine Light< / option >
< option value = "catppuccin-mocha" > Catppuccin Mocha< / option >
< option value = "catppuccin-latte" > Catppuccin Latte< / option >
< / select >
< / div >
2025-12-09 00:47:23 +07:00
< / div >
<!-- BODY -->
< div class = "terminal-body" >
<!-- INTRO -->
< div class = "mb-8" >
< h1 class = "title is-1 has-terminal-glow" > Installation Guide< / h1 >
< p class = "subtitle is-4" >
Get started with terminal.css in your project
< / p >
< hr / >
< div class = "mt-4" >
< a
href="./index.html"
class="has-text-primary"
style="text-decoration: none"
>← Back to Components< /a
>
< / div >
< / div >
<!-- SECTION 1: INSTALLATION -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 01.< / span >
< h2 class = "text-xl font-bold" > CDN Installation< / h2 >
< / div >
< div class = "space-y-4" >
< p class = "has-text-muted" > Add these links to your HTML file:< / p >
< div class = "terminal-log" >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-muted"
>< !-- In your < head> section --> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
2025-12-09 00:58:53 +07:00
>< link rel="stylesheet"
2025-12-10 05:10:52 +07:00
href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.3/index.css"
2025-12-09 00:58:53 +07:00
/> < /span
2025-12-09 00:47:23 +07:00
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-muted"
>< !-- Before closing < /body> tag --> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-muted"
>< !-- [Optional: Only for toast, FAQ component]
--> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
2025-12-09 00:58:53 +07:00
>< script
2025-12-10 05:10:52 +07:00
src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.3/index.js"> < /script> < /span
2025-12-09 00:47:23 +07:00
>
< / div >
< / div >
< p class = "has-text-muted text-sm mt-4" >
Optional: Add Tailwind CSS for layout utilities (flex, grid,
spacing)
< / p >
< div class = "terminal-log" >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
>< script
src="https://cdn.tailwindcss.com"> < /script> < /span
>
< / div >
< / div >
< / div >
< / section >
<!-- SECTION 2: HOW TO USE -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 02.< / span >
< h2 class = "text-xl font-bold" > How to Use Components< / h2 >
< / div >
< div class = "space-y-6" >
< div class = "card" >
< div class = "card-content" >
< p class = "has-text-muted text-sm mb-4" >
To use any component, simply:
< / p >
2025-12-10 04:49:31 +07:00
< ol class = "content" >
2025-12-09 00:47:23 +07:00
< li class = "mb-2" >
Go to the
< a href = "./index.html" class = "has-text-primary"
>Components page< /a
>
< / li >
< li class = "mb-2" > Press < kbd > F12< / kbd > to open DevTools< / li >
< li class = "mb-2" >
Inspect the component and copy the HTML code
< / li >
< li > Paste it into your project< / li >
< / ol >
2025-12-10 05:09:31 +07:00
< p class = "has-text-muted text-sm mt-8 mb-2" > Or Vibe coding< / p >
< p >
Just drop the full
< a href = "./index.html" class = "has-text-primary"
>Components page< /a
>
html code to the AI Model, tell it that flow the component
usage
< / p >
2025-12-09 00:47:23 +07:00
< / div >
< / div >
< div >
< h4 class = "has-text-muted text-sm mb-3" >
Complete HTML Template
< / h4 >
< div class = "terminal-log" >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
>< !DOCTYPE html> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
>< html lang="en"> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < head> < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" >
< meta charset="UTF-8"> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" >
< meta name="viewport" content="width=device-width,
initial-scale=1.0"> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" >
< title> My Terminal App< /title> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-muted" >
< !-- terminal.css Stylesheet --> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" >
2025-12-09 00:58:53 +07:00
< link rel="stylesheet"
2025-12-10 05:10:52 +07:00
href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.3/index.css"> < /span
2025-12-09 00:47:23 +07:00
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-muted" >
< !-- Optional: Tailwind for layout utilities --> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" >
< script
src="https://cdn.tailwindcss.com"> < /script> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < /head> < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < body> < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" >
< h1 class="title is-1 has-text-primary"> Hello
Terminal!< /h1> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" >
< button class="button is-primary"> Click
Me< /button> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-muted" >
< !-- terminal.css JavaScript --> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" >
2025-12-09 00:58:53 +07:00
< script
2025-12-10 05:10:52 +07:00
src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.3/index.js"> < /script> < /span
2025-12-09 00:47:23 +07:00
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < /body> < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < /html> < / span >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- SECTION 3: CUSTOMIZATION -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 03.< / span >
< h2 class = "text-xl font-bold" > Customization< / h2 >
< / div >
< div class = "space-y-4" >
< p class = "has-text-muted" >
Override CSS variables to customize the theme:
< / p >
< div class = "terminal-log" >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-muted"
>/* In your custom stylesheet */< /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-warning" > :root< / span >
< span class = "terminal-log-message" > {< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< span class = "terminal-log-message has-text-muted"
>/* Change primary color */< /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --primary: < / span >
< span class = "terminal-log-message has-text-success"
>#00ff00< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< span class = "terminal-log-message has-text-muted"
>/* Change background */< /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --terminal-bg: < / span >
< span class = "terminal-log-message has-text-success"
>#0a0a0a< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< span class = "terminal-log-message has-text-muted"
>/* Change font */< /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > font-family: < / span >
< span class = "terminal-log-message has-text-success"
>'Courier New'< /span
>
< span class = "terminal-log-message" > , monospace;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > < / span >
< span class = "terminal-log-message has-text-muted"
>/* Other variables */< /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --terminal-fg: < / span >
< span class = "terminal-log-message has-text-success"
>#f0f0f0< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --danger: < / span >
< span class = "terminal-log-message has-text-success"
>#ff5555< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --success: < / span >
< span class = "terminal-log-message has-text-success"
>#50fa7b< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --warning: < / span >
< span class = "terminal-log-message has-text-success"
>#f1fa8c< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --info: < / span >
< span class = "terminal-log-message has-text-success"
>#8be9fd< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --border-color: < / span >
< span class = "terminal-log-message has-text-success"
>#333333< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --surface: < / span >
< span class = "terminal-log-message has-text-success"
>#1a1a1a< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > --muted: < / span >
< span class = "terminal-log-message has-text-success"
>#6c757d< /span
>
< span class = "terminal-log-message" > ;< / span >
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message" > }< / span >
< / div >
< / div >
< / div >
< / section >
2025-12-10 06:08:01 +07:00
<!-- SECTION 4: THEMEING -->
< section class = "section" >
< div class = "flex items-center gap-2 mb-6" >
< span class = "has-text-primary text-xl font-bold" > 04.< / span >
< h2 class = "text-xl font-bold" > Theming< / h2 >
< / div >
< div class = "space-y-4" >
< p class = "has-text-muted" >
terminal.css includes a theming system that allows you to easily switch between different color schemes. The selected theme is persisted across pages using the browser's < code > localStorage< / code > .
< / p >
< h4 class = "has-text-muted text-sm mb-3" > How to use themes:< / h4 >
< ol class = "content" >
< li class = "mb-2" >
Include the main < code > index.css< / code > stylesheet and then a theme stylesheet in your < code > < head> < / code > section. The theme stylesheet must have the ID < code > theme-switcher< / code > .
< / li >
< / ol >
< div class = "terminal-log" >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-muted"
>< !-- In your < head> section --> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
>< link rel="stylesheet" href="./index.css" /> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
>< link rel="stylesheet" href="themes/default.css" id="theme-switcher" /> < /span
>
< / div >
< / div >
< p class = "has-text-muted text-sm mt-4" >
To enable theme switching and persistence, include the < code > index.js< / code > script at the end of your < code > < body> < / code > tag. This script contains the necessary logic to manage themes.
< / p >
< div class = "terminal-log" >
< div class = "terminal-log-line" >
< span class = "terminal-log-message has-text-muted"
>< !-- Before closing < /body> tag --> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
>< script src="./index.js"> < /script> < /span
>
< / div >
< / div >
< p class = "has-text-muted text-sm mt-4" >
You can then add a theme selector dropdown to your HTML, like this:
< / p >
< div class = "terminal-log" >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
>< select id="theme-selector" class="select"> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
> < option value="default"> Default< /option> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
> < option value="dracula"> Dracula< /option> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
> < option value="light"> Light< /option> < /span
>
< / div >
< div class = "terminal-log-line" >
< span class = "terminal-log-message"
>< /select> < /span
>
< / div >
< / div >
< p class = "has-text-muted text-sm mt-4" >
The < code > value< / code > attribute of each option should match the filename of the theme (e.g., < code > default< / code > for < code > themes/default.css< / code > ).
< / p >
< / div >
< / section >
2025-12-09 00:47:23 +07:00
<!-- FOOTER -->
< div class = "pt-12 mt-12 border-t border-gray-800" >
< div class = "flex justify-between items-center" >
< a href = "./index.html" class = "button is-primary"
>View All Components< /a
>
< span class = "has-terminal-cursor has-text-primary text-sm"
>Ready to build...< /span
>
< / div >
< / div >
< / div >
< / div >
<!-- Toast Container -->
< div class = "toast-container" id = "toastContainer" > < / div >
< / body >
< / html >
