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 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`.
Properties
Root ftd.column
-- ftd.column:
padding.px: 50
background.solid: #eee
width: fill-container
height: fill-container
align-content: top-center
Lang:
ftd
Child ftd.column
-- ftd.column:
border-width.px: 4
spacing.fixed.px: 10
width: fill-container
Lang:
ftd
ftd.row for Header
-- ftd.row:
width: fill-container
spacing: space-between
border-bottom-width.px: 1
padding.px: 10
Lang:
ftd
UI design of webpage
Container Components
Column (top to bottom):
Column Syntax
-- 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/).
