fastn
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
ftd.type-data
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 fastn
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:
-- integer vmin:
-- integer vmax:
-- 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.
vmin: This variant sets the value relative to the smaller dimension between the width and height of the viewport. For example, width.fixed.vmin: 25 sets the width to be 25% of the smaller dimension.
vmax: This variant sets the value relative to the larger dimension between the width and height of the viewport. For example, width.fixed.vmax: 25 sets the width to be 25% of the larger dimension.
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.type-data
ftd.type-data
is a record
type used to define typography data. It allows
developers and designers to establish consistent and visually appealing
typography styles throughout an application or website.ftd.type-data
-- record type-data:
ftd.responsive-type heading-large:
ftd.responsive-type heading-medium:
ftd.responsive-type heading-small:
ftd.responsive-type heading-hero:
ftd.responsive-type heading-tiny:
ftd.responsive-type copy-small:
ftd.responsive-type copy-regular:
ftd.responsive-type copy-large:
ftd.responsive-type fine-print:
ftd.responsive-type blockquote:
ftd.responsive-type source-code:
ftd.responsive-type button-small:
ftd.responsive-type button-medium:
ftd.responsive-type button-large:
ftd.responsive-type link:
ftd.responsive-type label-large:
ftd.responsive-type label-small:
ftd.type-data
has following fields:heading-large
:Represents a type of typography for large headings. It is typically used to display prominent and visually impactful headings in a document or user interface.
Desktop
heading-medium
:Represents a type of typography for medium-sized headings.
Desktop
heading-small
:Represents a type of typography for small headings.
Desktop
heading-hero
:Represents a type of typography for tiny headings. It is typically used for very small and subtle headings or captions.
Desktop
heading-tiny
:Represents a type of typography for tiny headings. It is typically used for very small and subtle headings or captions.
Desktop
copy-small
:Represents a type of typography for small-sized body copy or text blocks. It is typically used for displaying concise paragraphs, descriptions, or other textual content.
Desktop
copy-regular
:Represents a type of typography for regular-sized body copy or text blocks. It is typically used for displaying standard paragraphs, descriptions, or other textual content.
Desktop
copy-large
:Represents a type of typography for large-sized body copy or text blocks. It is typically used for displaying important or emphasized paragraphs, descriptions, or other textual content.
Desktop
fine-print
:Represents a type of typography for fine print or small-sized text. It is typically used for displaying legal disclaimers, copyright information, or other supplementary text that requires smaller font size and reduced emphasis.
Desktop
blockquote
:Represents a type of typography for blockquote text, which is a quoted section of text often used to highlight and emphasize external content or significant statements.
Desktop
source-code
:Represents a type of typography for displaying source code or programming code snippets. It is typically used to present code examples, syntax highlighting, and improve code readability.
Desktop
button-small
:Represents a type of typography for small-sized buttons. It is typically used for displaying buttons with compact dimensions, such as in navigation bars, form elements, or areas with limited space.
Desktop
button-medium
:Represents a type of typography for medium-sized buttons. It is typically used for displaying buttons with a balanced size, suitable for various interactive elements and user interface components.
Desktop
button-large
:Represents a type of typography for large-sized buttons. It is typically used for displaying buttons with a prominent and impactful design, suitable for important calls to action or primary interaction points.
Desktop
button-large
:Represents a type of typography for large-sized buttons. It is typically used for displaying buttons with a prominent and impactful design, suitable for important calls to action or primary interaction points.
Desktop
link
:Represents a type of typography for hyperlinks or clickable text. It is typically used for styling text that serves as a link to other web pages or resources.
Desktop
label-large
:Represents a type of typography for large-sized labels. It is typically used for displaying labels or tags that require a larger size and visual prominence.
Desktop
label-small
:Represents a type of typography for small-sized labels. It is typically used for displaying compact labels or tags that require a smaller size and subtle presentation.
Desktop
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
-- or-type border-style:
-- constant string dotted: dotted
-- constant string dashed: dashed
-- constant string solid: solid
-- constant string double: double
-- constant string groove: groove
-- constant string ridge: ridge
-- constant string inset: inset
-- constant string outset: outset
-- end: border-style
As shown above, the ftd.border-style
has following variants:
dotted
: Specifies a dotted border. The border is a series of dots.
dashed
: Specifies a dashed border. The border is made up of a series of dashes.
solid
: Specifies a solid border. This is the default value.
double
: Specifies a double border. The border is a double line, consisting
of two parallel lines.
groove
: Specifies a 3D grooved border. The effect depends on the
border-color value. The border looks like it is carved into the page, with a
3D effect.
ridge
: Specifies a 3D ridged border. The effect depends on the border-color
value. The border looks like it is popping out of the page, with a 3D effect.
inset
: Specifies a 3D inset border. The effect depends on the border-color
value. The border looks like it is embedded in the page, with a 3D effect.
outset
: Specifies a 3D outset border. The effect depends on the border-color
value. The border looks like it is coming out of the page, with a 3D effect.
ftd.loading
ftd.loading
is an or-type. This is the type for loading
property of
ftd.iframe
component. It is a strategy to identify whether resources are
blocking and load these immediately or non-blocking (non-critical) and load
these only when needed.ftd.loading
-- or-type loading:
-- constant string lazy: lazy
-- constant string eager: eager
-- end: loading
lazy
and eager
.
eager
: Loads an element immediatelylazy
: Defer loading of element until some conditions are metftd.text-input-type
ftd.text-input-type
is an or-type
. The 'type' property of ftd.text-input
component accepts the optional
of this type. It has various variant which
defines information field type.ftd.text-input-type
-- or-type text-input-type:
-- constant string text: text
-- constant string email: email
-- constant string password: password
-- constant string url: url
-- end: text-input-type
As you can see above the ftd.text-input-type
has following variants:
text: The default value. A single-line text field. Line-breaks are automatically removed from the input value.
email: A field for editing an email address. Looks like a text
input,
but has validation parameters and relevant keyboard in supporting browsers and
devices with dynamic keyboards.
password: A single-line text field whose value is obscured. Will alert user if site is not secure.
text
input, but has
validation parameters and relevant keyboard in supporting browsers and devices
with dynamic keyboards.
ftd.text-style
ftd.text-style
is an or-type
. The style
under text attributes
accepts the optional list
of this type. It allows various constant values which
defines the specific inline style.ftd.text-style
-- or-type text-style:
-- constant string underline: underline
-- constant string strike: strike
-- constant string italic: italic
-- constant string heavy: heavy
-- constant string extra-bold: extra-bold
-- constant string semi-bold: semi-bold
-- constant string bold: bold
-- constant string regular: regular
-- constant string medium: medium
-- constant string light: light
-- constant string extra-light: extra-light
-- constant string hairline: hairline
-- end: text-style
As you can see above the ftd.text-style
has following variants:
Text Decoration
underline
: This value will set the text to have a decorative line beneath it.strike
: This value will set the text to have a decorative line going through its middle.Font Style
italic
: This value will make your text italic.heavy
: This value will set the font weight to 900.extra-bold
: This value will set the font weight to 800.bold
: This value will set the font weight to 700.semi-bold
: This value will set the font weight to 600.medium
: This value will set the font weight to 500.regular
: This value will set the font weight to 400.light
: This value will set the font weight to 300.extra-light
: This value will set the font weight to 200.hairline
: This value will set the font weight to 100.ftd.shadow
ftd.shadow
record-- record shadow:
ftd.color color:
ftd.length x-offset: 0
ftd.length y-offset: 0
ftd.length blur: 0
ftd.length spread: 0
boolean inset: false
color
: This field of ftd.shadow
stores the color of the shadow to be displayed in
both light and dark modes.
x-offset
: It is one of the shadow property. It is length value to set the shadow offset.
shadow-offset-x
specifies the horizontal distance. Negative values place the
shadow to the left of the element. By default, this will be set to 0px if not specified.
y-offset
: It is one of the shadow property. It is length value to set the shadow offset.
shadow-offset-y
specifies the vertical distance. Negative values place the
shadow above the element. By default, this will be set to 0px if not specified.
blur
: It adds blur in shadow. The larger the value of shadow-blur
, the bigger
the blur, so the shadow becomes bigger and lighter. Negative values are
not allowed. By default, this will be set to 0px if not specified.
spread
: It specifies the size of shadow. Positive values will cause the shadow to
expand and grow bigger, negative values will cause the shadow to shrink. By default, this will
be set to 0px if not specified.
inset
: This field will make the shadow inset (if provided true). By default, outset
shadow will be used if this value is not specified or is given false.