powered by

FTD

Built-in Types

ftd comes with some built-in types. These types can be used to construct more complex types like record and or-type.

boolean

This type is used to represent boolean values true and false.

-- boolean is-monday: true

This type can be “auto-detected” so it’s not necessary to specify the type when declaring a boolean variable.

integer

This is integer type, can be positive or negative.

-- integer number-of-days-in-a-week: 7

This type can be “auto-detected” so it’s not necessary to specify the type when declaring an integer variable.

decimal

This type is used to represent decimal numbers.

-- decimal pi: 3.14159

This type can be “auto-detected” so it’s not necessary to specify the type when declaring a decimal variable.

string

This is unicode string.

-- string message: hello world!

a multi-line string

-- string message:

this is a multiline string.

can have any number of lines.

or long paragraph, if you have a long paragraph to write. it can
contain unicode characters in any भाषा, or emojis, 💁👌🎍😍.

caption

caption is a special type, it is an alias for string, but can not be used when declaring a variable.

This type is used for record, or-type and component arguments.

If a record or or-type field, or component argument is defined as caption, it can be passed in the “caption” location in ftd::p1 “section”.

record with caption

-- record person:
caption name:

-- person amitu: Amit Upadhyay

-- person shobhit:
name: Shobhit Sharma

If something is specified as caption, it can come in the “caption” location, eg in case of amitu var, or it can come as an explicit key, as in the declaration of shobhit variable.

body

body is a special type, it is an alias for string, but can not be used when declaring a variable.

This type is used for record, or-type and component arguments.

If a record or or-type field, or component argument is defined as body, it can be passed in the “body” location in ftd::p1 “section”.

record with body

-- record person:
name: caption
bio: body

-- person amitu: Amit Upadhyay

this is single

or multi-line bio of Amit.

-- person shobhit:
name: Shobhit Sharma
bio: or we can put things in "header"

If something is specified as body, it can come in the “body” location, eg in case of amitu var, or it can come as an explicit key, as in the declaration of shobhit variable.

caption or body

caption or body is a special type, it is an alias for string, but can not be used when declaring a variable.

This type is used for record, or-type and component arguments.

If a record or or-type field, or component argument is defined as caption or body, it can be passed in either the “caption” or “body” location in ftd::p1 “section”.

record with caption or body

-- record person:
caption or body name:

-- person amitu: Amit Upadhyay

-- person shobhit:
name: Shobhit Sharma

-- person abrar:

Abrar Khan

If something is specified as caption or body, it can come in the “caption” location, eg in case of amitu var, or it can come as an explicit key, as in the declaration of shobhit variable, or in “body” location, eg for abrar.

ftd.color

It is record type with the following fields.

ftd.color record (ftd.ftd)

-- record color:
caption light:
string dark:

It shows color in light field in light mode and color in dark field in dark mode. Consider the following example:

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

This would return red color in light mode and orange color in dark mode.

Supported Color Formats

The value of light and dark can be any string supported by CSS3 Color spec.

Along with CSS3 colors we also support 8 digit RGBA format (eg #RRGGBBAA) from CSS Color Module Level 4.

ftd.font-size

It is record font-size with the following fields.

ftd.font-size record (ftd.ftd)

-- record font-size:
integer line-height:
integer size:
integer letter-spacing:

It defines the line-height, size and letter-spacing.

line-height

The line-height field sets the height of a line box. It’s commonly used to set the distance between lines of text.

size

The size field sets the size of the font.

letter-spacing

The letter-spacing sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

-- ftd.font-size fs:
line-height: 30
size: 24
letter-spacing: 0

ftd.type

It defines the typography of the font.

It is record type with the following fields.

ftd.type record (ftd.ftd)

-- record type:
string font:
ftd.font-size desktop:
ftd.font-size mobile:
ftd.font-size xl:
integer weight:
optional string style:

It defines the:

  • font: A prioritized list of one or more font family names and/or generic family names for the selected element.
  • desktop, mobile and xl: These are of ftd.font-size type. These are responsive. So only one of these will be applicable depending on device.
  • weight: The weight (or boldness) of the font.
  • style: The appearance of decorative lines on text or styling of font. It is an optional field. It takes the following values: italic, underline and strike. More than one of these values can be using space separation. Example: style: italic underline
-- ftd.font-size desktop-fs:
line-height: 30
size: 24
letter-spacing: 0

-- ftd.font-size mobile-fs:
line-height: 20
size: 16
letter-spacing: 0

-- ftd.font-size xl-fs:
line-height: 50
size: 46
letter-spacing: 0

-- ftd.type font-type:
font: serif
desktop: $desktop-fs
mobile: $mobile-fs
xl: $xl-fs
weight: 400
style: italic

This would return red color in light mode and orange color in dark mode.

length

length is a type that is used for passing UI dimensions. It has one of the

length accepts following set of string:

  • fill: This gives 100% space
  • auto: This gives auto space (read more about it in auto css property value)
  • calc <some-value>: It takes a single expression as its parameter, with the expression’s result used as the value. Example: width: calc 100% - 80px
  • fit-content: the element will use the available space, but never more than max-content. Example: width: fit-content
  • portion <integer>: It specifies how much the item will grow relative to the rest of the items inside the same container.
  • percent <integer>: This gives % space
  • vh <integer>: Relative to 1% of the height of the viewport
  • vw <integer>: Relative to 1% of the width of the viewport
  • <integer>: Gives px unit space.

FTD

Built-in Types

ftd comes with some built-in types. These types can be used to construct more complex types like record and or-type.

boolean

This type is used to represent boolean values true and false.

-- boolean is-monday: true

This type can be “auto-detected” so it’s not necessary to specify the type when declaring a boolean variable.

integer

This is integer type, can be positive or negative.

-- integer number-of-days-in-a-week: 7

This type can be “auto-detected” so it’s not necessary to specify the type when declaring an integer variable.

decimal

This type is used to represent decimal numbers.

-- decimal pi: 3.14159

This type can be “auto-detected” so it’s not necessary to specify the type when declaring a decimal variable.

string

This is unicode string.

-- string message: hello world!

a multi-line string

-- string message:

this is a multiline string.

can have any number of lines.

or long paragraph, if you have a long paragraph to write. it can
contain unicode characters in any भाषा, or emojis, 💁👌🎍😍.

caption

caption is a special type, it is an alias for string, but can not be used when declaring a variable.

This type is used for record, or-type and component arguments.

If a record or or-type field, or component argument is defined as caption, it can be passed in the “caption” location in ftd::p1 “section”.

record with caption

-- record person:
caption name:

-- person amitu: Amit Upadhyay

-- person shobhit:
name: Shobhit Sharma

If something is specified as caption, it can come in the “caption” location, eg in case of amitu var, or it can come as an explicit key, as in the declaration of shobhit variable.

body

body is a special type, it is an alias for string, but can not be used when declaring a variable.

This type is used for record, or-type and component arguments.

If a record or or-type field, or component argument is defined as body, it can be passed in the “body” location in ftd::p1 “section”.

record with body

-- record person:
name: caption
bio: body

-- person amitu: Amit Upadhyay

this is single

or multi-line bio of Amit.

-- person shobhit:
name: Shobhit Sharma
bio: or we can put things in "header"

If something is specified as body, it can come in the “body” location, eg in case of amitu var, or it can come as an explicit key, as in the declaration of shobhit variable.

caption or body

caption or body is a special type, it is an alias for string, but can not be used when declaring a variable.

This type is used for record, or-type and component arguments.

If a record or or-type field, or component argument is defined as caption or body, it can be passed in either the “caption” or “body” location in ftd::p1 “section”.

record with caption or body

-- record person:
caption or body name:

-- person amitu: Amit Upadhyay

-- person shobhit:
name: Shobhit Sharma

-- person abrar:

Abrar Khan

If something is specified as caption or body, it can come in the “caption” location, eg in case of amitu var, or it can come as an explicit key, as in the declaration of shobhit variable, or in “body” location, eg for abrar.

ftd.color

It is record type with the following fields.

ftd.color record (ftd.ftd)

-- record color:
caption light:
string dark:

It shows color in light field in light mode and color in dark field in dark mode. Consider the following example:

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

This would return red color in light mode and orange color in dark mode.

Supported Color Formats

The value of light and dark can be any string supported by CSS3 Color spec.

Along with CSS3 colors we also support 8 digit RGBA format (eg #RRGGBBAA) from CSS Color Module Level 4.

ftd.font-size

It is record font-size with the following fields.

ftd.font-size record (ftd.ftd)

-- record font-size:
integer line-height:
integer size:
integer letter-spacing:

It defines the line-height, size and letter-spacing.

line-height

The line-height field sets the height of a line box. It’s commonly used to set the distance between lines of text.

size

The size field sets the size of the font.

letter-spacing

The letter-spacing sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

-- ftd.font-size fs:
line-height: 30
size: 24
letter-spacing: 0

ftd.type

It defines the typography of the font.

It is record type with the following fields.

ftd.type record (ftd.ftd)

-- record type:
string font:
ftd.font-size desktop:
ftd.font-size mobile:
ftd.font-size xl:
integer weight:
optional string style:

It defines the:

  • font: A prioritized list of one or more font family names and/or generic family names for the selected element.
  • desktop, mobile and xl: These are of ftd.font-size type. These are responsive. So only one of these will be applicable depending on device.
  • weight: The weight (or boldness) of the font.
  • style: The appearance of decorative lines on text or styling of font. It is an optional field. It takes the following values: italic, underline and strike. More than one of these values can be using space separation. Example: style: italic underline
-- ftd.font-size desktop-fs:
line-height: 30
size: 24
letter-spacing: 0

-- ftd.font-size mobile-fs:
line-height: 20
size: 16
letter-spacing: 0

-- ftd.font-size xl-fs:
line-height: 50
size: 46
letter-spacing: 0

-- ftd.type font-type:
font: serif
desktop: $desktop-fs
mobile: $mobile-fs
xl: $xl-fs
weight: 400
style: italic

This would return red color in light mode and orange color in dark mode.

length

length is a type that is used for passing UI dimensions. It has one of the

length accepts following set of string:

  • fill: This gives 100% space
  • auto: This gives auto space (read more about it in auto css property value)
  • calc <some-value>: It takes a single expression as its parameter, with the expression’s result used as the value. Example: width: calc 100% - 80px
  • fit-content: the element will use the available space, but never more than max-content. Example: width: fit-content
  • portion <integer>: It specifies how much the item will grow relative to the rest of the items inside the same container.
  • percent <integer>: This gives % space
  • vh <integer>: Relative to 1% of the height of the viewport
  • vw <integer>: Relative to 1% of the width of the viewport
  • <integer>: Gives px unit space.