Support us by giving us a

Overview

Design

Why Use `fastn` for Your Next Frontend?

`ftd.rive` (animation)

Container Root Attributes

`import`

Using export/exposing

Functions

Built-in Functions

Built-in Rive Functions

Built-in Local Storage Functions

Built-in Variables

`ftd` Events

Rive Events

Use color scheme package

How to make page responsive

Using JS

JS in function

Web Component

Create `fastn` package

Same argument & attribute types

`ftd.column`

A column is a container component that stacks a list of children vertically.

ℹ️

column

Make sure to close your column container using the `end` syntax. This is mandatory. `-- end: `

Usage

-- ftd.column:

;; <Child components>

-- end: ftd.column

Lang:

ftd

Attributes

`ftd.column` accepts the [container root attributes](ftd/container-root-attributes/), [container attributes](ftd/container-attributes/) as well all the [common attributes](ftd/common/).

Example

-- ftd.column:
spacing.fixed.px: 20

-- ftd.text: Hello

-- ftd.text: World

-- end: ftd.column

Lang:

ftd

In this example, a column container is created with a fixed spacing of 20 pixels between the child components. Two `ftd.text` components are then placed within the row, which will be vertically stacked with the specified spacing.

Output

Hello

World

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) 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.