fastn kernel
components.id: optional string
id
attribute is used to specify a unique id for an element. It slugifies
the value provided. The element can be directly accessed by appending a
hash character (#) followed by an slugified id name in current module url.
It takes input of string
type
and is optional.id
-- ftd.text: FifthTry
id: fifthtry
color: $inherited.colors.text
ftd.text
element that points to the id name
fifthtry
. This element can be accessed with #fifthtry
appended after the
current document url: http://fastn.com/ftd/common/#fifthtrypadding: optional ftd.length
padding
attribute is used to create space around an element's content,
inside of any defined borders. It accepts the
ftd.length
type value and is optional.padding
-- ftd.text: FifthTry
padding.px: 60
color: $inherited.colors.text
border-width.px: 2
padding-vertical: optional ftd.length
ftd.length
type
and is optional.padding-vertical
-- ftd.text: FifthTry
padding-vertical.px: 60
color: $inherited.colors.text
border-width.px: 2
padding-horizontal: optional ftd.length
ftd.length
type
and is optional.padding-horizontal
-- ftd.text: FifthTry
padding-horizontal.px: 60
color: $inherited.colors.text
border-width.px: 2
padding-left: optional ftd.length
ftd.length
type
and is optional.padding-left
-- ftd.text: FifthTry
padding-left.px: 60
color: $inherited.colors.text
border-width.px: 2
padding-right: optional ftd.length
ftd.length
type
and is optional.padding-right
-- ftd.text: FifthTry
padding-right.px: 60
color: $inherited.colors.text
border-width.px: 2
padding-top: optional ftd.length
ftd.length
type
and is optional.padding-top
-- ftd.text: FifthTry
padding-top.px: 60
color: $inherited.colors.text
border-width.px: 2
padding-bottom: optional ftd.length
ftd.length
type
and is optional.padding-bottom
-- ftd.text: FifthTry
padding-bottom.px: 60
color: $inherited.colors.text
border-width.px: 2
margin: optional ftd.length
margin
attribute is used to create space around an element's content,
outside of any defined borders. It accepts the
ftd.length
type value and is optional.margin
-- ftd.text: FifthTry
margin.px: 60
color: $inherited.colors.text
border-width.px: 2
margin-vertical: optional ftd.length
ftd.length
type
and is optional.margin-vertical
-- ftd.text: FifthTry
margin-vertical.px: 60
color: $inherited.colors.text
border-width.px: 2
margin-horizontal: optional ftd.length
ftd.length
type
and is optional.margin-horizontal
-- ftd.text: FifthTry
margin-horizontal.px: 60
color: $inherited.colors.text
border-width.px: 2
margin-left: optional ftd.length
ftd.length
type
and is optional.margin-left
-- ftd.text: FifthTry
margin-left.px: 60
color: $inherited.colors.text
border-width.px: 2
margin-right: optional ftd.length
ftd.length
type
and is optional.margin-right
-- ftd.text: FifthTry
margin-right.px: 60
color: $inherited.colors.text
border-width.px: 2
margin-top: optional ftd.length
ftd.length
type
and is optional.margin-top
-- ftd.text: FifthTry
margin-top.px: 60
color: $inherited.colors.text
border-width.px: 2
margin-bottom: optional ftd.length
ftd.length
type
and is optional.margin-bottom
-- ftd.text: FifthTry
margin-bottom.px: 60
color: $inherited.colors.text
border-width.px: 2
align-self: optional ftd.align-self
ftd.align-self
type
and is optional.align-self
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.column:
width.fixed.px: 200
-- ftd.text: Start
color: $red-yellow
align-self: start
-- ftd.text: Center
color: $red-yellow
align-self: center
-- ftd.text: End
color: $red-yellow
align-self: end
-- end: ftd.column
color: optional ftd.color
ftd.color
type
and is optional.color
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
color: $red-yellow
width: optional ftd.resizing, default=auto
ftd.resizing
and is optional. Default value is set to auto
if not provided.width
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.column:
width.fixed.px: 100
border-color: $red-yellow
border-width.px: 2
-- ftd.text: Width of this container is 100px
color: $inherited.colors.text
padding.px: 10
-- end: ftd.column
min-width: optional ftd.resizing
ftd.resizing
and is optional.min-width
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.column:
min-width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2
-- ftd.text: Min Width of this container is 400px
color: $inherited.colors.text
padding.px: 10
-- end: ftd.column
max-width: optional ftd.resizing
ftd.resizing
and is optional.max-width
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.column:
max-width.fixed.px: 300
border-color: $red-yellow
border-width.px: 2
-- ftd.text:
color: $inherited.colors.text
padding.px: 10
Max Width of this container is 300px.
If you add more text than it can accommodate, then it will overflow.
-- end: ftd.column
height: optional ftd.resizing, default=auto
ftd.resizing
and is optional. Default value is set to auto
if not provided.height
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.column:
height.fixed.px: 100
border-color: $red-yellow
border-width.px: 2
-- ftd.text: Height of this container is 100px
color: $inherited.colors.text
padding.px: 10
-- end: ftd.column
min-height: optional ftd.resizing
ftd.resizing
and is optional.min-height
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.column:
min-height.fixed.px: 100
border-color: $red-yellow
border-width.px: 2
spacing.fixed.px: 10
-- ftd.text: Min Height of this container is 100px
color: $inherited.colors.text
padding.px: 10
-- ftd.text:
color: $inherited.colors.text
padding.px: 10
If more text are added inside this container, the text might overflow
if it can't be accommodated.
-- end: ftd.column
max-height: optional ftd.resizing
ftd.resizing
and is optional.max-height
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.column:
max-height.fixed.px: 50
max-width.fixed.px: 300
border-color: $red-yellow
border-width.px: 2
-- ftd.text:
color: $inherited.colors.text
padding.px: 10
Max Height of this container is 50px.
If you add more text than it can accommodate, then it will overflow.
-- end: ftd.column
background: optional ftd.background
ftd.background
which is an or-type.background.solid: ftd.color
ftd.color
type.-- ftd.color yellow-red:
light: yellow
dark: red
-- ftd.text: FifthTry
background.solid: $yellow-red
color: $inherited.colors.text-strong
background.image: ftd.background-image
background.image
property sets the background image of an element. It takes
input of ftd.background-image
type and is optional.-- ftd.background-image bg-image:
src: $fastn-assets.files.images.logo-fifthtry.svg
repeat: no-repeat
position: center
-- ftd.row:
width: fill-container
height.fixed.px: 200
background.image: $bg-image
-- ftd.text: Fifthtry logo as background image
-- end: ftd.row
background.linear-gradient: ftd.linear-gradient
background.linear-gradient
property sets a linear gradient to the
background of an element. It takes input of
ftd.linear-gradient
type and is optional.-- integer $gradient-counter: 0
-- ftd.linear-gradient lg:
direction: bottom-left
colors: $color-values
-- ftd.linear-gradient lg-2:
direction: top-right
colors: $color-values-2
-- ftd.linear-gradient lg-3:
direction: right
colors: $rainbow-values
-- ftd.linear-gradient-color list rainbow-values:
-- ftd.linear-gradient-color: violet
end.percent: 14.28
-- ftd.linear-gradient-color: indigo
start.percent: 14.28
end.percent: 28.57
-- ftd.linear-gradient-color: blue
start.percent: 28.57
end.percent: 42.85
-- ftd.linear-gradient-color: green
start.percent: 42.85
end.percent: 57.14
-- ftd.linear-gradient-color: yellow
start.percent: 57.14
end.percent: 71.42
-- ftd.linear-gradient-color: orange
start.percent: 71.42
end.percent: 85.71
-- ftd.linear-gradient-color: red
start.percent: 85.71
-- end: rainbow-values
-- ftd.linear-gradient-color list color-values:
-- ftd.linear-gradient-color: red
stop-position.percent: 20
-- ftd.linear-gradient-color: yellow
-- end: color-values
-- ftd.linear-gradient-color list color-values-2:
-- ftd.linear-gradient-color: blue
-- ftd.linear-gradient-color: green
-- end: color-values-2
-- ftd.row:
width: fill-container
height.fixed.px: 200
background.linear-gradient: $lg
background.linear-gradient if { gradient-counter % 3 == 1 }: $lg-2
background.linear-gradient if { gradient-counter % 3 == 2 }: $lg-3
$on-click$: $ftd.increment($a = $gradient-counter)
align-content: center
-- ftd.text: This is linear gradient (click to change)
color: $inherited.colors.text-strong
-- end: ftd.row
border-width: optional ftd.length
ftd.length
and is optional.border-width
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-left-width: optional ftd.length
ftd.length
and is optional.border-left-width
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-left-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-right-width: optional ftd.length
ftd.length
and is optional.border-right-width
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-right-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-top-width: optional ftd.length
ftd.length
and is optional.border-top-width
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-top-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-bottom-width: optional ftd.length
ftd.length
and is optional.border-bottom-width
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-bottom-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-radius: optional ftd.length
ftd.length
and is optional.border-radius
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-color: $red-yellow
border-radius.px: 5
border-top-left-radius: optional ftd.length
ftd.length
and is
optional.border-top-left-radius
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-top-left-radius.px: 8
border-top-right-radius: optional ftd.length
ftd.length
and is
optional.border-top-right-radius
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-top-right-radius.px: 8
border-bottom-left-radius: optional ftd.length
ftd.length
and is
optional.border-bottom-left-radius
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-bottom-left-radius.px: 8
border-bottom-right-radius: optional ftd.length
ftd.length
and is
optional.border-bottom-right-radius
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 3
color: $inherited.colors.text
border-color: $red-yellow
border-bottom-right-radius.px: 8
border-color: optional ftd.color
ftd.color
type.border-color
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-color: $red-yellow
border-left-color: optional ftd.color
ftd.color
type.border-left-color
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-left-color: $red-yellow
border-right-color: optional ftd.color
ftd.color
type.border-right-color
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-right-color: $red-yellow
border-top-color: optional ftd.color
ftd.color
type.border-top-color
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-top-color: $red-yellow
border-bottom-color: optional ftd.color
ftd.color
type.border-bottom-color
-- ftd.color red-yellow:
light: red
dark: yellow
-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-bottom-color: $red-yellow
border-style: optional ftd.border-style, default=solid
ftd.border-style
value and is optional. By default, border-style
is set to solid
if
this value is not provided.border-style
-- ftd.text: FifthTry
border-style: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text
border-style-left: optional ftd.border-style
ftd.border-style
value and is optional.border-style-left
-- ftd.text: FifthTry
border-style-left: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text
border-style-right: optional ftd.border-style
ftd.border-style
value and is optional.border-style-right
-- ftd.text: FifthTry
border-style-right: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text
border-style-top: optional ftd.border-style
ftd.border-style
value and is optional.border-style-top
-- ftd.text: FifthTry
border-style-top: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text
border-style-bottom: optional ftd.border-style
ftd.border-style
value and is optional.border-style-bottom
-- ftd.text: FifthTry
border-style-bottom: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text
border-style-horizontal: optional ftd.border-style
ftd.border-style
value and is optional.border-style-horizontal
-- ftd.text: FifthTry
border-style-horizontal: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text
border-style-vertical: optional ftd.border-style
ftd.border-style
value and is optional.border-style-vertical
-- ftd.text: FifthTry
border-style-vertical: dashed
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text
overflow: optional ftd.overflow
ftd.overflow
and is optional.overflow
-- ftd.row:
width: fill-container
spacing: space-evenly
color: $inherited.colors.text
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow: visible
border-color: $red-yellow
border-width.px: 2
overflow = Visible
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow: scroll
border-color: $red-yellow
border-width.px: 2
overflow = Scroll
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow: auto
border-color: $red-yellow
border-width.px: 2
overflow = Auto
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow: hidden
border-color: $red-yellow
border-width.px: 2
overflow = Hidden
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- end: ftd.row
overflow = Visible
Thequickbrownfoxjumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.overflow = Scroll
Thequickbrownfoxjumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.overflow = Auto
Thequickbrownfoxjumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.overflow = Hidden
Thequickbrownfoxjumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.overflow-x: optional ftd.overflow
ftd.overflow
and is optional.overflow-x
-- ftd.row:
width: fill-container
spacing: space-evenly
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-x: visible
border-color: $red-yellow
border-width.px: 2
overflow-x = Visible
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- ftd.text:
width.fixed.px: 120
height.fixed.px: 100
overflow-x: scroll
border-color: $red-yellow
border-width.px: 2
overflow-x = Scroll
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-x: auto
border-color: $red-yellow
border-width.px: 2
overflow-x = Auto
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- ftd.text:
color: $inherited.colors.text
width.fixed.px: 150
height.fixed.px: 100
overflow-x: hidden
border-color: $red-yellow
border-width.px: 2
overflow-x = Hidden
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- end: ftd.row
overflow-x = Visible
The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625.overflow-x = Scroll
The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625.overflow-x = Auto
The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625.overflow-x = Hidden
The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625.overflow-y: optional ftd.overflow
ftd.overflow
and is optional.overflow-y
-- ftd.row:
width: fill-container
spacing: space-evenly
color: $inherited.colors.text
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-y: visible
border-color: $red-yellow
border-width.px: 2
overflow-y = Visible
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-y: scroll
border-color: $red-yellow
border-width.px: 2
overflow-y = Scroll
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-y: auto
border-color: $red-yellow
border-width.px: 2
overflow-y = Auto
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- ftd.text:
width.fixed.px: 150
height.fixed.px: 100
overflow-y: hidden
border-color: $red-yellow
border-width.px: 2
overflow-y = Hidden
The quick, brown fox jumps over a lazy dog.
DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
-- end: ftd.row
overflow-y = Visible
The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.overflow-y = Scroll
The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.overflow-y = Auto
The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.overflow-y = Hidden
The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.cursor: optional ftd.cursor
ftd.cursor
and is optional.cursor
-- ftd.column:
width: fill-container
padding.px: 10
spacing.fixed.px: 10
-- ftd.text: This text will show pointer cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: pointer
border-width.px: 2
border-color: $red-yellow
-- ftd.text: This text will show progress cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: progress
border-width.px: 2
border-color: $red-yellow
-- ftd.text: This text will show zoom-in cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: zoom-in
border-width.px: 2
border-color: $red-yellow
-- ftd.text: This text will show help cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: help
border-width.px: 2
border-color: $red-yellow
-- ftd.text: This text will show cross-hair cursor on hover
color: $inherited.colors.text
padding.px: 10
cursor: crosshair
border-width.px: 2
border-color: $red-yellow
-- end: ftd.column
region: optional ftd.region
ARIA Region
role that the UI element will be playing. It takes value of type
ftd.region
and is optional.region
-- ftd.text: Hello World
region: h1
color: $inherited.colors.text
link: optional String
link
-- ftd.text: fifthtry
link: https://www.fifthtry.com
color: $inherited.colors.text
open-in-new-tab: optional boolean, default=False
link
is provided, this attribute can also be set to open the link in new
tab instead of current tab. By default, this attribute is set to false
.open-in-new-tab
along with link
-- ftd.text: fifthtry (opens in new tab)
link: https://www.fifthtry.com
open-in-new-tab: true
color: $inherited.colors.text
role: optional ftd.responsive-type
ftd.responsive-type
and
is optional.role
-- ftd.column:
color: $inherited.colors.text
width: fill-container
spacing.fixed.px: 10
-- ftd.text: Heading Hero
role: $inherited.types.heading-hero
-- ftd.text: Heading Large
role: $inherited.types.heading-large
-- ftd.text: Copy Regular
role: $inherited.types.copy-regular
-- end: ftd.column
resize: optional ftd.resize
ftd.resize
and is optionalresize
-- ftd.row:
resize: both
border-color: $red-yellow
border-width.px: 1
margin.px: 10
-- ftd.text: This row is resizable both directions
color: $inherited.colors.text
-- end: ftd.row
-- ftd.row:
resize: horizontal
border-color: $red-yellow
border-width.px: 1
margin.px: 10
-- ftd.text: This row is resizable only horizontally
color: $inherited.colors.text
-- end: ftd.row
-- ftd.row:
resize: vertical
border-color: $red-yellow
border-width.px: 1
margin.px: 10
-- ftd.text: This row is resizable only vertically
color: $inherited.colors.text
-- end: ftd.row
sticky: optional boolean
sticky
-- ftd.column:
padding.px: 10
color: $inherited.colors.text
spacing.fixed.px: 50
height.fixed.px: 200
width.fixed.px: 300
overflow-y: scroll
border-color: $red-yellow
border-width.px: 2
-- ftd.text: The blue planet below is sticky
-- ftd.text: Blue planet
color: black
background.solid: deepskyblue
sticky: true
width.fixed.px: 120
text-align: center
left.px: 50
top.px: 0
-- ftd.text:
padding.px: 10
Far out in the uncharted backwaters of the unfashionable end of the western
spiral arm of the Galaxy lies a small unregarded blue planet.
Orbiting this at a distance of roughly ninety-two million miles is an
utterly insignificant little planet whose ape-descended life
forms are so amazingly primitive that they still think `fastn` code written
by humans are still a pretty neat idea of escalating knowledge throughout the
universe.
-- end: ftd.column
fastn
code written
by humans are still a pretty neat idea of escalating knowledge throughout the
universe.shadow: optional ftd.shadow
ftd.shadow
value
which is of record type and is optional.shadow
-- ftd.color yellow-red:
light: yellow
dark: red
-- ftd.shadow s:
color: $yellow-red
x-offset.px: 10
y-offset.px: 10
blur.px: 1
-- ftd.text: FifthTry
shadow: $s
margin.px: 10
mask: optional ftd.mask
ftd.mask
value
which is of or-type
type and is optional.mask
-- ftd.container:
background.solid: red
mask.image: https://mdn.github.io/css-examples/masking/star.svg
width.fixed.px: 300
height.fixed.px: 300
anchor: optional ftd.anchor
ftd.anchor
and is optional.anchor
-- ftd.column:
margin.px: 10
padding.px: 20
border-color: $red-yellow
border-width.px: 2
width.fixed.px: 600
-- ftd.column:
id: c1
padding.px: 20
border-color: green
border-width.px: 2
width.fixed.px: 400
-- ftd.text: Inside Inner Container
color: $inherited.colors.text-strong
anchor.id: c1
top.px: 0
left.px: 0
-- end: ftd.column
-- end: ftd.column
-- ftd.column:
id: c2
margin.px: 10
padding.px: 20
border-color: $red-yellow
border-width.px: 2
width.fixed.px: 600
-- ftd.column:
padding.px: 20
border-color: blue
border-width.px: 2
width.fixed.px: 400
-- ftd.text: Inside Outer Container
color: $inherited.colors.text-strong
anchor.id: c2
top.px: 0
left.px: 0
-- end: ftd.column
-- end: ftd.column
opacity: optional decimal
opacity
-- integer $counter: 0
-- string sample-text:
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated they
in Bookmarksgrove right at the coast of the Semantics, a large language
ocean. A small river named Duden flows by their place and supplies it
with the necessary regelialia. It is a paradisematic country, in which
roasted parts of sentences fly into your mouth. Even the all-powerful
Pointing has no control about the blind texts it is an almost unorthographic
life One day however a small line of blind text by the name of Lorem
Ipsum decided to leave for the far World of Grammar.
-- ftd.column:
width: fill-container
background.solid: #963770
opacity: 1.0
opacity if { counter % 4 == 1 }: 0.7
opacity if { counter % 4 == 2 }: 0.5
opacity if { counter % 4 == 3 }: 0.2
-- ftd.text: $sample-text
color: white
padding.px: 10
-- end: ftd.column
-- ftd.text: Change opacity
color: $inherited.colors.text
$on-click$: $ftd.increment($a = $counter)
margin-vertical.px: 10
border-width.px: 1
align-self: center
text-align: center
whitespace: optional ftd.whitespace
ftd.white-space
and is optional.whitespace
-- string sample-text:
But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?'
She smiled, and smiled, and passed it off Ere from the door she stept—
-- end: sample-text
-- ftd.column:
spacing.fixed.px: 10
color: $inherited.colors.text
-- ftd.text: $sample-text
white-space: normal
padding.px: 10
width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2
-- ftd.text: $sample-text
white-space: nowrap
padding.px: 10
width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2
-- ftd.text: $sample-text
white-space: pre
padding.px: 10
width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2
-- ftd.text: $sample-text
white-space: break-spaces
padding.px: 10
width.fixed.px: 400
border-color: $red-yellow
border-width.px: 2
-- end: ftd.column
But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—text-transform: optional ftd.text-transform
ftd.text-transform
and is optional.-- string sample-text:
But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?'
She smiled, and smiled, and passed it off Ere from the door she stept—
-- end: sample-text
-- ftd.column:
spacing.fixed.px: 10
color: $inherited.colors.text
-- ftd.text: $sample-text
padding.px: 10
width.fixed.px: 400
text-transform: none
border-color: $red-yellow
border-width.px: 2
-- ftd.text: $sample-text
padding.px: 10
width.fixed.px: 400
text-transform: capitalize
border-color: $red-yellow
border-width.px: 2
-- ftd.text: $sample-text
padding.px: 10
width.fixed.px: 400
text-transform: uppercase
border-color: $red-yellow
border-width.px: 2
-- ftd.text: $sample-text
padding.px: 10
width.fixed.px: 400
text-transform: lowercase
border-color: $red-yellow
border-width.px: 2
-- end: ftd.column
But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—But ere she from the church-door stepped She smiled and told us why:
'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept—classes: string list
classes
-- ftd.text:
color: $inherited.colors.text
classes: markdown, text
# This text has class `markdown` and `text`
markdown
and text
top: optional ftd.length
ftd.length
and is optional.top
-- ftd.column:
width.fixed.px: 400
height.fixed.px: 100
border-color: $red-yellow
border-width.px: 2
-- ftd.text: Move down from top edge by 20px
top.px: 20
anchor: parent
padding-horizontal.px: 10
color: $inherited.colors.text
-- end: ftd.column
bottom: optional ftd.length
ftd.length
and is optional.bottom
-- ftd.column:
width.fixed.px: 400
height.fixed.px: 100
border-color: $red-yellow
border-width.px: 2
-- ftd.text: Move up from bottom edge by 20px
bottom.px: 20
anchor: parent
padding-horizontal.px: 10
color: $inherited.colors.text
-- end: ftd.column
left: optional ftd.length
ftd.length
and is optional.left
-- ftd.column:
width.fixed.px: 400
height.fixed.px: 50
border-color: $red-yellow
border-width.px: 2
-- ftd.text: Move right from left edge by 50px
left.px: 50
anchor: parent
padding-vertical.px: 10
color: $inherited.colors.text
-- end: ftd.column
right: optional ftd.length
ftd.length
and is optional.right
-- ftd.column:
width.fixed.px: 400
height.fixed.px: 50
border-color: $red-yellow
border-width.px: 2
-- ftd.text: Move left from right edge by 50px
right.px: 50
anchor: parent
padding-vertical.px: 10
color: $inherited.colors.text
-- end: ftd.column
css: string list
fastn
components. This takes value as a list of strings
which will be the names of all css files you want to include in your fastn
document.css
;; Assuming you have defined some css for
;; elements having class `custom-text`, `custom-shadow`
;; inside `text.css` and `shadow.css` respectively
-- ftd.text:
css: text.css, shadow.css
classes: custom-text, custom-shadow
js: string list
fastn
document. This takes value as a list of string
which will be the names of all js files which needs to be included.js
;; Assuming you have js files named `str.js`, `math.js`
;; which contains functions `len(s)`, double(i)
;; len(s) = which returns the length of the string
;; double(i) = which doubles the value
-- string s1: Hello
-- integer foo(s):
string s:
js: str.js, math.js
double(len(s))
-- ftd.integer: $foo(s = $s1)
z-index: optional integer
integer
and is optional.z-index
-- ftd.color red-blue:
light: red
dark: blue
-- ftd.row:
width: fill-container
height.fixed.px: 180
color: black
-- ftd.text: z-index = 3
left.px: 50
top.px: 20
padding.px: 20
width.fixed.px: 200
text-align: center
border-color: $red-blue
border-width.px: 2
background.solid: deepskyblue
z-index: 3
anchor: parent
-- ftd.text: z-index = 2
left.px: 70
top.px: 60
padding.px: 20
text-align: center
width.fixed.px: 200
border-color: $red-blue
border-width.px: 2
background.solid: deepskyblue
z-index: 2
anchor: parent
-- ftd.text: z-index = 1
left.px: 90
top.px: 100
padding.px: 20
text-align: center
width.fixed.px: 200
border-color: $red-blue
border-width.px: 2
background.solid: deepskyblue
z-index: 1
anchor: parent
-- end: ftd.row