+
-
+
+ Material Design UI components for SpiderBasic +
-You'll find a detailed documentation here: https://lastlife.net/MaterialSB/index.html \ No newline at end of file ++ Documentation • + Quick Start • + API Reference • + Download +
+ +--- + +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. + +--- + ++ Made with ❤️ for the SpiderBasic community +