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 components`and
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`](https://fastn.com/featured) 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**
fastn-community.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>
Lang:
ftd
- Import the package in your file. Here, I am importing it in `demo.ftd`
In .ftd file
-- import: <package-name>
Lang:
ftd
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
Lang:
ftd
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`.
-- ftd.column:
;; content of column goes here
-- end: ftd.column
Lang:
ftd
`ftd.column` documentation: [read more](/column/)
Row (left to right):
Row Syntax
-- ftd.row:
;; content of row goes here
-- end: ftd.row
Lang:
ftd
`ftd.row` documentation: [read more](/row/)
Continue with the [part 3 now](/expander/components/).
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.
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.