# MaterialSB

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

<p align="center">
  <strong>Material Design UI components for SpiderBasic</strong>
</p>

<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.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://git.lastlife.net/LastLife/MaterialSB/src/branch/main/Example_Card.sb) — 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

## 📄 License

MaterialSB is released under the MIT License. See [LICENSE](LICENSE) for details.

---

<p align="center">
  Made with ❤️ for the SpiderBasic community
</p>