A modern CSS framework for terminal-style websites.
Add these links to your HTML file:
<!-- In your <head> section -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.4/index.css" />
<!-- Before closing </body> tag -->
<!-- [Optional: Only for toast, FAQ component] -->
<script src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.4/index.js"></script>Optional: Add Tailwind CSS for layout utilities (flex, grid, spacing)
<script src="https://cdn.tailwindcss.com"></script>To use any component, simply:
- Go to the Components page
- Find the component you want to use
- Press F12 to open DevTools
- Inspect the component and copy the HTML code
- Paste it into your project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Terminal App</title>
<!-- terminal.css Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.4/index.css">
<!-- Optional: Tailwind for layout utilities -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="title is-1 has-text-primary">Hello Terminal!</h1>
<button class="button is-primary">Click Me</button>
<!-- terminal.css JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.4/index.js"></script>
</body>
</html>Override CSS variables to customize the theme:
/* In your custom stylesheet */
:root {
/* Change primary color */
--primary: #00ff00;
/* Change background */
--terminal-bg: #0a0a0a;
/* Change font */
font-family: 'Courier New', monospace;
/* Other variables */
--terminal-fg: #f0f0f0;
--danger: #ff5555;
--success: #50fa7b;
--warning: #f1fa8c;
--info: #8be9fd;
--border-color: #333333;
--surface: #1a1a1a;
--muted: #6c757d;
}