MaterialSB

Material Design UI components for SpiderBasic

Documentation • Quick Start • API Reference • Download

---

MaterialSB is a library for SpiderBasic that replaces the default UI elements with Materialize, 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
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

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:

; Switch to light theme
MaterialSB::SetDarkTheme(#False)

; Switch to dark theme  
MaterialSB::SetDarkTheme(#True)

Use Material Design colors throughout your app:

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

• Quick Start Guide — Get up and running in minutes
• API Reference — Complete function documentation
• Examples — Working code examples

📋 Requirements

• SpiderBasic 3.x or later
• Modern web browser (Chrome, Firefox, Edge, Safari)

🙏 Credits

• MaterializeCSS — The CSS framework that powers MaterialSB
• Material Icons — Google's icon font
• SpiderBasic — The BASIC language for web development

📄 License

MaterialSB is released under the MIT License. See LICENSE for details.

---

Made with ❤️ for the SpiderBasic community