Ark/terminal.css
1
0
Fork 0
mirror of https://github.com/letieu/terminal.css.git synced 2026-03-15 02:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

add readme

Browse Source
This commit is contained in:
letieu
2025-12-09 00:58:53 +07:00
parent 71e9744334
commit 49d4ffc1ba
4 changed files with 101 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
README.md Normal file
View File

@@ -0,0 +1,89 @@
# terminal.css
A modern CSS framework for terminal-style websites.
## Installation
### CDN Installation
Add these links to your HTML file:
```html
<!-- In your <head> section -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.1/index.css" />
<!-- Before closing </body> tag -->
<!-- [Optional: Only for toast, FAQ component] -->
<script src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.1/index.js"></script>
```
Optional: Add Tailwind CSS for layout utilities (flex, grid, spacing)
```html
<script src="https://cdn.tailwindcss.com"></script>
```
## How to Use Components
To use any component, simply:
1. Go to the [Components page](./index.html)
2. Find the component you want to use
3. Press <kbd>F12</kbd> to open DevTools
4. Inspect the component and copy the HTML code
5. Paste it into your project
### Complete HTML Template
```html
<!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.1/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.1/index.js"></script>
</body>
</html>
```
## Customization
Override CSS variables to customize the theme:
```css
/* 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;
}
```

2
index.css
View File

@@ -1,5 +1,5 @@
/* ==========================================================================
terminal.css - Terminal CSS Component Library v3.0
terminal.css - Terminal CSS Component Library v0.0.1
Bulma-style naming conventions
========================================================================== */

15
installation.html
View File

@@ -28,7 +28,7 @@
dev@localhost:~/tcss/installation
</div>
<div class="has-text-muted text-xs" style="opacity: 0.5">
v3.0.0-bulma
v0.0.1
</div>
</div>
@@ -69,7 +69,9 @@
</div>
<div class="terminal-log-line">
<span class="terminal-log-message"
>&lt;link rel="stylesheet" href="[CDN_LINK_HERE]" /&gt;</span
>&lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.1/index.css"
/&gt;</span
>
</div>
<div class="terminal-log-line">
@@ -88,7 +90,8 @@
</div>
<div class="terminal-log-line">
<span class="terminal-log-message"
>&lt;script src="[CDN_LINK_HERE]"&gt;&lt;/script&gt;</span
>&lt;script
src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.1/index.js"&gt;&lt;/script&gt;</span
>
</div>
</div>
@@ -185,7 +188,8 @@
</div>
<div class="terminal-log-line">
<span class="terminal-log-message">
&lt;link rel="stylesheet" href="[CDN_LINK_HERE]"&gt;</span
&lt;link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.1/index.css"&gt;</span
>
</div>
<div class="terminal-log-line">
@@ -230,7 +234,8 @@
</div>
<div class="terminal-log-line">
<span class="terminal-log-message">
&lt;script src="[CDN_LINK_HERE]"&gt;&lt;/script&gt;</span
&lt;script
src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.1/index.js"&gt;&lt;/script&gt;</span
>
</div>
<div class="terminal-log-line">

2
showcase.html
View File

@@ -83,7 +83,7 @@
<div class="showcase-section">
<h3 class="title is-5 mb-4 has-text-primary">Tags & Badges</h3>
<div class="flex flex-wrap gap-2">
<span class="tag is-primary">v3.0.0</span>
<span class="tag is-primary">v0.0.1</span>
<span class="tag is-success">Active</span>
<span class="tag is-danger">Error</span>
<span class="tag is-warning">Beta</span>