From 49d4ffc1baa3f9960b50afed2351928856fb22d0 Mon Sep 17 00:00:00 2001 From: letieu Date: Tue, 9 Dec 2025 00:58:53 +0700 Subject: [PATCH] add readme --- README.md | 89 +++++++++++++++++++++++++++++++++++++++++++++++ index.css | 2 +- installation.html | 15 +++++--- showcase.html | 2 +- 4 files changed, 101 insertions(+), 7 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..1d835c2 --- /dev/null +++ b/README.md @@ -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 + + + + + + +``` + +Optional: Add Tailwind CSS for layout utilities (flex, grid, spacing) + +```html + +``` + +## 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 F12 to open DevTools +4. Inspect the component and copy the HTML code +5. Paste it into your project + +### Complete HTML Template + +```html + + + + + + My Terminal App + + + + + + + + +

Hello Terminal!

+ + + + + + +``` + +## 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; +} +``` diff --git a/index.css b/index.css index b371409..36dbe13 100644 --- a/index.css +++ b/index.css @@ -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 ========================================================================== */ diff --git a/installation.html b/installation.html index 82bf8c3..88f1467 100644 --- a/installation.html +++ b/installation.html @@ -28,7 +28,7 @@ dev@localhost:~/tcss/installation
- v3.0.0-bulma + v0.0.1
@@ -69,7 +69,9 @@
<link rel="stylesheet" href="[CDN_LINK_HERE]" /><link rel="stylesheet" + href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.1/index.css" + />
@@ -88,7 +90,8 @@
<script src="[CDN_LINK_HERE]"></script><script + src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.1/index.js"></script>
@@ -185,7 +188,8 @@
- <link rel="stylesheet" href="[CDN_LINK_HERE]">
@@ -230,7 +234,8 @@
- <script src="[CDN_LINK_HERE]"></script>
diff --git a/showcase.html b/showcase.html index 1a30c9d..7697dc4 100644 --- a/showcase.html +++ b/showcase.html @@ -83,7 +83,7 @@

Tags & Badges

- v3.0.0 + v0.0.1 Active Error Beta