powered by

Basic UI

In this video, I will first show you how to utilize the fastn packages that are there for use. Then, we will continue our learning and understand what are Properties and how to use them. Later, we will use container componentsand start creating the layout of our Expander project.

Featured Components - How to use?

This Crash Course is for everyone, for the one’s who want to learn how to create a components like the one we are going to create in this Crash Course. And we also respect the choice of those wanting to know how to use the Featured Components directly and rather focus on building their websites or blog-posts or create exciting UIs.

If you check the featured page you will come across some amazing components. We are going to use few of them to show. For our convenience I am going to use these components in a new file demo.ftd and leave index.ftd file as it is, so that we can continue our learning there.

As we did earlier, we will add a new file in our project. I have saved the file as demo.ftd. Now, I will apply some of the featured components.

Here is the list of packages I have used:
doc-site
fifthtry.github.io/doc-site
admonitions
fifthtry.github.io/admonitions
color-scheme
fifthtry.github.io/winter-cs
You can include any such component of your own. For example, I will include the box component I created earlier.
expander
gargajit.github.io/expander
Using a component is easier than making a sandwich. It can be done in two steps:
  • Add the package as a dependency in FASTN.ftd
In FASTN.ftd file
-- fastn.dependency: <package-name>
  • Import the package in your file. Here, I am importing it in demo.ftd
In .ftd file
-- import: <package-name>

In the package-name, anything that is after the / is a default alias. But sometimes, the alias can be a long one, and if you want to use a component of that package, you will have to use the long name. Instead, you can give a new and shorter alias using as command.

For example:
New alias for doc-site
-- import:fifthtry.github.io/doc-site as `ds`

Using the default alias or a new alias, you can use the components of the packages you have imported. These simple steps need to be done everytime you want to use a new package in your project.

For example:

For doc-site package, we have used following components:

  • page
  • h1
For admonitions package, we have used info component.
ℹ️
Note
With just two steps, just like we did earlier, we can use any fastn package in our project.

Let’s keep learning

Let’s continue our learning in the index.ftd file and build our project step-by-step.

Following is the list of the properties we will apply to the container components.

Properties

Root ftd.column
-- ftd.column:
padding.px: 50
background.solid: #eee
width: fill-container
height: fill-container
align-content: top-center
Child ftd.column
-- ftd.column:
border-width.px: 4
spacing.fixed.px: 10
width: fill-container
ftd.row for Header
-- ftd.row:
width: fill-container
spacing: space-between
border-bottom-width.px: 1
padding.px: 10

UI design of webpage

Container Components

Column (top to bottom):
Column Syntax
-- ftd.column:

;; content of column goes here

-- end: ftd.column
ftd.column documentation: read more
Row (left to right):
Row Syntax
-- ftd.row:

;; content of row goes here

-- end: ftd.row
ftd.row documentation: read more
Continue with the part 3 now.

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

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!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

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.

Basic UI

In this video, I will first show you how to utilize the fastn packages that are there for use. Then, we will continue our learning and understand what are Properties and how to use them. Later, we will use container componentsand start creating the layout of our Expander project.

Featured Components - How to use?

This Crash Course is for everyone, for the one’s who want to learn how to create a components like the one we are going to create in this Crash Course. And we also respect the choice of those wanting to know how to use the Featured Components directly and rather focus on building their websites or blog-posts or create exciting UIs.

If you check the featured page you will come across some amazing components. We are going to use few of them to show. For our convenience I am going to use these components in a new file demo.ftd and leave index.ftd file as it is, so that we can continue our learning there.

As we did earlier, we will add a new file in our project. I have saved the file as demo.ftd. Now, I will apply some of the featured components.

Here is the list of packages I have used:
doc-site
fifthtry.github.io/doc-site
admonitions
fifthtry.github.io/admonitions
color-scheme
fifthtry.github.io/winter-cs
You can include any such component of your own. For example, I will include the box component I created earlier.
expander
gargajit.github.io/expander
Using a component is easier than making a sandwich. It can be done in two steps:
  • Add the package as a dependency in FASTN.ftd
In FASTN.ftd file
-- fastn.dependency: <package-name>
  • Import the package in your file. Here, I am importing it in demo.ftd
In .ftd file
-- import: <package-name>

In the package-name, anything that is after the / is a default alias. But sometimes, the alias can be a long one, and if you want to use a component of that package, you will have to use the long name. Instead, you can give a new and shorter alias using as command.

For example:
New alias for doc-site
-- import:fifthtry.github.io/doc-site as `ds`

Using the default alias or a new alias, you can use the components of the packages you have imported. These simple steps need to be done everytime you want to use a new package in your project.

For example:

For doc-site package, we have used following components:

  • page
  • h1
For admonitions package, we have used info component.
ℹ️
Note
With just two steps, just like we did earlier, we can use any fastn package in our project.

Let’s keep learning

Let’s continue our learning in the index.ftd file and build our project step-by-step.

Following is the list of the properties we will apply to the container components.

Properties

Root ftd.column
-- ftd.column:
padding.px: 50
background.solid: #eee
width: fill-container
height: fill-container
align-content: top-center
Child ftd.column
-- ftd.column:
border-width.px: 4
spacing.fixed.px: 10
width: fill-container
ftd.row for Header
-- ftd.row:
width: fill-container
spacing: space-between
border-bottom-width.px: 1
padding.px: 10

UI design of webpage

Container Components

Column (top to bottom):
Column Syntax
-- ftd.column:

;; content of column goes here

-- end: ftd.column
ftd.column documentation: read more
Row (left to right):
Row Syntax
-- ftd.row:

;; content of row goes here

-- end: ftd.row
ftd.row documentation: read more
Continue with the part 3 now.

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!

Getting Help

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!

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

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.