; MaterialSB Example - Grid System
; This example demonstrates the responsive grid system.

IncludeFile "MaterialSB.sbi"

EnableExplicit

Procedure Main(Result)
	UseModule MaterialSB
	
	SetDarkTheme(#False)
	
	; Create a navbar
	Navbar(#Navbar_Shadow1 | #Navbar_Container)
	NavbarAddLogo("Grid Example")
	
	; Header section
	Row(#Grid_Container)
	Col(12)
	Append("<h3>Responsive Grid System</h3>")
	Append("<p>MaterialSB uses a 12-column responsive grid. Resize your browser to see how columns adapt.</p>")
	CloseCurrentParent(2)
	
	; Basic grid demonstration
	Row(#Grid_Container)
	Col(12)
	Append("<h5>Basic Columns</h5>")
	CloseCurrentParent(2)
	
	Row(#Grid_Container)
	
	Col(12, 6, 4)
	Card("", #Card_Panel)
	AddClass(GetCurrentParent(), #Color_Red + #Color_Lighten_3)
	Append("<p class='center-align'><strong>s12 m6 l4</strong></p>")
	Append("<p class='center-align'>Full on small, half on medium, third on large</p>")
	CloseCurrentParent(2)
	
	Col(12, 6, 4)
	Card("", #Card_Panel)
	AddClass(GetCurrentParent(), #Color_Blue + #Color_Lighten_3)
	Append("<p class='center-align'><strong>s12 m6 l4</strong></p>")
	Append("<p class='center-align'>Full on small, half on medium, third on large</p>")
	CloseCurrentParent(2)
	
	Col(12, 6, 4)
	Card("", #Card_Panel)
	AddClass(GetCurrentParent(), #Color_Green + #Color_Lighten_3)
	Append("<p class='center-align'><strong>s12 m6 l4</strong></p>")
	Append("<p class='center-align'>Full on small, half on medium, third on large</p>")
	CloseCurrentParent(2)
	
	CloseCurrentParent() ; Close row
	
	; Two column layout
	Row(#Grid_Container)
	Col(12)
	Append("<h5>Two Column Layout</h5>")
	CloseCurrentParent(2)
	
	Row(#Grid_Container)
	
	Col(12, 8)
	Card("", #Card_Panel)
	AddClass(GetCurrentParent(), #Color_Teal + #Color_Lighten_4)
	Append("<h5>Main Content (s12 m8)</h5>")
	Append("<p>This column takes 8 out of 12 columns on medium and larger screens. On small screens, it takes the full width.</p>")
	Append("<p>This is ideal for main content areas with a sidebar.</p>")
	CloseCurrentParent(2)
	
	Col(12, 4)
	Card("", #Card_Panel)
	AddClass(GetCurrentParent(), #Color_Orange + #Color_Lighten_4)
	Append("<h5>Sidebar (s12 m4)</h5>")
	Append("<p>This sidebar takes 4 columns on medium+, full width on small.</p>")
	CloseCurrentParent(2)
	
	CloseCurrentParent() ; Close row
	
	; Nested grid
	Row(#Grid_Container)
	Col(12)
	Append("<h5>Nested Grid</h5>")
	CloseCurrentParent(2)
	
	Row(#Grid_Container)
	Col(12)
	
	Card("", #Card_Panel)
	AddClass(GetCurrentParent(), #Color_Purple + #Color_Lighten_4)
	Append("<p><strong>Outer Container</strong></p>")
	
	; Nested row inside the card
	Row()
	
	Col(6)
	Card("", #Card_Panel)
	AddClass(GetCurrentParent(), #Color_Purple + #Color_Lighten_2)
	Append("<p class='center-align'>Nested s6</p>")
	CloseCurrentParent(2)
	
	Col(6)
	Card("", #Card_Panel)
	AddClass(GetCurrentParent(), #Color_Purple + #Color_Lighten_2)
	Append("<p class='center-align'>Nested s6</p>")
	CloseCurrentParent(2)
	
	CloseCurrentParent() ; Close nested row
	CloseCurrentParent() ; Close outer card
	CloseCurrentParent(2) ; Close column and row
	
	; Breakpoint reference
	Row(#Grid_Container)
	Col(12)
	Append("<h5>Breakpoint Reference</h5>")
	
	Protected t = Table("Prefix", #Table_Striped | #Table_Highlight)
	TableAddColumn("Screen Size", t)
	TableAddColumn("Width", t)
	
	Protected item = TableAddItem("s" + Chr(10) + "Small" + Chr(10) + "< 600px", t)
	item = TableAddItem("m" + Chr(10) + "Medium" + Chr(10) + ">= 600px", t)
	item = TableAddItem("l" + Chr(10) + "Large" + Chr(10) + ">= 992px", t)
	item = TableAddItem("xl" + Chr(10) + "Extra Large" + Chr(10) + ">= 1200px", t)
	
	CloseCurrentParent(2)
	
	AutoInit()
	
	UnuseModule MaterialSB
EndProcedure

MaterialSB::Download(@Main())

; IDE Options = SpiderBasic 3.10 (Windows - x86)
; Folding = -
; iOSAppOrientation = 0
; AndroidAppCode = 0
; AndroidAppOrientation = 0
; EnableXP
; DPIAware
; CompileSourceDirectory