-- import: ft

-- ftd.color 2196F3: #2196F3
dark: #2196F3

-- ftd.color transparency: rgba(255, 255, 255, 0.8)
dark: rgba(255, 255, 255, 0.8)

-- ftd.color purple: purple
dark: purple

-- ftd.color red: red
dark: red

-- ftd.color green: green
dark: green

-- boolean mobile: false


-- ftd.column:
padding: 30
width: fill

-- ft.h0: Grid Layout

-- ft.h1: Grid Using Area

This grid layout contains six columns and three rows:

-- ftd.grid:
slots: header header header header header header | menu main main main right right | menu footer footer footer footer footer
spacing: 10
background-color: $2196F3
padding: 10
width: fill
margin-bottom: 40

--- ftd.text: Header
slot: header
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: Menu
slot: menu
background-color: $transparency
text-align: center
padding-vertical: 20
height: fill

--- ftd.text: Main
slot: main
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: Right
slot: right
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: Footer
slot: footer
background-color: $transparency
text-align: center
padding-vertical: 20



/-- ft.h1: Grid Using Rows and Column

This grid layout contains three columns and two rows:

/-- ftd.grid:
columns: 100px 50px 100px
rows: 80px auto
column-gap: 10
row-gap: 15
background-color: $red
padding: 10
margin-bottom: 40

--- ftd.text: 11
grid-column: 1 / 2
grid-row: 1 / 2
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: 12
grid-column: 2 / 3
grid-row: 1 / 2
background-color: $transparency
text-align: center
padding-vertical: 20
height: fill

--- ftd.text: 13
grid-column: 3 / 4
grid-row: 1 / 2
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: 21
grid-column: 1 / 2
grid-row: 2 / 3
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: 22
grid-column: 2 / 3
grid-row: 2 / 3
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: 23
grid-column: 3 / 4
grid-row: 2 / 3
background-color: $transparency
text-align: center
padding-vertical: 20

-- ft.h1: Grid Using Area With An Empty Grid Cell

This grid layout contains four columns and three rows:

-- ftd.grid:
slots: header header header header | main main . sidebar | footer footer footer footer
spacing: 10
background-color: $green
padding: 10
width: fill
margin-bottom: 40

--- ftd.text: Header
slot: header
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: Main
slot: main
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: Sidebar
slot: sidebar
background-color: $transparency
text-align: center
padding-vertical: 20

--- ftd.text: Footer
slot: footer
background-color: $transparency
text-align: center
padding-vertical: 20



/-- ft.h1: Grid Row Auto Flow

This grid layout contains five columns and two rows:

/-- ftd.grid:
columns: 60px 60px 60px 60px 60px
rows: 30px 30px
column-gap: 10
row-gap: 15
background-color: $red
padding: 10
margin-bottom: 40
auto-flow: row

--- ftd.text: 11
grid-column: 1
grid-row: 1 / 3
background-color: $transparency
text-align: center
height: fill
overflow-y: auto

--- ftd.text: 12
background-color: $transparency
text-align: center
height: fill
overflow-y: auto

--- ftd.text: 13
background-color: $transparency
text-align: center
height: fill
overflow-y: auto

--- ftd.text: 14
background-color: $transparency
text-align: center
height: fill
overflow-y: auto

--- ftd.text: 15
grid-column: 5
grid-row: 1 / 3
background-color: $transparency
text-align: center
height: fill
overflow-y: auto


/-- ft.h1: Grid Column Auto Flow

This grid layout contains five columns and two rows:

/-- ftd.grid:
columns: 60px 60px 60px 60px 60px
rows: 30px 30px
column-gap: 10
row-gap: 15
background-color: $red
padding: 10
margin-bottom: 40
auto-flow: column

--- ftd.text: 11
grid-column: 1
grid-row: 1 / 3
background-color: $transparency
text-align: center
height: fill
overflow-y: auto

--- ftd.text: 12
background-color: $transparency
text-align: center

height: fill
overflow-y: auto

--- ftd.text: 13
background-color: $transparency
text-align: center
height: fill
overflow-y: auto

--- ftd.text: 14
background-color: $transparency
text-align: center
height: fill
overflow-y: auto

--- ftd.text: 15
grid-column: 5
grid-row: 1 / 3
background-color: $transparency
text-align: center
height: fill
overflow-y: auto

-- ft.h1: Grid Areas with slot-widths and slot-heights

This grid layout contains two columns and two rows:

-- ftd.grid:
slots: header header | sidebar main
slot-widths: 60px 100px
slot-heights: 20px 200px
background-color: $purple
spacing: 10
padding: 10

--- text: Header
slot: header

--- text: Sidebar
slot: sidebar

--- text: Main
slot: main


-- ft.h1: Grid with Event

This grid layout contains two columns and two rows which changes to one column and two rows:

-- ftd.grid:
slots: header header | sidebar main
slots if $mobile: header | main
slot-widths: 60px 100px
slot-widths if $mobile : 60px
slot-heights: 20px 200px
slot-heights if $mobile: 20px 100px
background-color: $2196F3
spacing: 10
spacing if $mobile: 5
padding: 10

--- text: Header
slot: header
slot if $mobile: main

--- text: Sidebar
if: not $mobile
slot: sidebar

--- text: Main
slot: main
slot if $mobile: header


-- ftd.text: CLICK HERE!
$on-click$: toggle $mobile

-- ftd.text text: $value
caption value:
string slot:
slot: $slot
background-color: $transparency
text-align: center
height: fill