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-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-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.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
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
Have a question or need help?
Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.
Join our Discord channel and share your thoughts, suggestion, question etc.
Connect with our community!We welcome you to join our Discord community today.
We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.