FTD Examples

Package Name

github.com/fastn-stack/ftd/tree/main/t/html

1-Component

Click to expand

close

FTD Code

-- ftd.row:
padding.px: 40

-- ftd.text: Hello World
padding.px: 2

-- ftd.text: again
padding.px: 2

-- end: ftd.row


-- ftd.row:
padding.px: 40

-- ftd.text: Hello
padding.px: 2

-- ftd.text: again
padding.px: 2

-- end: ftd.row


-- ftd.text: Hello from text
padding.px: 40

Output

2-Component

Click to expand

close

FTD Code

-- ftd.column:
padding.px: 40

-- ftd.text: Hello World

-- ftd.text: again

-- end: ftd.column

Output

3-component

Click to expand

close

FTD Code

-- boolean flag: true

-- ftd.row:
padding.px: 40

-- ftd.text: Hello World
padding.px if {flag}: 20
padding.px: 2

-- ftd.text: again
padding.px if {!flag}: 20
padding.px: 2

-- end: ftd.row

Output

4-Component

Click to expand

close

FTD Code

-- component print:
string name:

-- ftd.column:

-- ftd.text: $print.name

-- end: ftd.column

-- end: print

-- print:
name: Hello

-- print:
name: Hello Again

Output

5-Component recursion

Click to expand

close

FTD Code

-- record toc-item:
string name:
toc-item list children:

-- toc-item toc:
name: TOC title 1

-- toc.children:

-- toc-item:
name: TOC title 2

-- toc-item:
name: TOC title 3

-- toc-item.children:

-- toc-item:
name: TOC title 4

-- end: toc-item.children

-- end: toc.children

-- component print-toc-item:
toc-item item:

-- ftd.column:
padding.px: 30

-- ftd.text: $print-toc-item.item.name

-- print-toc-item:
item: $obj
$loop$: $print-toc-item.item.children as $obj

-- end: ftd.column

-- end: print-toc-item

-- print-toc-item:
item: $toc

Output

10-conditional-properties

Click to expand

close

FTD Code

-- void increment(a):
integer $a:

a += 1


-- component boo:
integer bv:

-- ftd.column:

-- ftd.text: boo

-- ftd.integer: $boo.bv

-- end: ftd.column

-- end: boo



-- component moo:
integer $fv:
integer mv:

-- ftd.column:

-- boo:
bv if { moo.fv > 10 }: 10
bv if { moo.mv > 6 }: 5
bv: 4

-- ftd.text: moo

-- ftd.integer: $moo.fv
-- ftd.integer: $moo.mv

-- end: ftd.column

-- end: moo




-- component foo:
integer $fv:

-- ftd.column:

-- moo:
mv if { foo.fv > 2 }: 6
mv: 7
$fv: $foo.fv

-- ftd.text: click here to see `increment` in action.
$on-click$: $increment($a = $foo.fv)

-- ftd.integer: $foo.fv


-- end: ftd.column

-- end: foo


-- foo:
$fv: 1

Output

11-external-children

Click to expand

close

FTD Code

-- void increment(a):
integer $a:

a += 1


-- component counter:
integer $count:

-- ftd.integer: $counter.count
$on-click$: $increment($a = $counter.count)

-- end: counter



-- integer $count: 1




-- component page:
ftd.ui list extra-headers:
children body:

-- ftd.column:
padding.px: 80

-- ftd.text: ...................................................................

-- ftd.row:

-- ftd.text: LOGO
padding.px: 2

-- ftd.text: Home
padding.px: 2

-- ftd.row:
children: $page.extra-headers

-- end: ftd.row

-- end: ftd.row

-- ftd.text: ...................................................................

-- ftd.column:
padding.px: 40
children: $page.body

-- end: ftd.column

-- ftd.text: ...................................................................

-- end: ftd.column

-- end: page




-- page:

-- page.extra-headers:

-- ftd.text: Header 1
padding.px: 2

-- ftd.text: Header 2
padding.px: 2

-- ftd.text: Header 3
padding.px: 2

-- ftd.text: Header 4
padding.px: 2


-- end: page.extra-headers


-- ftd.text: Body Text

-- ftd.row:

-- ftd.text: Counter 1:

-- counter:
$count: $count

-- end: ftd.row


-- ftd.row:

-- ftd.text: Counter 2:

-- counter:
$count: $count

-- end: ftd.row


-- end: page


-- page:

-- ftd.text: Hello

-- end: page

Output

13-image

Click to expand

close

FTD Code

-- boolean $flag: true

-- ftd.boolean: $ftd.dark-mode

-- ftd.image:
$on-click$: $toggle-dark-mode($a = $ftd.dark-mode)
width.fixed.px: 100
src: $src

-- ftd.image:
src: https://www.liveabout.com/thmb/YCJmu1khSJo8kMYM090QCd9W78U=/1250x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/powerpuff_girls-56a00bc45f9b58eba4aea61d.jpg
width.fixed.px: 100

-- ftd.image:
src: $new-src
width.fixed.px: 100
height: auto


-- ftd.image:
src: $src
src if { flag }: $tom-and-jerry
width.fixed.px: 100
$on-click$: $ftd.toggle($a = $flag)



-- void toggle-dark-mode(a):
boolean $a:

a = !a


-- ftd.image-src src:
light: https://www.liveabout.com/thmb/YCJmu1khSJo8kMYM090QCd9W78U=/1250x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/powerpuff_girls-56a00bc45f9b58eba4aea61d.jpg
dark: https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png


-- string new-src: https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png


-- ftd.image-src tom-and-jerry:
light: https://wallpaperaccess.com/full/215445.jpg
dark: https://wallpapers.com/images/file/tom-and-jerry-in-the-dog-house-myfg3ooaklw9fk9q.jpg

Output

16-or-type

Click to expand

close

FTD Code

-- ftd.text: Hello from FTD
padding.px: 20


-- integer $value: 20

-- ftd.text: Hello from FTD
padding.px: $value
$on-click$: $increment($a = $value)



-- ftd.length.px len: 20

-- ftd.text: Hello from FTD
padding: $len



-- boolean $flag: true

-- ftd.text:
text: Hello from FTD
padding: $len
padding.percent if { flag }: 20
$on-click$: $toggle($a = $flag)




-- void increment(a):
integer $a:
a += 1


-- void toggle(a):
boolean $a:

a = !a



-- px:
caption integer value:

-- percent:
caption decimal value:

-- end: length

Output

17-record

Click to expand

close

FTD Code

-- record full-name:
caption first-name:
optional string middle-name:
optional string last-name:


-- record person:
full-name name:
integer age:


-- string $name: Arpita

-- person $arpita:
name: *$name
age: 20


-- ftd.text: $arpita.name.first-name

-- ftd.text: $name


-- ftd.text: Change arpita.name.first-name
$on-click$: $append($a = $arpita.name.first-name, b = FifthTry)

-- ftd.text: Change name
$on-click$: $append($a = $name, b = FifthTry)




-- void append(a,b):
string $a:
string b:

a = a + " " + b

Output

18-styles

Click to expand

close

FTD Code

-- boolean $flag: true

-- ftd.text: Click me
$on-click$: $toggle($a = $flag)

-- ftd.text: Hello
padding-left.px: 40
padding-right.percent: 10
padding-top.px: 50
padding-bottom.percent: 7.9
border-width.px: 2
border-top-left-radius.percent if { flag }: 18
z-index: -5


-- ftd.text: Hello
padding-vertical.px: 40
padding-horizontal.percent if { flag } : 10


-- ftd.row:
spacing.fixed.px: 20
spacing.fixed.px if { flag }: 40
wrap: true
wrap if { flag }: false
border-width.px: 4
border-width.px if { flag }: 2
border-radius.percent: 18

-- ftd.text: Hello
-- ftd.text: World

-- end: ftd.row



-- ftd.row:
spacing.fixed.px: 20
align-content if { flag }: top-left
align-content: top-center
background.solid: red
width.fixed.px: 400
height.fixed.px: 100
border-width.px: 1

-- ftd.text: Hello
-- ftd.text: World

-- end: ftd.row


-- ftd.column:
spacing.fixed.px: 2
align-content if { flag }: top-left
align-content: top-center
width.fixed.px: 400
height.fixed.px: 100
border-width.px: 1

-- ftd.text: Hello
-- ftd.text: World

-- end: ftd.column


-- ftd.row:
spacing.fixed.px: 20
width.fixed.px: 400
width if { flag }: hug-content
height.fixed.percent: 20
height if { flag }: fill-container
align-content: top-center
border-width.px: 1


-- ftd.text: Hello
-- ftd.text: World

-- end: ftd.row


-- ftd.text: Hello World
max-width.fixed.px: 20
min-height.fixed.px: 60
background.solid: yellow


-- integer $num: 0


-- ftd.text: Data
width.fixed.px if { num % 7 == 0 }: 20
width.fixed.percent if { num % 7 == 1 }: 20
width.fixed.calc if { num % 7 == 2 }: 20
width.fixed.vh if { num % 7 == 3 }: 20
width.fixed.vw if { num % 7 == 4 }: 20
width.fixed.em if { num % 7 == 5 }: 20
width.fixed.rem if { num % 7 == 6 }: 20
background.solid: red
$on-click$: $increment($a = $num)



-- void increment(a):
integer $a:

a += 1






-- void toggle(a):
boolean $a:

a = !a

Output

19-complex-styles

Click to expand

close

FTD Code

-- boolean $flag: true

-- ftd.text: Click me
$on-click$: $toggle($a = $flag)


-- foo:
px if { flag }: 30
px: 40
resize if { flag }: hug-content
resize.fixed.px: 50
align if { flag }: top-left
align: top-center



-- component foo:
integer px:
ftd.resizing resize:
ftd.align align:

-- ftd.column:
width if { flag }: $foo.resize
width.fixed.px: $foo.px
align-content: $foo.align

-- ftd.text: Hello
height.fixed.px if { flag }: $foo.px
height: $foo.resize

-- ftd.text: World

-- end: ftd.column

-- end: foo



-- void toggle(a):
boolean $a:

a = !a

Output

21-color

Click to expand

close

FTD Code

-- ftd.row:
spacing.fixed.px: 20

-- ftd.row:
spacing.fixed.px: 5

-- ftd.text: ftd.dark-mode:

-- ftd.boolean: $ftd.dark-mode
color: $bgcolor

-- end: ftd.row



-- ftd.row:
spacing.fixed.px: 5

-- ftd.text: ftd.system-dark-mode:

-- ftd.boolean: $ftd.system-dark-mode
color: $bgcolor

-- end: ftd.row


-- ftd.row:
spacing.fixed.px: 5

-- ftd.text: ftd.follow-system-dark-mode:

-- ftd.boolean: $ftd.follow-system-dark-mode
color: $bgcolor

-- end: ftd.row



-- end: ftd.row

-- ftd.column:
spacing.fixed.px: 40

-- ftd.row:
spacing.fixed.px: 20

-- ftd.text: Dark Mode
$on-click$: $set-dark()

-- ftd.text: Light Mode
$on-click$: $set-light()

-- ftd.text: System Mode
$on-click$: $set-system()

-- end: ftd.row

-- ftd.column:
width.fixed.px: 60
height.fixed.px: 60
align-content: center
background.solid: red
border-width.px: 3
border-color: $bgcolor

-- ftd.text: Hello
-- ftd.text: World

-- end: ftd.column


-- ftd.column:
width.fixed.px: 60
height.fixed.px: 60
align-content: center
background.solid: $bgcolor
border-color: red
border-width.px: 3

-- ftd.text: Hello
-- ftd.text: World

-- end: ftd.column

-- ftd.column:
width.fixed.px: 60
height.fixed.px: 60
align-content: center
background: $background-fill
border-left-color: $bgcolor
border-left-width.px: 3
border-top-color: red
border-top-width.px: 4
border-right-color: blue
border-right-width.px: 1
border-bottom-color: orange
border-bottom-width.px: 2

-- ftd.text: Hello
-- ftd.text: World

-- end: ftd.column

-- end: ftd.column




-- ftd.background.solid background-fill:
light: pink
dark: purple


-- ftd.color bgcolor:
light: green
dark: blue


-- void toggle-dark-mode(a):
boolean $a:

a = !a



-- void set-dark():

enable_dark_mode()


-- void set-light():

enable_light_mode()


-- void set-system():

enable_system_mode()

Output

22-test

Click to expand

close

FTD Code

-- ftd.text: Hello World

-- ftd.row:
padding.px: 40

-- ftd.text: Hello World
padding.px: 2

-- ftd.text: again
padding.px: 2

-- end: ftd.row


-- integer num: 20

-- ftd.row:
padding.px: 40

-- ftd.text: Hello World
padding.px if {num > 20}: 20
padding.px: 2

-- ftd.text: again
padding.px if {num == 20}: 20
padding.px: 2

-- end: ftd.row

Output

23-alignment

Click to expand

close

FTD Code

-- integer $num: 0

-- ftd.column:
spacing.fixed.px: 20

-- ftd.text: Click Here!!
color: red
$on-click$: $increment($a=$num)


-- ftd.integer: $num


-- ftd.row:
spacing.fixed.px: 20
wrap: true



-- ftd.column:
spacing.fixed.px: 20
align-content if { num % 9 == 0 }: top-left
align-content if { num % 9 == 1 }: top-center
align-content if { num % 9 == 2 }: top-right
align-content if { num % 9 == 3 }: left
align-content if { num % 9 == 4 }: center
align-content if { num % 9 == 5 }: right
align-content if { num % 9 == 6 }: bottom-left
align-content if { num % 9 == 7 }: bottom-center
align-content if { num % 9 == 8 }: bottom-right
background.solid: red
width.fixed.px: 200
height.fixed.px: 200
border-width.px: 1

-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: yellow
border-width.px: 1

-- end: ftd.column


-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: orange
border-width.px: 1

-- end: ftd.column


-- end: ftd.column







-- ftd.row:
spacing.fixed.px: 20
align-content if { num % 9 == 0 }: top-left
align-content if { num % 9 == 1 }: top-center
align-content if { num % 9 == 2 }: top-right
align-content if { num % 9 == 3 }: left
align-content if { num % 9 == 4 }: center
align-content if { num % 9 == 5 }: right
align-content if { num % 9 == 6 }: bottom-left
align-content if { num % 9 == 7 }: bottom-center
align-content if { num % 9 == 8 }: bottom-right
background.solid: red
width.fixed.px: 200
height.fixed.px: 200
border-width.px: 1

-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: yellow
border-width.px: 1

-- end: ftd.column


-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: orange
border-width.px: 1

-- end: ftd.column


-- end: ftd.row








-- ftd.row:
spacing.fixed.px: 20
align-content if { num % 9 == 0 }: top-left
align-content if { num % 9 == 1 }: top-center
align-content if { num % 9 == 2 }: top-right
align-content if { num % 9 == 3 }: left
align-content if { num % 9 == 4 }: center
align-content if { num % 9 == 5 }: right
align-content if { num % 9 == 6 }: bottom-left
align-content if { num % 9 == 7 }: bottom-center
align-content if { num % 9 == 8 }: bottom-right
/spacing: space-between
background.solid: green
width.fixed.px: 200
height.fixed.px: 200
border-width.px: 1

-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: yellow
border-width.px: 1

-- end: ftd.column


-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: orange
border-width.px: 1

-- end: ftd.column


-- end: ftd.row





-- ftd.column:
spacing.fixed.px: 20
align-content if { num % 9 == 0 }: top-left
align-content if { num % 9 == 1 }: top-center
align-content if { num % 9 == 2 }: top-right
align-content if { num % 9 == 3 }: left
align-content if { num % 9 == 4 }: center
align-content if { num % 9 == 5 }: right
align-content if { num % 9 == 6 }: bottom-left
align-content if { num % 9 == 7 }: bottom-center
align-content if { num % 9 == 8 }: bottom-right
/spacing: space-evenly
background.solid: green
width.fixed.px: 200
height.fixed.px: 200
border-width.px: 1

-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: yellow
border-width.px: 1

-- end: ftd.column


-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: orange
border-width.px: 1

-- end: ftd.column


-- end: ftd.column





-- ftd.column:
spacing.fixed.px: 20
background.solid: blue
width.fixed.px: 200
height.fixed.px: 200
border-width.px: 1

-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: yellow
border-width.px: 1
align-self if { num % 3 == 0 }: start
align-self if { num % 3 == 1 }: center
align-self if { num % 3 == 2 }: end

-- end: ftd.column


-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: orange
border-width.px: 1

-- end: ftd.column


-- end: ftd.column



-- ftd.row:
spacing.fixed.px: 20
background.solid: blue
width.fixed.px: 200
height.fixed.px: 200
border-width.px: 1

-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: yellow
border-width.px: 1
align-self if { num % 3 == 0 }: start
align-self if { num % 3 == 1 }: center
align-self if { num % 3 == 2 }: end

-- end: ftd.column


-- ftd.column:
width.fixed.px: 20
height.fixed.px: 20
background.solid: orange
border-width.px: 1

-- end: ftd.column


-- end: ftd.row



-- ftd.row:
spacing.fixed.px: 20
background.solid: pink
width.fixed.px: 200
height.fixed.px: 200
border-width.px: 1

-- ftd.text:
background.solid: yellow
width: fill-container
height: fill-container
text-align if { num % 4 == 0 }: start
text-align if { num % 4 == 1 }: center
text-align if { num % 4 == 2 }: end
text-align if { num % 4 == 3 }: justify


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam,
consequat gravida libero rhoncus ut.


-- end: ftd.row




-- end: ftd.row
-- end: ftd.column



-- void increment(a):
integer $a:

a += 1;

Output

24-margin

Click to expand

close

FTD Code

-- ftd.column:
width: fill-container
height: fill-container

-- ftd.column:
width.fixed.px: 60
height.fixed.px: 60
background.solid: yellow
border-width.px: 1
margin-horizontal.px: 60

-- end: ftd.column


-- ftd.column:
width.fixed.px: 60
height.fixed.px: 60
background.solid: yellow
border-width.px: 1
margin-top.px: 40

-- end: ftd.column

-- ftd.column:
width.fixed.px: 60
height.fixed.px: 60
background.solid: green
border-width.px: 1
margin.px: 100

-- end: ftd.column

-- end: ftd.column

Output

23-doc-site

Click to expand

close

FTD Code

-- page: PAGE TITLE
section-item: $item
subsection-item: $sub-item
toc: $toc
navtitle: Section-one
nav-subtitle: Subsection-one
current-title: Toc Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-- image: Image 1
src: https://www.liveabout.com/thmb/YCJmu1khSJo8kMYM090QCd9W78U=/1250x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/powerpuff_girls-56a00bc45f9b58eba4aea61d.jpg

-- image: Image 1
src: https://www.liveabout.com/thmb/YCJmu1khSJo8kMYM090QCd9W78U=/1250x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/powerpuff_girls-56a00bc45f9b58eba4aea61d.jpg

-- image: Image 1
src: https://www.liveabout.com/thmb/YCJmu1khSJo8kMYM090QCd9W78U=/1250x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/powerpuff_girls-56a00bc45f9b58eba4aea61d.jpg

-- image: Image 1
src: https://www.liveabout.com/thmb/YCJmu1khSJo8kMYM090QCd9W78U=/1250x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/powerpuff_girls-56a00bc45f9b58eba4aea61d.jpg

-- image: Image 1
src: https://www.liveabout.com/thmb/YCJmu1khSJo8kMYM090QCd9W78U=/1250x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/powerpuff_girls-56a00bc45f9b58eba4aea61d.jpg


-- image: Image 1
src: https://www.liveabout.com/thmb/YCJmu1khSJo8kMYM090QCd9W78U=/1250x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/powerpuff_girls-56a00bc45f9b58eba4aea61d.jpg

-- end: page










-- component page:
optional caption title:
toc-item list section-item:
toc-item list subsection-item:
toc-items list toc:
optional body body:
string navtitle:
string nav-subtitle:
string current-title:
children container:

-- ftd.column:
background.solid: $base
width.fixed.percent: 100



-- header:
section-item: $page.section-item
subsection-item:$page.subsection-item
toc: $page.toc
navtitle: $page.navtitle
nav-subtitle: $page.nav-subtitle
current-title: $page.current-title


-- ftd.row:
padding.px: 48
spacing.fixed.px: 48
width.fixed.percent: 100

-- ftd.column:
background.solid: $step-1
padding.px: 24
min-height.fixed.percent: 100
width.fixed.percent: 20

-- print-toc:
item: $page.toc

-- end: ftd.column

-- ftd.column:
spacing.fixed.px: 32
width.fixed.percent: 80

-- ftd.text: $page.title
color: $text-strong

-- ftd.text: $page.body
color: $text-strong

-- ftd.column:
children: $page.container
spacing.fixed.px: 32
width.fixed.percent: 100

-- end: ftd.column

-- end: ftd.column

-- end: ftd.row

-- end: ftd.column

-- end: page










-- component print-toc-item:
toc-item list item:

-- ftd.row:
padding-left.px: 30

-- print-toc-item-one:
item: $obj.name
url: $obj.url
$loop$: $print-toc-item.item as $obj

-- end: ftd.row

-- end: print-toc-item











-- component print-toc-item-one:
caption item:
string url:

-- ftd.row:
padding-left.px: 30
align-content: center

-- ftd.text:
text:$print-toc-item-one.item
link:$print-toc-item-one.url
color: $text-strong

-- end: ftd.row

-- end: print-toc-item-one










-- component print-toc:
toc-items list item:

-- ftd.column:

-- print-toc-one:
item: $obj.name
children: $obj.children
$loop$: $print-toc.item as $obj

-- end: ftd.column

-- end: print-toc










-- component print-toc-one:
string item:
toc-items list children:

-- ftd.column:

-- ftd.column:

-- ftd.text:
text: $print-toc-one.item
padding-bottom.px: 8
color: $text-strong

-- end: ftd.column

-- ftd.column:
padding-left.px: 12

-- print-toc-one:
item: $obj.name
children: $obj.children
$loop$: $print-toc-one.children as $obj

-- end: ftd.column

-- end: ftd.column

-- end: print-toc-one










-- component image:
optional caption title:
ftd.image-src src:
ftd.align aaa: center

-- ftd.column:
width.fixed.percent: 100
align-content: $image.aaa
spacing.fixed.px: 12

-- ftd.column:
width.fixed.percent: 100
align-content: center

-- ftd.image:
src: $image.src
width.fixed.px: 400
height.fixed.px: 100

-- end: ftd.column

-- ftd.text:
text: $image.title
color: $text-strong

-- end: ftd.column

-- end: image











-- component header:
toc-item list section-item:
toc-item list subsection-item:
toc-items list toc:
string navtitle:
string nav-subtitle:
string current-title:

-- ftd.column:
width.fixed.percent: 100

-- ftd.row:
width.fixed.percent: 100
padding.px: 32

-- ftd.row:
width.fixed.percent: 26

-- ftd.image:
src: $src

-- end: ftd.row

-- ftd.row:
width.fixed.percent: 74
align-content: right

-- print-toc-item:
item: $header.section-item

-- end: ftd.row

-- end: ftd.row

-- ftd.row:
background.solid: $step-1
width.fixed.percent: 100
padding-vertical.px: 24
padding-horizontal.px: 32

-- ftd.column:
width.fixed.percent: 26
spacing.fixed.px: 12

-- ftd.text: $header.navtitle
color: $text-strong

-- ftd.row:
spacing.fixed.px: 8

-- ftd.text: $header.nav-subtitle
color: $text-strong
-- ftd.row:

-- ftd.text: \-
color: $text-strong

-- ftd.text: \>
color: $text-strong
padding-top.percent: 10.7

-- end: ftd.row

-- ftd.text: $header.current-title
color: $text-strong

-- end: ftd.row

-- end: ftd.column

-- ftd.column:
align-content: right
width.fixed.percent: 100
align-self: center

-- ftd.row:
width.fixed.percent: 100
align-content: right


-- ftd.column:
align-content: center


-- ftd.column:
align-content: center


-- print-toc-item:
item: $header.subsection-item

-- end: ftd.column

-- end: ftd.row

-- end: ftd.column

-- end: ftd.row

-- end: ftd.column

-- end: header










-- ftd.color base:
light: #18181b
dark: #18181b

-- ftd.color step-1:
light: #141414
dark: #141414

-- ftd.color text-strong:
light: #ffffff
dark: #ffffff





-- record toc-item:
caption name:
string url:

-- toc-item list item:

-- toc-item: Section-one
url: /

-- toc-item: Section-two
url: /

-- toc-item: Section-three
url: /

-- toc-item: Section-four
url: /

-- end: item






-- toc-item list sub-item:

-- toc-item: Subsection-one
url: /

-- toc-item: Subsection-two
url: /

-- toc-item: Subsection-three
url: /

-- toc-item: subsection-four
url: /

-- end: sub-item





-- record toc-items:
string name:
toc-items list children:

-- toc-items list toc:

-- toc-items:
name: TOC title 1

-- toc-items.children:

-- toc-items:
name: TOC children 1.1

-- toc-items.children:

-- toc-items:
name: TOC children 1.1.1

-- end: toc-items.children

-- end: toc-items.children

-- toc-items:
name: TOC title 2

-- toc-items:
name: TOC title 3

-- toc-items:
name: TOC title 4

-- end: toc

-- ftd.image-src src:
light: https://www.fifthtry.com/-/fifthtry.com/assets/images/logo-fifthtry-dark.svg
dark: https://www.fifthtry.com/-/fifthtry.com/assets/images/logo-fifthtry-dark.svg

Output

25-expander

Click to expand

close

FTD Code

-- ftd.column:
padding.px: 20
border-width.px: 1
spacing.fixed.px: 50
background.solid: #eee
width: fill-container
height: fill-container
align-content: top-center


-- box: What is FTD?

FTD is an open source programming language for writing prose.

-- box:
title: We are adding text of header using title

Here is a FTD document that is importing a library, lib, and has a heading of
level 1, "Hello World". FTD language is designed for human beings, not just
programmers, we have taken precautions like not requiring quoting for strings,
not relying on indentation nor on braces that most programming
languages require.

It is not verbose like HTML, and not simplistic like Markdown. We can define
variables in FTD. FTD is strongly typed. We can do event handling. Since we are
targeting "human beings" we have created a lot of "actions" that we believe one
will be invoking on a day to day basis, like toggle, which can be used to create
simple event handling.


-- box:

-- end: ftd.column


-- component box:
caption title: default header
body body: default body
boolean $open: false

-- ftd.column:
border-width.px: 4
width.fixed.percent: 60

-- ftd.row:
padding.px: 10
border-width.px: 1
width: fill-container
spacing: space-between
$on-click$: $toggle($value = $box.open)

-- ftd.text: $box.title
-- ftd.text: O
if: {!box.open}

-- ftd.text: X
if: {$box.open}

-- end: ftd.row

-- ftd.text:
if: { $box.open }
padding.px: 10
height: hug-content

$box.body

-- end: ftd.column

-- end: box

-- void toggle(value):
boolean $value:

value = !value;

Output

25-overflow

Click to expand

close

FTD Code

-- boolean $flag: true

-- void toggle(a):
boolean $a:

a = !a

-- ftd.row:
align-content: center

-- ftd.text: overflow

-- end: ftd.row


-- ftd.row:
margin-bottom.px: 100
padding.px: 40
spacing.fixed.px: 40
width: fill-container


-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow if { flag }: scroll
$on-click$: $toggle($a=$flag)

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.

-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow: visible

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.

-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow: hidden

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.


-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow: auto

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.

-- end: ftd.row

-- boolean $flag: true








-- ftd.row:
align-content: center

-- ftd.text: overflow-x

-- end: ftd.row


-- ftd.row:
margin-top.px: 40
padding.px: 40
spacing.fixed.px: 40
width: fill-container


-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow-x: scroll

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.

-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow-x: visible

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.

-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow-x: hidden

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.


-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow-x: auto

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.

-- end: ftd.row





-- ftd.row:
align-content: center

-- ftd.text: overflow-y

-- end: ftd.row


-- ftd.row:
margin-top.px: 40
padding.px: 40
spacing.fixed.px: 40
width: fill-container


-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow-y: scroll

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.

-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow-y: visible

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.

-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow-y: hidden

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.


-- ftd.text:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
overflow-y: auto

The overflow property is specified as one or two keywords chosen from the list
of values below. If two keywords are specified, the first applies to overflow-x
and the second to overflow-y. Otherwise, both overflow-x and overflow-y are set
to the same value.


-- ftd.column:
width.fixed.px: 100
height.fixed.px: 100
background.solid: yellow
resize: both

-- end: ftd.column

-- end: ftd.row

Output

26-border

Click to expand

close

FTD Code

-- ftd.column:
margin.px: 50
width.fixed.px: 200
height.fixed.px: 200
background.solid: yellow
border-bottom-width.px: 11
border-top-width.px: 5
border-left-width.px: 7
border-right-width.px: 9
border-bottom-color: red
border-top-color: blue
border-left-color: green
border-right-color: purple

-- end: ftd.column


-- ftd.column:
margin.px: 50
width.fixed.px: 200
height.fixed.px: 200
background.solid: yellow
border-width.px: 10
border-bottom-color: red
border-top-color: blue
border-left-color: green
border-right-color: purple

-- end: ftd.column

Output

27-optional

Click to expand

close

FTD Code

-- optional string $name: NULL


-- ftd.text: Hello
if: { ftd.is_empty(name) }
$on-click$: $append($a = $name, b = FifthTry)

-- ftd.text: Hello Again
if: { name == NULL }


-- ftd.text: $name
if: { !ftd.is_empty(name) }
$on-click$: $append($a = $name, b = FifthTry)

-- ftd.text: $name
if: { name != NULL }




-- void append(a,b):
optional string $a:
string b:

a = a + " " + b

Output

28-complex

Click to expand

close

FTD Code

-- ftd.background.solid base:
light: #18181b
dark: #18181b

-- ftd.background.solid step-1:
light: #141414
dark: #141414

-- ftd.background.solid step-2:
light: #585656
dark: #585656

-- ftd.background.solid overlay:
light: rgba(0, 0, 0, 0.8)
dark: rgba(0, 0, 0, 0.8)

-- ftd.background.solid code:
light: #2B303B
dark: #2B303B

-- ftd.color text:
light: #a8a29e
dark: #a8a29e

-- ftd.color text-strong:
light: #ffffff
dark: #ffffff


-- string site: FithTry Doc




-- component page:
body mytext:
toc-item sections:


-- ftd.column:
width: fill-container
height.fixed.percent: 100
background: $step-2


-- ftd.column:
width: fill-container
padding.px: 24

-- header:
sections: $page.sections
site-name: Logo

-- end: ftd.column



-- ftd.column:
width: fill-container

-- ftd.row:
width: fill-container


-- ftd.row:
width.fixed.percent: 25

-- ftd.column:
height: fill-container
background: $step-1

-- ftd.text: table of contents
color: $text

-- end: ftd.column

-- end: ftd.row


-- ftd.row:
width.fixed.percent: 50

-- ftd.text:
text: $page.mytext

-- end: ftd.row


-- ftd.row:
width.fixed.percent: 25

-- ftd.text: Sidebar
color: $text

-- end: ftd.row


-- end: ftd.row

-- end: ftd.column


-- end: ftd.column

-- end: page





-- page:
sections: $toc

some body here





-- record toc-item:
string name:
string link:
toc-item list children:


-- toc-item toc:
name: Header Item 1
link: /

-- toc.children:

-- toc-item:
name: Header Item 2
link: /

-- toc-item:
name: Header Item 3
link: /

-- toc-item.children:

-- toc-item:
name: Header Item 4
link: /

-- end: toc-item.children

-- end: toc.children



-- component header-links:
toc-item item:

-- ftd.row:

-- ftd.text: $header-links.item.name
link: $header-links.item.link
color: $text-strong

-- header-links:
item: $obj
$loop$: $header-links.item.children as $obj

-- end: ftd.row

-- end: header-links

-- component header:
toc-item sections:
string site-name: SiteName

-- ftd.row:
width: fill-container

-- ftd.row:
width: fill-container

-- ftd.text: $header.site-name
color: $text-strong

-- end: ftd.row

-- ftd.row:
width: hug-content

-- header-links:
item: $header.sections

-- end: ftd.row

-- end: ftd.row

-- end: header

Output

29-slides

Click to expand

close

FTD Code

-- void set-false(a):
boolean $a:

a = false;

-- ftd.color base: #18181b

-- ftd.color step-1: #141414

-- ftd.color text-strong: #ffffff


-- presentation:





-- component presentation:
boolean $show: false
ftd.color bg-color: $base
ftd.color overlay-bg-color: $step-1
optional ftd.image-src bg-image:

-- ftd.column:
background.solid: $presentation.bg-color
width: fill-container

-- mobile-overlay:
if: { presentation.show }
overlay-bg-color: $presentation.overlay-bg-color
$on-click$: $set-false($a = $presentation.show)

-- end: ftd.column

-- end: presentation

-- component mobile-overlay:
ftd.color overlay-bg-color:

-- ftd.column:
height.fixed.calc: 100% - 0px
width: fill-container
background.solid: $mobile-overlay.overlay-bg-color

-- end: ftd.column

-- end: mobile-overlay

Output

34-device

Click to expand

close

FTD Code

-- ftd.text: Hello World
color if { ftd.device == "desktop" }: $red
color: $green
padding.px if { ftd.device == "mobile" }: 40
padding.percent: 10


-- ftd.color red:
light: pink
dark: red


-- ftd.color green:
light: green
dark: blue

Output

35-condition-on-color

Click to expand

close

FTD Code

-- label: THE
$danger: true


-- component label:
caption value:
boolean $danger: false

-- ftd.text: $label.value
color: $green
color if { label.danger }: $red
$on-click$: $toggle($a = $label.danger)

-- end: label

-- ftd.color red:
light: pink
dark: red

-- ftd.color green:
light: green
dark: blue

-- void toggle(a):
boolean $a:

a = !a

Output

37-cursor

Click to expand

close

FTD Code

-- integer $num: 0

-- ftd.text: Click here and move cursor in red area
$on-click$: $increment($a = $num)

-- ftd.column:
width.fixed.px: 200
height.fixed.px: 200
background.solid: red
cursor if { num % 35 == 0 }: default
cursor if { num % 35 == 1 }: none
cursor if { num % 35 == 2 }: context-menu
cursor if { num % 35 == 3 }: help
cursor if { num % 35 == 4 }: pointer
cursor if { num % 35 == 5 }: progress
cursor if { num % 35 == 6 }: wait
cursor if { num % 35 == 7 }: cell
cursor if { num % 35 == 8 }: crosshair
cursor if { num % 35 == 9 }: text
cursor if { num % 35 == 10 }: vertical-text
cursor if { num % 35 == 11 }: alias
cursor if { num % 35 == 12 }: copy
cursor if { num % 35 == 13 }: move
cursor if { num % 35 == 14 }: no-drop
cursor if { num % 35 == 15 }: not-allowed
cursor if { num % 35 == 16 }: grab
cursor if { num % 35 == 17 }: grabbing
cursor if { num % 35 == 18 }: e-resize
cursor if { num % 35 == 19 }: n-resize
cursor if { num % 35 == 20 }: ne-resize
cursor if { num % 35 == 21 }: nw-resize
cursor if { num % 35 == 22 }: s-resize
cursor if { num % 35 == 23 }: se-resize
cursor if { num % 35 == 24 }: sw-resize
cursor if { num % 35 == 25 }: w-resize
cursor if { num % 35 == 26 }: ew-resize
cursor if { num % 35 == 27 }: ns-resize
cursor if { num % 35 == 28 }: nesw-resize
cursor if { num % 35 == 29 }: nwse-resize
cursor if { num % 35 == 30 }: col-resize
cursor if { num % 35 == 31 }: row-resize
cursor if { num % 35 == 32 }: all-scroll
cursor if { num % 35 == 33 }: zoom-in
cursor if { num % 35 == 34 }: zoom-out

-- end: ftd.column



-- void increment(a):
integer $a:

a += 1

Output

38-role

Click to expand

close

FTD Code

-- ftd.type dtype:
size.px: 40
weight: 900
font-family: cursive
line-height.px: 65
letter-spacing.px: 5

-- ftd.type mtype:
size.px: 20
weight: 100
font-family: fantasy
line-height.px: 35
letter-spacing.px: 3

-- boolean $flag: true

-- ftd.responsive-type rtype:
desktop: $dtype
mobile: $mtype

-- ftd.responsive-type rrtype:
desktop: $mtype
mobile: $dtype

-- ftd.text: Hello World
role if { flag }: $rtype
role: $rrtype
$on-click$: $toggle($a = $flag)

-- void toggle(a):
boolean $a:

a = !a

Output

40-anchor

Click to expand

close

FTD Code

-- ftd.column:
width.fixed.px: 400
height.fixed.px: 400
background.solid: pink

-- ftd.text: Hello Parent
anchor: parent
left.rem: 8.3
top.rem: 8

-- end: ftd.column


-- ftd.text: Hello Window
anchor: window

Output