Update README.md

2026-01-24 20:52:58 +00:00 · 2026-01-24 20:52:58 +00:00 · c72dddc70e
commit c72dddc70e
parent 054f0a6073
1 changed files with 123 additions and 3 deletions
--- a/README.md
+++ b/README.md
@ -1,9 +1,129 @@
 # MaterialSB

 <p align="center">
-  <img src="https://lastlife.net/MaterialSB/assets/images/Logo.png" />
+  <img src="https://lastlife.net/MaterialSB/assets/images/Logo.png" alt="MaterialSB Logo" />
 </p>

-MaterialSB is a library for SpiderBasic that replaces all UI elements with Materialize, a framework based on the design system created by Google.
+<p align="center">
+  <strong>Material Design UI components for SpiderBasic</strong>
+</p>

-You'll find a detailed documentation here: https://lastlife.net/MaterialSB/index.html
+<p align="center">
+  <a href="https://lastlife.net/MaterialSB/index.html">Documentation</a> •
+  <a href="https://lastlife.net/MaterialSB/pages/quickstart.html">Quick Start</a> •
+  <a href="https://lastlife.net/MaterialSB/pages/documentation.html">API Reference</a> •
+  <a href="https://git.lastlife.net/LastLife/MaterialSB/releases">Download</a>
+</p>
+
+---
+
+MaterialSB is a library for SpiderBasic that replaces the default UI elements with [Materialize](https://materializeweb.com/), a modern responsive front-end framework based on Google's Material Design.
+
+## ✨ Features
+
+- **Material Design** — Beautiful, modern UI components following Google's design guidelines
+- **Responsive Grid** — 12-column grid system that adapts to any screen size
+- **Dark & Light Themes** — Built-in theme support with easy toggling
+- **70+ Components** — Buttons, cards, modals, forms, navbars, tables, and more
+- **Easy to Use** — Simple, intuitive API designed for SpiderBasic developers
+- **No JavaScript Required** — Write pure SpiderBasic code, MaterialSB handles the rest
+
+## 📦 Installation
+
+1. Download the latest release from the [releases page](https://git.lastlife.net/LastLife/MaterialSB/releases)
+2. Extract the archive to your project directory
+3. Copy the `LocalFiles` folder to your application's Resource directory
+4. Include `MaterialSB.sbi` in your source code
+
+```
+MyProject/
+├── MyApp.sb
+├── MaterialSB/
+│   └── MaterialSB.sbi
+└── Resources/
+    └── LocalFiles/
+        ├── CSS/
+        └── JS/
+```
+
+## 🚀 Quick Start
+
+```basic
+IncludeFile "MaterialSB.sbi"
+
+Procedure OnClick()
+  MaterialSB::Toast("It works!", 3000)
+EndProcedure
+
+Procedure Main(Success)
+  If Success
+    MaterialSB::Row(MaterialSB::#Grid_Container)
+      MaterialSB::Col(12)
+        MaterialSB::Append(MaterialSB::Header("Hello, MaterialSB!", 2))
+        MaterialSB::Button("Click Me", @OnClick())
+      MaterialSB::CloseCurrentParent()
+    MaterialSB::CloseCurrentParent()
+  EndIf
+EndProcedure
+
+MaterialSB::Download(@Main())
+```
+
+## 🧩 Components
+
+| Category | Components |
+|----------|------------|
+| **Layout** | Grid (Row, Col), Container |
+| **Navigation** | Navbar, Sidenav, Tabs |
+| **Content** | Cards, Tables, Carousel, Media |
+| **Forms** | TextInput, Textarea, Checkbox, Radio, Switch, Dropdown, Range |
+| **Feedback** | Modal, Toast |
+| **Actions** | Button (6 variants) |
+
+## 🎨 Theming
+
+MaterialSB includes dark theme by default. Toggle between themes with a single line:
+
+```basic
+; Switch to light theme
+MaterialSB::SetDarkTheme(#False)
+
+; Switch to dark theme  
+MaterialSB::SetDarkTheme(#True)
+```
+
+Use Material Design colors throughout your app:
+
+```basic
+MaterialSB::Append(MaterialSB::Paragraph("Success!", MaterialSB::#Color_Green))
+MaterialSB::Toast("Warning", 3000, MaterialSB::#Toast_Default, MaterialSB::#Color_Orange)
+```
+
+## 📖 Documentation
+
+Full documentation is available at **[lastlife.net/MaterialSB](https://lastlife.net/MaterialSB/index.html)**
+
+- [Quick Start Guide](https://lastlife.net/MaterialSB/pages/quickstart.html) — Get up and running in minutes
+- [API Reference](https://lastlife.net/MaterialSB/pages/documentation.html) — Complete function documentation
+- [Examples](https://lastlife.net/MaterialSB/pages/examples.html) — Working code examples
+
+## 📋 Requirements
+
+- SpiderBasic 3.x or later
+- Modern web browser (Chrome, Firefox, Edge, Safari)
+
+## 🙏 Credits
+
+- [MaterializeCSS](https://materializeweb.com/) — The CSS framework that powers MaterialSB
+- [Material Icons](https://fonts.google.com/icons) — Google's icon font
+- [SpiderBasic](https://www.spiderbasic.com/) — The BASIC language for web development
+
+## 📄 License
+
+MaterialSB is released under the MIT License. See [LICENSE](LICENSE) for details.
+
+---
+
+<p align="center">
+  Made with ❤️ for the SpiderBasic community
+</p>