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
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
.
FASTN.ftd
-- fastn.dependency: <package-name>
demo.ftd
-- 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.
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:
admonitions
package, we have used info
component.fastn package
in our project.Let's continue our learning in the index.ftd
file and build our project
step-by-step.
properties
we will apply to the container components
.-- ftd.column:
padding.px: 50
background.solid: #eee
width: fill-container
height: fill-container
align-content: top-center
-- ftd.column:
border-width.px: 4
spacing.fixed.px: 10
width: fill-container
-- ftd.row:
width: fill-container
spacing: space-between
border-bottom-width.px: 1
padding.px: 10
-- ftd.column:
;; content of column goes here
-- end: ftd.column
ftd.column
documentation: read more-- ftd.row:
;; content of row goes here
-- end: ftd.row
ftd.row
documentation: read more