Learn full-stack web development using fastn in a week

Frontend

Common Attributes

Common Kernel Attributes

These attributes are available to all fastn kernel components.

`id: optional string`

The 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.

Sample code using id

Input

-- ftd.text: FifthTry
id: fifthtry 
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

In the above example we have an 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/#fifthtry

`padding: optional ftd.length`

The 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.

Sample code using padding

Input

-- ftd.text: FifthTry
padding.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-vertical: optional ftd.length`

This attribute gives top and bottom padding to an element. It takes input of ftd.length type and is optional.

Sample code using padding-vertical

Input

-- ftd.text: FifthTry
padding-vertical.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-horizontal: optional ftd.length`

This attribute gives left and right padding to an element. It takes input of ftd.length type and is optional.

Sample code using padding-horizontal

Input

-- ftd.text: FifthTry
padding-horizontal.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-left: optional ftd.length`

This attribute gives left padding to an element. It takes input of ftd.length type and is optional.

Sample code using padding-left

Input

-- ftd.text: FifthTry
padding-left.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-right: optional ftd.length`

This attribute gives right padding to an element. It takes input of ftd.length type and is optional.

Sample code using padding-right

Input

-- ftd.text: FifthTry
padding-right.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-top: optional ftd.length`

This attribute gives top padding to an element. It takes input of ftd.length type and is optional.

Sample code using padding-top

Input

-- ftd.text: FifthTry
padding-top.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`padding-bottom: optional ftd.length`

This attribute gives bottom padding to an element. It takes input of ftd.length type and is optional.

Sample code using padding-bottom

Input

-- ftd.text: FifthTry
padding-bottom.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin: optional ftd.length`

The 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.

Sample code using margin

Input

-- ftd.text: FifthTry
margin.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-vertical: optional ftd.length`

This attribute gives top and bottom margin to an element. It takes input of ftd.length type and is optional.

Sample code using margin-vertical

Input

-- ftd.text: FifthTry
margin-vertical.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-horizontal: optional ftd.length`

This attribute gives left and right margin to an element. It takes input of ftd.length type and is optional.

Sample code using margin-horizontal

Input

-- ftd.text: FifthTry
margin-horizontal.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-left: optional ftd.length`

This attribute gives left margin to an element. It takes input of ftd.length type and is optional.

Sample code using margin-left

Input

-- ftd.text: FifthTry
margin-left.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-right: optional ftd.length`

This attribute gives right margin to an element. It takes input of ftd.length type and is optional.

Sample code using margin-right

Input

-- ftd.text: FifthTry
margin-right.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-top: optional ftd.length`

This attribute gives top margin to an element. It takes input of ftd.length type and is optional.

Sample code using margin-top

Input

-- ftd.text: FifthTry
margin-top.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`margin-bottom: optional ftd.length`

This attribute gives bottom margin to an element. It takes input of ftd.length type and is optional.

Sample code using margin-bottom

Input

-- ftd.text: FifthTry
margin-bottom.px: 60 
color: $inherited.colors.text
border-width.px: 2

Lang:

ftd

Output

FifthTry

`align-self: optional ftd.align-self`

This property sets the alignment of the current element inside a container. It takes input of ftd.align-self type and is optional.

Sample code using align-self

Input

-- 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

Lang:

ftd

Output

Start

Center

End

`color: optional ftd.color`

The color property sets the color of an element. It takes input of ftd.color type and is optional.

Sample code using color

Input

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

-- ftd.text: FifthTry
color: $red-yellow

Lang:

ftd

Output

FifthTry

`width: optional ftd.resizing, default=auto`

This property sets the width of the element. It takes value of type type ftd.resizing and is optional. Default value is set to auto if not provided.

Sample code using width

Input

-- 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

Lang:

ftd

Output

Width of this container is 100px

`min-width: optional ftd.resizing`

This property will set the minimum width of the element. It takes value of type ftd.resizing and is optional.

Sample code using min-width

Input

-- 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

Lang:

ftd

Output

Min Width of this container is 400px

`max-width: optional ftd.resizing`

This property will set the maximum width of the element. It takes value of type ftd.resizing and is optional.

Sample code using max-width

Input

-- 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

Lang:

ftd

Output

Max Width of this container is 300px. If you add more text than it can accommodate, then it will overflow.

`height: optional ftd.resizing, default=auto`

This property sets the height of the element. It takes value of type type ftd.resizing and is optional. Default value is set to auto if not provided.

Sample code using height

Input

-- 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

Lang:

ftd

Output

Height of this container is 100px

`min-height: optional ftd.resizing`

This property will set the minimum height of the element. It takes value of type ftd.resizing and is optional.

Sample code using min-height

Input

-- 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

Lang:

ftd

Output

Min Height of this container is 100px

If more text are added inside this container, the text might overflow if it can't be accommodated.

`max-height: optional ftd.resizing`

This property will set the maximum height of the element. It takes value of type ftd.resizing and is optional.

Sample code using max-height

Input

-- 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

Lang:

ftd

Output

Max Height of this container is 50px. If you add more text than it can accommodate, then it will overflow.

`background: optional ftd.background`

The background property can be used to set the background of an element. The background can be set to a solid color or an image. It takes value of type ftd.background which is an or-type.

`background.solid: ftd.color`

The background.solid property sets the background color of an element. It takes input of ftd.color type.

Specifying background as a solid color

Input

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

-- ftd.text: FifthTry
background.solid: $yellow-red 
color: $inherited.colors.text-strong

Lang:

ftd

Output

FifthTry

`background.image: ftd.background-image`

The background.image property sets the background image of an element. It takes input of ftd.background-image type and is optional.

Specifying background as an image

Input

-- 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

Lang:

ftd

Output

Fifthtry logo as background image

`background.linear-gradient: ftd.linear-gradient`

The 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.

Specifying linear gradient as background

Input

-- 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

Lang:

ftd

Output

This is linear gradient (click to change)

`border-width: optional ftd.length`

This property sets the width of the border. It takes input of type ftd.length and is optional.

Sample code using border-width

Input

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

-- ftd.text: FifthTry
border-width.px: 3 
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-left-width: optional ftd.length`

This property sets the width of the left border. It takes input of type ftd.length and is optional.

Sample code using border-left-width

Input

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

-- ftd.text: FifthTry
border-left-width.px: 3 
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-right-width: optional ftd.length`

This property sets the width of the right border. It takes input of type ftd.length and is optional.

Sample code using border-right-width

Input

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

-- ftd.text: FifthTry
border-right-width.px: 3 
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-top-width: optional ftd.length`

This property sets the width of the top border. It takes input of type ftd.length and is optional.

Sample code using border-top-width

Input

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

-- ftd.text: FifthTry
border-top-width.px: 3 
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-bottom-width: optional ftd.length`

This property sets the width of the bottom border. It takes input of type ftd.length and is optional.

Sample code using border-bottom-width

Input

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

-- ftd.text: FifthTry
border-bottom-width.px: 3 
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-radius: optional ftd.length`

This property rounds the corners of the border. It takes input of type ftd.length and is optional.

Sample code using border-radius

Input

-- 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

Lang:

ftd

Output

FifthTry

`border-top-left-radius: optional ftd.length`

This property rounds the top left corner of the border. It takes input of type ftd.length and is optional.

Sample code using border-top-left-radius

Input

-- 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

Lang:

ftd

Output

FifthTry

`border-top-right-radius: optional ftd.length`

This property rounds the top right corner of the border. It takes input of type ftd.length and is optional.

Sample code using border-top-right-radius

Input

-- 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

Lang:

ftd

Output

FifthTry

`border-bottom-left-radius: optional ftd.length`

This property rounds the bottom left corner of the border. It takes input of type ftd.length and is optional.

Sample code using border-bottom-left-radius

Input

-- 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

Lang:

ftd

Output

FifthTry

`border-bottom-right-radius: optional ftd.length`

This property rounds the bottom right corner of the border. It takes input of type ftd.length and is optional.

Sample code using border-bottom-right-radius

Input

-- 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

Lang:

ftd

Output

FifthTry

`border-color: optional ftd.color`

The border-color property sets the color of an element's four borders. It takes input of ftd.color type.

Sample code using border-color

Input

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

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-left-color: optional ftd.color`

The border-left-color property sets the color of an element's left border. It takes input of ftd.color type.

Sample code using border-left-color

Input

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

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-left-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-right-color: optional ftd.color`

The border-right-color property sets the color of an element's right border. It takes input of ftd.color type.

Sample code using border-right-color

Input

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

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-right-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-top-color: optional ftd.color`

The border-top-color property sets the color of an element's top border. It takes input of ftd.color type.

Sample code using border-top-color

Input

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

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-top-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-bottom-color: optional ftd.color`

The border-bottom-color property sets the color of an element's bottom border. It takes input of ftd.color type.

Sample code using border-bottom-color

Input

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

-- ftd.text: FifthTry
border-width.px: 2
color: $inherited.colors.text
border-bottom-color: $red-yellow

Lang:

ftd

Output

FifthTry

`border-style: optional ftd.border-style, default=solid`

The border-style property sets the style of an element's borders. It takes a ftd.border-style value and is optional. By default, border-style is set to solid if this value is not provided.

Sample code using border-style

Input

-- ftd.text: FifthTry
border-style: dashed 
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-left: optional ftd.border-style`

The border-style property sets the style of an element's left border. It takes a ftd.border-style value and is optional.

Sample code using border-style-left

Input

-- ftd.text: FifthTry
border-style-left: dashed 
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-right: optional ftd.border-style`

The border-style property sets the style of an element's right border. It takes a ftd.border-style value and is optional.

Sample code using border-style-right

Input

-- ftd.text: FifthTry
border-style-right: dashed 
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-top: optional ftd.border-style`

The border-style property sets the style of an element's top border. It takes a ftd.border-style value and is optional.

Sample code using border-style-top

Input

-- ftd.text: FifthTry
border-style-top: dashed 
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-bottom: optional ftd.border-style`

The border-style property sets the style of an element's bottom border. It takes a ftd.border-style value and is optional.

Sample code using border-style-bottom

Input

-- ftd.text: FifthTry
border-style-bottom: dashed 
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-horizontal: optional ftd.border-style`

The border-style property sets the style of an element's left and right borders. It takes a ftd.border-style value and is optional.

Sample code using border-style-horizontal

Input

-- ftd.text: FifthTry
border-style-horizontal: dashed 
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`border-style-vertical: optional ftd.border-style`

The border-style property sets the style of an element's top and bottom borders. It takes a ftd.border-style value and is optional.

Sample code using border-style-vertical

Input

-- ftd.text: FifthTry
border-style-vertical: dashed 
border-width.px: 2
border-color: $red-yellow
color: $inherited.colors.text

Lang:

ftd

Output

FifthTry

`overflow: optional ftd.overflow`

The overflow property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows through any edge. It takes value of type ftd.overflow and is optional.

Sample code using overflow

Input

-- 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

Lang:

ftd

Output

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`

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows through left and right edges. It takes value of type ftd.overflow and is optional.

Sample code using overflow-x

Input

-- 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

Lang:

ftd

Output

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`

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows through top and bottom edges. It takes value of type ftd.overflow and is optional.

Sample code using overflow-y

Input

-- 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

Lang:

ftd

Output

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`

This cursor property will set the cursor type when mouse is hovered over the element. It takes value of type ftd.cursor and is optional.

Sample code using cursor

Input

-- 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

Lang:

ftd

Output

This text will show pointer cursor on hover

This text will show progress cursor on hover

This text will show zoom-in cursor on hover

This text will show help cursor on hover

This text will show cross-hair cursor on hover

`region: optional ftd.region`

This region property will set the ARIA Region role that the UI element will be playing. It takes value of type ftd.region and is optional.

Sample code using region

Input

-- ftd.text: Hello World
region: h1 
color: $inherited.colors.text

Lang:

ftd

Output

Hello World

`link: optional String`

This converts the element to a hyper link.

Sample code using link

Input

-- ftd.text: fifthtry
link: https://www.fifthtry.com 
color: $inherited.colors.text

Lang:

ftd

Output

fifthtry

`open-in-new-tab: optional boolean, default=False`

If 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.

Sample code using open-in-new-tab along with link

Input

-- ftd.text: fifthtry (opens in new tab)
link: https://www.fifthtry.com
open-in-new-tab: true 
color: $inherited.colors.text

Lang:

ftd

Output

fifthtry (opens in new tab)

`role: optional ftd.responsive-type`

This property is used to define several text different properties such as font-size, font-weight, letter-spacing, font-family and line-height. It takes value of type ftd.responsive-type and is optional.

Sample code using role

Input

-- 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

Lang:

ftd

Output

Heading Hero

Heading Large

Copy Regular

`resize: optional ftd.resize`

This property sets whether the element is resizable in any direction or not. It takes value of type ftd.resize and is optional

Sample code using resize

Input

-- 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

Lang:

ftd

Output

This row is resizable both directions

This row is resizable only horizontally

This row is resizable only vertically

`sticky: optional boolean`

This property lets you make an element stick to a specific position on the page when it is scrolled. It takes value of type boolean and is optional.

Sample code using sticky

Input

-- 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

Lang:

ftd

Output

The blue planet below is sticky

Blue planet

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.

`shadow: optional ftd.shadow`

This property will let you create a box shadow. It takes ftd.shadow value which is of record type and is optional.

Sample code using shadow

Input

-- 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

Lang:

ftd

Output

FifthTry

`mask: optional ftd.mask`

This property hides an element (partially or fully) by masking or clipping the image at specific points. It takes ftd.mask value which is of or-type type and is optional.

Sample code using mask

Input

-- ftd.container:
background.solid: red
mask.image: https://mdn.github.io/css-examples/masking/star.svg
width.fixed.px: 300
height.fixed.px: 300

Lang:

ftd

Output

`anchor: optional ftd.anchor`

This property is used to specify the positioning of the element with respect to its ancestor, window or other element referred by id. It takes value of type ftd.anchor and is optional.

Sample code using anchor

Input

-- 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

Lang:

ftd

Output

Inside Inner Container

Inside Outer Container

`opacity: optional decimal`

This property defines the opacity of the element. The level of opacity corresponds to the level of transparency, with a value of 1 indicating no transparency, 0.5 indicating 50% transparency, and 0 indicating complete transparency.

Sample code using opacity

Input

-- 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

Lang:

ftd

Output

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.

Change opacity

`whitespace: optional ftd.whitespace`

This property sets how white-space is handled inside an element. It takes value of type ftd.white-space and is optional.

Sample code using whitespace

Input

-- 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

Lang:

ftd

Output

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`

This text-transform property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. This takes value of type ftd.text-transform and is optional.

Input

-- 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