<repo_name> package
Package name:
<user_name>.github.io/<repo_name>
Below are our default fastn
inherited font types of <repo_name>.$inherited.types.heading-hero
line-height
60
size:
52
weight:
700
Lorem Ipsum is simply
$inherited.types.heading-large
line-height
48
size:
40
weight:
700
Lorem Ipsum is simply
$inherited.types.heading-medium
line-height
44
size:
32
weight:
600
Lorem Ipsum is simply
$inherited.types.heading-small
line-height
36
size:
24
weight:
500
Lorem Ipsum is simply
$inherited.types.heading-tiny
line-height
26
size:
18
weight:
500
Lorem Ipsum is simply
$inherited.types.copy-large
line-height
24
size:
16
weight:
400
Lorem Ipsum is simply
$inherited.types.copy-regular
line-height
20
size:
16
weight:
400
Lorem Ipsum is simply
$inherited.types.copy-small
line-height
20
size:
16
weight:
400
Lorem Ipsum is simply
$inherited.types.fine-print
line-height
18
size:
14
weight:
400
Lorem Ipsum is simply
$inherited.types.blockquote
line-height
16
size:
14
weight:
400
Lorem Ipsum is simply
$inherited.types.source-code
line-height
16
size:
14
weight:
400
Lorem Ipsum is simply
$inherited.types.label-large
line-height
22
size:
16
weight:
400
Lorem Ipsum is simply
$inherited.types.label-small
line-height
16
size:
14
weight:
400
Lorem Ipsum is simply
$inherited.types.button-large
line-height
24
size:
18
weight:
700
Lorem Ipsum is simply
$inherited.types.button-medium
line-height
21
size:
16
weight:
700
Lorem Ipsum is simply
$inherited.types.button-small
line-height
19
size:
14
weight:
700
Lorem Ipsum is simply
$inherited.types.link
line-height
19
size:
14
weight:
400
Lorem Ipsum is simply
Copyright © 2023 - FifthTry
<repo_name> package
Package name:
<user_name>.github.io/<repo_name>
This FTD font <repo_name> can be used for your ftd web projects.
FTD project. Follow below instructions to use this font package.How to use <repo_name>?
To use this <repo_name> inside your ftd web project, if you are using our doc-site theme then you just have to pass types to ds.page
doc-site inside your project then, it’s as simple as making a sandwich.Add this to your FASTN.ftd
-- fastn.dependency: <user_name>.github.io/<repo_name> ++
Lang:
ftd
Next Step
Now import
<repo_name> inside .ftd file as shown below:-- import: <user_name>.github.io/<repo_name> ++
Lang:
ftd
Next Step
add
<repo_name> types to ds.page types attribute as shown below:-- ds.page: +types: $<repo_name>.types ++
Lang:
ftd
Next Step
Once you add types: $<repo_name>.types inside your .ftd file, <repo_name> will be added as fastn default typography to your ds.page and to all components you add inside ds.page.
doc-site theme and building your own fastn web theme. Then, add <repo_name> dependency into FASTN.ftd file.-- fastn.dependency: <user_name>.github.io/<repo_name> ++
Lang:
ftd
Next Step
Once you add above dependency, then import
<repo_name> inside your .ftd file:-- import: <user_name>.github.io/<repo_name> ++
Lang:
ftd
Next Step
Done!
<repo_name> is now added. Lets define a page component:-- import: <user_name>.github.io/<repo_name> + +-- component page: +caption title: +body body: +children wrap: +ftd.type-data types: $<repo_name>.types + +-- ftd.column: +width: fill-container +spacing.fixed.px: 32 +padding.px: 30 +background.solid: $inherited.colors.background.base +border-width.px: 1 +border-color: $inherited.colors.border-strong +border-radius.px: 10 +margin-vertical.px: 10 + +-- ftd.text: $page.title +role: $inherited.types.heading-large +color: $inherited.colors.text-strong + +-- ftd.text: +role: $inherited.types.copy-regular +color: $inherited.colors.text + +$page.body + +-- ftd.column: +width: fill-container +children: $page.wrap + +-- end: ftd.column + +-- end: ftd.column + +-- end: page ++
my-ds.ftd
Lang:
ftd
Next Step
In above code snippet we defined page component which has types, title, body and wrap attributes.
The types attribute used to pass a typography to it. In above example we have added $<repo_name>.types as default ftd.type-data. The ftd.type-data contains all fastn default inherited types.
The title attribute will be used for adding page titles.
The body attribute is used to add body to page component, the body can contain multiple pagragraphs, lists and any markdown format content.
The wrap attribute allows adding child components to page component. You can add any other component inside page.
my-ds.ftd file will be downloaded.Next Step
Click on download icon on above code snippet types.ftd file will be downloaded, add previously downloaded my-ds.ftd and types.ftd inside fastn package. Update <your-fastn-package-name> with your fastn.package name and run fastn serve, load localhost web page on browser.
e.g. http://127.0.0.1:8001/types You will see the page component using <repo_name> types applied to inherited types.
Done! isn’t it simple? Try this and don’t forget to jump on our Discord
Click here to know morefastn predefined inherited types using <font-name>-font font-family and font-sizes.Copyright © 2023 - FifthTry