ftd
comes with some built-in types. These can be used to define properties of components or fields of record
and or-type
. These types can be categorized into two main groups: Primitive and Derived.
Primitive: The primitive types are the building blocks for creating more complex types. e.g. string
, boolean
, integer
etc
ftd.color
, ftd.image-src
etc. ftd.align-self
ftd.align
ftd.anchor
ftd.linear-gradient
ftd.linear-gradient-color
ftd.breakpoint-width-data
ftd.linear-gradient-directions
ftd.background-image
ftd.background-position
ftd.background-repeat
ftd.background-size
ftd.background
ftd.border-style
ftd.color
ftd.display
ftd.color-scheme
ftd.cursor
ftd.image-src
ftd.length
ftd.length-pair
ftd.loading
ftd.overflow
ftd.region
ftd.resize
ftd.resizing
ftd.responsive-type
ftd.shadow
ftd.spacing
ftd.text-align
ftd.text-input-type
ftd.text-style
ftd.text-transform
ftd.type
ftd.white-space
boolean
true
and false
.-- boolean is-monday: true
integer
-- integer number-of-days-in-a-week: 7
decimal
-- decimal pi: 3.14159
string
-- string message: hello world!
-- 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.
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 person: caption name: -- person amitu: Amit Upadhyay -- person shobhit: name: Shobhit Sharma
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.caption
areacaption
is alias for string
but if you want to pass types other than string
you can do the following:-- record marks: caption integer number:
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.
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 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"
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.body
areabody
is alias for string
but if you want to pass types other than string
you can do the following:-- record marks: body integer number:
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.
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 person: caption or body name: -- person amitu: Amit Upadhyay -- person shobhit: name: Shobhit Sharma -- person abrar: Abrar Khan
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
.caption or body
areacaption or body
is alias for string
but if you want to pass types other than string
you can do the following:-- record marks: caption or body integer number:
ftd.ui
ftd.ui
is a data type in the ftd language that represents a user interface component.-- ftd.ui list uis: -- ftd.text: Hello -- end: uis -- uis.0:
In this example, we create a list of UI components called uis
, which contains a single component of type ftd.text
with text property value as Hello
.
-- uis.0:
will display the first item in the uis
list,ftd.color-scheme
ftd.color-scheme
can be passed to ftd.document
, ftd.row
or ftd.column
components, and is inherited by children. Anywhere you can use $inherited.colors
variable of type ftd.color-scheme
to access colors.
ftd.color-scheme
-- record color-scheme: ftd.background-colors background: ftd.color border: ftd.color border-strong: ftd.color text: ftd.color text-strong: ftd.color shadow: ftd.color scrim: ftd.cta-colors cta-primary: ftd.cta-colors cta-secondary: ftd.cta-colors cta-tertiary: ftd.cta-colors cta-danger: ftd.pst accent: ftd.btb error: ftd.btb success: ftd.btb info: ftd.btb warning: ftd.custom-colors custom:
ftd.background-colors
-- record background-colors: ftd.color base: ftd.color step-1: ftd.color step-2: ftd.color overlay: ftd.color code:
ftd.cta-colors
-- record cta-colors: ftd.color base: ftd.color hover: ftd.color pressed: ftd.color disabled: ftd.color focused: ftd.color border: ftd.color text:
ftd.pst
-- record pst: ftd.color primary: ftd.color secondary: ftd.color tertiary:
ftd.btb
-- record btb: ftd.color base: ftd.color text: ftd.color border:
ftd.custom
-- record custom: ftd.color one: ftd.color two: ftd.color three: ftd.color four: ftd.color five: ftd.color six: ftd.color seven: ftd.color eight: ftd.color nine: ftd.color ten:
children
children
is a special type, it is an alias for ftd.ui list
, but can not be used when declaring a variable.
This type is used for record
, or-type
and component
arguments.
record
or or-type
field, or component
argument is defined as children
, it can be passed in “subsection” location in ftd::p1
“section”.;; First `foo` invocation -- foo: -- ftd.text: I love `ftd`! -- end: foo ;; Second `foo` invocation -- foo: -- foo.foo-uis: -- ftd.text: I love `ftd`! -- end: foo.foo-uis -- end: foo ;; Third `foo` invocation -- foo: foo-uis: $uis ;; `foo` declaration -- component foo: children foo-uis: -- ftd.column: background.solid: yellow children: $foo.foo-uis -- end: ftd.column -- end: foo
children
, it can come in the “subsection” location, eg in case of first foo
component invocation, or it can come as an explicit key, as in the second and third foo
component invocation.ftd.linear-gradient
ftd.linear-gradient
is a record. It accepts two values as fields: direction
of type ftd.linear-gradient-directions
and colors
as list of string
type.ftd.linear-gradient
-- record linear-gradient: ftd.linear-gradient-directions direction: bottom ftd.linear-gradient-color list colors:
direction
: This field defines the direction of gradient line. It takes value of type ftd.linear-gradient-directions
and is optional. By default, it takes bottom
.
colors
: This field takes a list of ftd.linear-gradient-color
which defines the colors used in the gradient. ftd.breakpoint-width-data
ftd.breakpoint-width-data
is a record. It accepts one value as caption which is mobile breakpoint width.ftd.breakpoint-width-data
-- record breakpoint-width-data: caption integer mobile:
mobile
: This field defines the mobile breakpoint width under which the device would be considered mobile otherwise desktop.ftd.linear-gradient-color
ftd.linear-gradient-color
is a record. It accepts several values as fields as mentioned below.ftd.linear-gradient-color
-- record linear-gradient-color: caption ftd.color color: optional ftd.length start: optional ftd.length end: optional ftd.length stop-position:
color
: This field takes the color value of type ftd.color
and is of caption type.
start
: This field defines start position of the color and takes value of type ftd.length
and is optional.
end
: This field defines the color end position and takes value of type ftd.length
and is optional.
stop-position
: This field defines the color stop position from where the gradient mid occurs and takes value of type ftd.length
and is optional. ftd.linear-gradient-directions
ftd.linear-gradient-directions
is an or-type. It can be angle, turn or any directional constant as shown below.ftd.linear-gradient-directions
-- or-type linear-gradient-directions: -- ftd.decimal angle: -- ftd.decimal turn: -- constant string left: left -- constant string right: right -- constant string top: top -- constant string bottom: bottom -- constant string top-left: top-left -- constant string top-right: top-right -- constant string bottom-left: bottom-left -- constant string bottom-right: bottom-right -- end: linear-gradient-directions
As shown above, the ftd.linear-gradient-directions
has following variants:
angle
: This value will set the gradient direction to the specified angle. It takes value of type ftd.decimal
.
turn
: This value sets the gradient direction by turning the gradient line to the value specified. It takes value of type ftd.decimal
.
left
: This value sets the gradient direction to left.
right
: This value sets the gradient direction to right.
top
: This value sets the gradient direction to top.
bottom
: This value sets the gradient direction to bottom.
top-left
: This value sets the gradient direction to top-left.
bottom-left
: This value sets the gradient direction to bottom-left.
top-right
: This value sets the gradient direction to top-right.
top-left
: This value sets the gradient direction to top-left. ftd.background
ftd.background
is an or-type
. It accepts either solid color of type ftd.color
or an image of type ftd.background-image
.ftd.background
-- or-type background: -- ftd.color solid: -- ftd.background-image image: -- ftd.linear-gradient linear-gradient: -- end: background
As shown above, the ftd.background
has following variants:
solid
: This value will set the specified solid color as the background. It takes value of type ftd.color
.
image
: This value will set the specified image as the background image It takes value of type ftd.background-image
.
linear-gradient
: This value will set the specified linear gradient as the background. It takes value of type ftd.linear-gradient
. ftd.background-image
ftd.background-image
record-- record background-image: caption ftd.image-src src: optional ftd.background-repeat repeat: optional ftd.background-position position: optional ftd.background-size size:
src
: This field of ftd.background-image
stores the source of image to be displayed in both light and dark modes.
repeat
: This field specifies whether the image needs to be repeated or not. It takes ftd.background-repeat
value and is optional. By default, the background image will be repeated in both directions.
size
: This field specifies the size of the background image which will be displayed. It takes ftd.background-size
value and is optional.
position
: This field specifies the position of the background image. It takes ftd.background-position
value and is optional. By default, the background image will be shown at the top-left position. ftd.background-repeat
ftd.background-repeat
property is used to specify how background images are repeated. It is an or-type
which is used with ftd.background-image
and is optional under it.ftd.background-repeat
-- or-type background-repeat: -- constant string repeat: repeat -- constant string repeat-x: repeat-x -- constant string repeat-y: repeat-y -- constant string no-repeat: no-repeat -- constant string space: space -- constant string round: round -- end: background-repeat
As shown above, the ftd.background-repeat
has following variants:
repeat
: This value will make the background image repeat as much as possible in both directions to cover the whole container area. The last image will be clipped if it doesn’t fit as per container dimensions.
repeat-x
: This value will show similar behaviour as repeat
except the fact that the images will be repeated only in x-direction (horizontal direction) and the last image will be clipped if it doesnt fit within the container area.
repeat-y
: This value will show similar behaviour as repeat
except the fact that the images will be repeated only in y-direction (vertical direction) and the last image will be clipped if it doesnt fit within the container area.
no-repeat
: This value will make the image not repeat itself in any direction and hence container area might not get entirely covered in case if the container area is larger than the image itself.
space
: This value will make the image repeat itself in both directions just like repeat
except the fact that the last images wont be clipped and whitespace will be evenly distributed between the images. The only case where clipping will happen when there is not enough space for a single image.
round
: This value will make the background image repeat itself and then are either squished or stretched to fill up the container space leaving no gaps. ftd.background-position
ftd.background-position
property is used to specify the positioning of the background image. It is an or-type
which is used with ftd.background-image
and is optional under it.ftd.background-position
-- or-type background-position: -- constant string left: left -- constant string center: center -- constant string bottom: bottom -- constant string left-top: left-top -- constant string left-center: left-center -- constant string left-bottom: left-bottom -- constant string center-top: center-top -- constant string center-center: center-center -- constant string center-bottom: center-bottom -- constant string right-top: right-top -- constant string right-center: right-center -- constant string right-bottom: right-bottom -- anonymous record length: -- ftd.length x: -- ftd.length y: -- end: length -- end: background-position
ftd.background-position
has following variants: left
- Positions the image to the left of the container.center
- Positions the image to the center of the container.right
- Positions the image to the right of the container.left-top
- Positions the image to the left in horizontal direction and top along the vertical direction of the container.left-center
- Positions the image to the left in horizontal direction and center along the vertical direction of the container.left-bottom
- Positions the image to the left in horizontal direction and bottom along the vertical direction of the container.center-top
- Positions the image to the center in horizontal direction and top along the vertical direction of the container.center-center
- Positions the image to the center in horizontal direction and center along the vertical direction of the container.center-bottom
- Positions the image to the center in horizontal direction and bottom along the vertical direction of the container.right-top
- Positions the image to the right in horizontal direction and top along the vertical direction of the container.right-center
- Positions the image to the right in horizontal direction and center along the vertical direction of the container.right-bottom
- Positions the image to the right in horizontal direction and bottom along the vertical direction of the container.length
- This anonymous record value will set the position value based on the specified x and y values.ftd.background-size
ftd.background-size
property is used to specify the dimensions of the background image. It is an or-type
which is used with ftd.background-image
and is optional under it.ftd.background-size
-- or-type background-size: -- constant string auto: auto -- constant string cover: cover -- constant string contain: contain -- anonymous record length: -- ftd.length x: -- ftd.length y: -- end: length -- end: background-size
As shown above, the ftd.background-size
has following variants:
auto
: This value will scale the background image in the corresponding directions while maintaining the intrinsic proportions of the specified image.
cover
: This value will scale the image to the smallest possible size to fill the container area leaving no empty space while preserving its ratio. Image will be cropped for either direction if the container dimensions differ from the image dimensions.
contain
: This value will scale the background image as large as possible within its container area without cropping or stretching the image.
length
: This anonymous record value will set the dimensions of the background image based on the specified x and y values. ftd.color
ftd.color
record (ftd.ftd)-- record color: caption light: string dark: $color.light
light
field of ftd.color
stores the color to be displayed in light mode, while the dark
field stores the color to be displayed in dark mode. If the dark
field is not provided, the light
field’s value is used as a default.-- ftd.color red-orange: light: red dark: orange
This would return red
color in light mode and orange
color in dark mode.
ftd.color
with only one field. For example:-- ftd.color just-red: light: red ;; or -- ftd.color just-red: red
red
color in both light mode and dark mode.ftd.color
in component propertyftd.color
type variable.-- ftd.color red-orange: light: red dark: orange -- ftd.text: Switch your color mode (light/dark) color: $red-orange
In this example, the ftd.text
component will display color of text specified in red-orange
variable, based on the current color mode.
The value of light
and dark
can be any string supported by CSS3 Color spec.
#RRGGBBAA
) from CSS Color Module Level 4.ftd.image-src
ftd.image-src
record (ftd.ftd)-- record image-src: caption light: string dark: $image-src.light
light
field of ftd.image-src
stores the image URL to be displayed in light mode, while the dark
field stores the image URL to be displayed in dark mode. If the dark
field is not provided, the light
field’s value is used as a default.-- ftd.image-src my-images: light: https://fastn.com/-/fastn.com/images/fastn.svg dark: https://fastn.com/-/fastn.com/images/fastn-dark.svg
In this example, the image URL https://fastn.com/-/fastn.com/images/fastn.svg
is returned in light mode, while https://fastn.com/-/fastn.com/images/fastn-dark.svg
is returned in dark mode.
ftd.image-src
with only one field. For example:-- ftd.image-src just-light: light: https://fastn.com/-/fastn.com/images/fastn.svg ;; or -- ftd.image-src just-light: https://fastn.com/-/fastn.com/images/fastn.svg
https://fastn.com/-/fastn.com/images/fastn.svg
is returned in both light and dark modes.The HTML standard doesn’t list what image formats to support, so user agents may support different formats.
To get the comprehensive information about image formats and their web browser support, check the Image file type and format guide.ftd.resizing
ftd.resizing
property is used to control the dimensions of an element. It is an or-type
. The ftd.resizing
property is commonly used for component properties such as width
, height
, min-width
, max-width
, min-height
and max-height
.ftd.resizing
-- or-type resizing: -- constant string fill-container: fill-container -- constant string hug-content: hug-content -- constant string auto: auto -- ftd.length fixed: -- end: resizing
As shown above, the ftd.resizing
has following variants:
fixed
: The fixed
variant of ftd.resizing
is used to give a fixed length to an element. For example, width.fixed.px: 100
sets the width of an element to be 100 pixels. This variant is useful when a specific size is required for an element, regardless of the size of its parent or contents.
hug-content
: The hug-content
variant of ftd.resizing
is used to dynamically resize the container element to be as small as possible while still surrounding its contents. This variant is useful when you want the size of the container element to match the size of its contents.
fill-container
: The fill-container
variant of ftd.resizing
is used to stretch the element to the width and/or height of its parent element. This variant is useful when you want an element to fill the entire space of its parent container.
auto
: The auto
variant of ftd.resizing
allows the browser to calculate and select a width for the specified element. This variant is useful when you want the element to size itself automatically based on its contents or other factors. ftd.resizing
ftd.resizing
-- ftd.text: Hello width: fill-container height: auto max-width.fixed.px: 300 min-width: hug-content
ftd.text
component has a width
stretches to the width of its parent container, a height
calculated and set by browser automatically based on its contents or other factors, max-width
sets to be 300 pixels and min-width
dynamically resizes to be as small as possible while still surrounding its contents.ftd.length
ftd.length
type is used for passing UI dimensions and is an or-type
, meaning it can take on different variants.ftd.length
-- or-type length: -- integer px: -- decimal percent: -- string calc: -- integer vh: -- integer vw: -- decimal em: -- decimal rem: -- ftd.responsive-length responsive: -- end: length -- record responsive-length: ftd.length desktop: ftd.length mobile: $responsive-length.desktop
As shown above, the ftd.length
has following variants:
px
: This variant gives an integer value followed by the px unit of space. For example, padding.px: 100
sets the padding to be 100 pixels.
percent
: This variant gives an integer value followed by the % unit of space. For example, width.fixed.percent: 50
sets the width to be 50% of the parent element’s width.
calc
: This variant takes a single expression as its parameter, and its result is used as the value. For example, padding.calc: 100% - 80px
sets the padding to be the result of the expression 100% - 80px
.
vh
: This variant sets the value relative to 1% of the height of the viewport. For example, height.fixed.vh: 50
sets the height to be 50% of the viewport’s height.
vw
: This variant sets the value relative to 1% of the width of the viewport. For example, width.fixed.vw: 25
sets the width to be 25% of the viewport’s width.
em
: This variant sets the value relative to the size of the parent element, in the case of typographical properties like font-size
, and the font size of the element itself, in the case of other properties like width.
rem
: This variant sets the value relative to the size of the root element.
Besides these, there is a special variant named responsive
.This variant is of record type named ftd.responsive-length
. It helps to give different length for different devices (mobile/desktop). It has two fields, desktop
and mobile
, which are ftd.length
types. The desktop
field specifies the value of the length on desktop devices, while the mobile
field specifies the value on mobile devices.
responsive
-- ftd.responsive-length p: desktop.px: 20 mobile.percent: 10 -- ftd.text: Hello padding.responsive: $p background.solid: $inherited.colors.background.step-1 color: $inherited.colors.text border-width.px: 1 border-color: $inherited.colors.border
The above code sets the padding to be 20 pixels on desktop devices and 10 percent on mobile devices.
Note that thecalc
variant can be used with any of the other variants to perform calculations on the values.ftd.length
ftd.length
-- ftd.text: Hello width.fixed.percent: 50 height.fixed.px: 300 margin.rem: 2 padding.calc: 100% - 80px
ftd.text
component has a width of 50% of its parent element’s width, a fixed height of 300 pixels, a margin of 2 times the font size of the root element, and a padding calculated using the expression 100% - 80px.ftd.length-pair
ftd.length-pair
is used to store two lengths, .x
and .y
, usually used for representing screen coordinates.-- record length-pair: ftd.length x: ftd.length y:
ftd.type
ftd.type
is a record
. It is not a direct type for any component property, but it has a derived type ftd.responsive-type
which is a type role
, a common property for component. It specifies the typography of the element.type
record (ftd.ftd)-- record type: optional ftd.font-size size: optional ftd.font-size line-height: optional ftd.font-size letter-spacing: optional integer weight: optional string font-family:
line-height
line-height
field sets the height of a line box. It’s commonly used to set the distance between lines of text.size
size
field sets the size of the font.weight
weight
property sets the weight (or boldness) of the font. The weights available depend on the font-family
that is currently set.font-family
font-family
property specifies a font family name and/or generic family name for the selected element.letter-spacing
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.type dtype: size.px: 40 weight: 700 font-family: cursive line-height.px: 65 letter-spacing.px: 5
ftd.responsive-type
ftd.responsive-type
is a record. It is a type for role
property, a common property for component. It specifies the responsive typography of an element using fields for desktop
and mobile
, which are of type ftd.type
.ftd.responsive-type
-- record responsive-type: caption ftd.type desktop: ftd.type mobile: $responsive-type.desktop
ftd.responsive-type
has following fields: desktop
: An optional ftd.type
field that specifies the typography of the element on desktop screens.mobile
: An optional ftd.type
field that specifies the typography of the element on mobile screens. If this field is not specified, the desktop
value will be used as the default for mobile screens.-- ftd.type desktop-type: size.px: 40 weight: 900 font-family: cursive line-height.px: 65 letter-spacing.px: 5 -- ftd.type mobile-type: size.px: 20 weight: 100 font-family: fantasy line-height.px: 35 letter-spacing.px: 3 -- ftd.responsive-type responsive-typography: desktop: $desktop-type mobile: $mobile-type -- ftd.text: Hello World role: $responsive-typography
In this example, we define two ftd.type
type variables, desktop-type
and mobile-type
, which specify the typography for desktop and mobile screens respectively. We then define an ftd.responsive-type
type variable responsive-typography
, which specifies the responsive typography for the element. Finally, we set the role
property of an ftd.text
component to responsive-typography
.
When the device is switched between desktop and mobile views, the font size, font weight, font family, line height, and letter spacing of the text changes based on the specified values for the current device.
Check the below output in different devices.ftd.align-self
ftd.align-self
is an or-type
. It is a type for align-self
property, a common property for component. It specifies the alignment of an element within its container in the block direction, i.e., the direction perpendicular to the main axis.ftd.align-self
-- or-type align-self: -- constant string start: start -- constant string center: center -- constant string end: end -- end: align-self
ftd.align-self
has following variants: start
: The element is positioned at the beginning of the containercenter
: The element is positioned at the center of the containerend
: The element is positioned at the end of the containerftd.align
ftd.align
is an or-type
. It is a type for the align-content
property, a property for container-type components. It specifies the alignment of items in the container component along both the horizontal and vertical axes.ftd.align
-- or-type align: -- constant string top-left: top-left -- constant string top-center: top-center -- constant string top-right: top-right -- constant string right: right -- constant string left: left -- constant string center: center -- constant string bottom-left: bottom-left -- constant string bottom-center: bottom-center -- constant string bottom-right: bottom-right -- end: align
ftd.align
has following variants: top-left
: Aligns items to the top-left corner of the container.top-center
: Aligns items to the top-center of the container.top-right
: Aligns items to the top-right corner of the container.right
: Aligns items to the right side of the container.left
: Aligns items to the left side of the container.center
: Centers items both horizontally and vertically within the container.bottom-left
: Aligns items to the bottom-left corner of the container.bottom-center
: Aligns items to the bottom-center of the container.bottom-right
: Aligns items to the bottom-right corner of the container.ftd.text-align
ftd.text-align
is an or-type
. It is a type for text-align
property, a common property for component. It specifies the horizontal alignment of text within an element.ftd.text-align
-- or-type text-align: -- constant string start: start -- constant string center: center -- constant string end: end -- constant string justify: justify -- end: text-align
ftd.text-align
has following variants: start
: aligns text to the left edge of the element, which is the default value.center
: centers text horizontally within the element.end
: aligns text to the right edge of the element.justify
: aligns text to both the left and right edges of the element, creating additional space between words as necessary to fill the available width.ftd.spacing
ftd.spacing
is an or-type
that is used for the spacing
property, a common property for container components. It determines the distribution of space between and around the container’s items when they don’t use all available space on the main-axis.ftd.spacing
-- or-type spacing: -- ftd.length fixed: -- constant string space-between: space-between -- constant string space-around: space-around -- constant string space-evenly: space-evenly -- end: spacing
As shown above, the ftd.spacing
has following variants:
fixed
: A fixed distance between each item, specified in a specific unit of measurement, as given by ftd.length
such as pixels, ems etc.
space-between
: The space between items is evenly distributed. The first item is at the start of the container and the last item is at the end of the container, with any remaining space distributed equally between the items.
space-around
: The space is distributed evenly around each item, with half the space on either side of the item. This means that the space between the first and last items and the container edges is half the space between the items.
space-evenly
: The space is distributed evenly between and around each item, including the space between the first and last items and the container edges. ftd.anchor
ftd.anchor
is an or-type
. It is a type for anchor
property, a common property for component. It specifies the positioning of the element relative to its parent, ancestor, or the window.ftd.anchor
-- or-type anchor: -- constant string parent: absolute -- constant string window: fixed -- string id: -- end: anchor
As shown above, the ftd.anchor
has following variants:
parent
: This specifies that the element is positioned relative to its parent container.window
: This specifies that the element is positioned relative to the browser window, and will not move even if the page is scrolled.id
: This specifies that the element is positioned relative to another ancestor element with the given id.anchor
property, component should also include an offset
properties, like top
or bottom
and left
or right
which specifies the offset of the element from the anchor element. If not given, it takes the default offset as top.px: 0
and left.px: 0
ftd.resize
ftd.resize
is an or-type
. It is a type for resize
property, a common property for component. It specifies whether an element is resizable and in which directions.ftd.resize
-- or-type resize: -- constant string both: both -- constant string horizontal: horizontal -- constant string vertical: vertical -- end: resize
ftd.resize
has following variants: both
: The element can be resized both horizontally and vertically.horizontal
: The element can only be resized horizontally.vertical
: The element can only be resized vertically.ftd.overflow
ftd.overflow
is an or-type
. It is a type for overflow
property, a common property for component. It specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.ftd.overflow
-- or-type overflow: -- constant string scroll: scroll -- constant string visible: visible -- constant string hidden: hidden -- constant string auto: auto -- end: overflow
ftd.overflow
has following variants: visible
- Default. The overflow is not clipped. The content renders outside the element’s boxhidden
- The overflow is clipped, and the rest of the content will be invisiblescroll
- The overflow is clipped, and a scrollbar is added to see the rest of the contentauto
- Similar to scroll, but it adds scrollbars only when necessaryftd.cursor
ftd.cursor
is an or-type
. It is a type for cursor
property, a common property for component. It specifies the mouse cursor to be displayed when pointing over an element.ftd.cursor
-- or-type cursor: -- constant string default: default -- constant string none: none -- constant string context-menu: context-menu -- constant string help: help -- constant string pointer: pointer -- constant string progress: progress -- constant string wait: wait -- constant string cell: cell -- constant string crosshair: crosshair -- constant string text: text -- constant string vertical-text: vertical-text -- constant string alias: alias -- constant string copy: copy -- constant string move: move -- constant string no-drop: no-drop -- constant string not-allowed: not-allowed -- constant string grab: grab -- constant string grabbing: grabbing -- constant string e-resize: e-resize -- constant string n-resize: n-resize -- constant string ne-resize: ne-resize -- constant string nw-resize: nw-resize -- constant string s-resize: s-resize -- constant string se-resize: se-resize -- constant string sw-resize: sw-resize -- constant string w-resize: w-resize -- constant string ew-resize: ew-resize -- constant string ns-resize: ns-resize -- constant string nesw-resize: nesw-resize -- constant string nwse-resize: nwse-resize -- constant string col-resize: col-resize -- constant string row-resize: row-resize -- constant string all-scroll: all-scroll -- constant string zoom-in: zoom-in -- constant string zoom-out: zoom-out -- end: cursor
ftd.cursor
has following variants: alias
: The cursor indicates an alias of something is to be createdall-scroll
:The cursor indicates that something can be scrolled in any directionauto
: Default. The browser sets a cursorcell
: The cursor indicates that a cell (or set of cells) may be selectedcol-resize
: The cursor indicates that the column can be resized horizontallycontext-menu
: The cursor indicates that a context-menu is availablecopy
: The cursor indicates something is to be copiedcrosshair
: The cursor render as a crosshairdefault
: The default cursore-resize
: The cursor indicates that an edge of a box is to be moved right (east)ew-resize
: Indicates a bidirectional resize cursorgrab
: The cursor indicates that something can be grabbedgrabbing
: The cursor indicates that something can be grabbedhelp
: The cursor indicates that help is availablemove
: The cursor indicates something is to be movedn-resize
: The cursor indicates that an edge of a box is to be moved up (north)ne-resize
: The cursor indicates that an edge of a box is to be moved up and right (north/east)nesw-resize
: Indicates a bidirectional resize cursorns-resize
: Indicates a bidirectional resize cursornw-resize
: The cursor indicates that an edge of a box is to be moved up and left (north/west)nwse-resize
: Indicates a bidirectional resize cursorno-drop
: The cursor indicates that the dragged item cannot be dropped herenone
: No cursor is rendered for the elementnot-allowed
: The cursor indicates that the requested action will not be executedpointer
: The cursor is a pointer and indicates a linkprogress
: The cursor indicates that the program is busy (in progress)row-resize
: The cursor indicates that the row can be resized verticallys-resize
: The cursor indicates that an edge of a box is to be moved down (south)se-resize
: The cursor indicates that an edge of a box is to be moved down and right (south/east)sw-resize
: The cursor indicates that an edge of a box is to be moved down and left (south/west)text
: The cursor indicates text that may be selectedvertical-text
: The cursor indicates vertical-text that may be selectedw-resize
: The cursor indicates that an edge of a box is to be moved left (west)wait
: The cursor indicates that the program is busyzoom-in
: The cursor indicates that something can be zoomed inzoom-out
: The cursor indicates that something can be zoomed outftd.display
ftd.display
is an or-type
. It is a type for display
property under text-attributes. It specifies the display behaviour of an element.ftd.display
-- or-type display: -- constant string block: block -- constant string inline: inline -- constant string inline-block: inline-block -- end: display
As shown above, the ftd.display
has following variants:
block
: This value creates a rectangular box that takes up the full width available within its parent container and creates a new line after it.
inline
: This value causes an element to flow with the text, allowing it to appear alongside other inline elements. It does not create a new line after it, and the width and height of the element are determined by its content.
inline-block
: This value combines the features of both block and inline displays. It creates a rectangular box that takes up only the necessary width required by its content, but also allows for other elements to appear on the same line. ftd.region
ftd.region
is an or-type
. It is a type for region
property, a property for text component. This property is used to specify the level of section headings in a document. It also generate slug and set it as the id for text component.ftd.region
-- or-type region: -- constant string h1: h1 -- constant string h2: h2 -- constant string h3: h3 -- constant string h4: h4 -- constant string h5: h5 -- constant string h6: h6 -- end: region
As shown above, the ftd.region
type includes six possible constant string values: h1
, h2
, h3
, h4
, h5
, and h6
. Each of these values represents a different level of section heading, with h1
being the highest level and h6
being the lowest.
ftd.region
variant, structured and semantically meaningful documents or webpages can be created. The generated slugs ensure that each section heading has an ID that can be used for linking or navigating within the document or webpage.ftd.white-space
ftd.white-space
is an or-type
. It is a type for white-space
property, a common property for component. It specifies how white-space inside an element is handled.ftd.white-space
-- or-type white-space: -- constant string normal: normal -- constant string nowrap: nowrap -- constant string pre: pre -- constant string pre-wrap: pre-wrap -- constant string pre-line: pre-line -- constant string break-spaces: break-spaces -- end: white-space
As shown above, the ftd.white-space
has following variants:
normal
: This value is the default behavior. Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
nowrap
: Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a line break or new line is encountered.
pre
: This value preserves whitespace characters. Text will only wrap on line breaks.
pre-line
: Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
pre-wrap
: This value preserves whitespace characters. Text will wrap when necessary, and on line breaks.
pre
or pre-wrap
can be useful when displaying code snippets or other text that requires precise formatting, while normal
or pre-line
may be more appropriate for regular paragraphs or text blocks.ftd.text-transform
ftd.text-transform
is an or-type
that represents the different values for the text-transform
property, which is a common property for components. This property specifies how to transform the capitalization of an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.ftd.text-transform
-- or-type text-transform: -- constant string none: none -- constant string capitalize: capitalize -- constant string uppercase: uppercase -- constant string lowercase: lowercase -- constant string initial: initial -- constant string inherit: inherit -- end: text-transform
ftd.text-transform
has following variants: none
: No capitalization. The text renders as it is. This is defaultcapitalize
: Transforms the first character of each word to uppercaseuppercase
: Transforms all characters to uppercaselowercase
: Transforms all characters to lowercaseinitial
: Sets this property to its default value.inherit
: Inherits this property from its parent element.ftd.border-style
ftd.border-style
is an or-type
that defines the style of an element’s four borders. It is a type for the border-style
property, which is a common property used to set the style of an component’s border.ftd.border-style