powered by
khand-typography

khand-typography package

Package Name
fastn-community.github.io/khand-typography

This FTD font khand-typography can be used for your ftd web projects.

You can use this khand-typography inside the FTD project. Follow below instructions to use this font package.

How to use khand-typography?

To use this khand-typography inside your ftd web project, if you are using our doc-site theme then you just have to pass types to ds.page

Let’s say you are using doc-site inside your project then, it’s as simple as making a sandwich.
Add this to your FASTN.ftd
-- fastn.dependency: fastn-community.github.io/khand-typography
Now import khand-typography inside .ftd file as shown below:
-- import: fastn-community.github.io/khand-typography
add khand-typography types to ds.page types attribute as shown below:
-- ds.page:
types: $khand-typography.types

Once you add types: $khand-typography.types inside your .ftd file, khand-typography will be added as fastn default typography to your ds.page and to all components you add inside ds.page.

If you’re not using doc-site theme and building your own fastn web theme. Then, add khand-typography dependency into FASTN.ftd file.
-- fastn.dependency: fastn-community.github.io/khand-typography
Once you add above dependency, then import khand-typography inside your .ftd file:
-- import: fastn-community.github.io/khand-typography
Done! khand-typography is now added. Lets define a page component:
-- import: fastn-community.github.io/khand-typography

-- component page:
caption title:
body body:
children wrap:
ftd.type-data types: $khand-typography.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

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 $khand-typography.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.

Click on download icon on above code snippet my-ds.ftd file will be downloaded.
Input
-- import: <your-fastn-package-name>/my-ds

-- my-ds.page: I am a page title

I am `page` component body. Body can contain multiple paragraphs, links etc.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry’s standard dummy

- I am a list item.

- I am a list item.

-- ftd.text: I am a child component of `page`
role: $inherited.types.heading-medium
color: $inherited.colors.text

-- end: my-ds.page
types.ftd
Output
I am a page title

I am page component body. Body can contain multiple paragraphs, links etc.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy

  • I am a list item.

  • I am a list item.
I am a child component of page

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 khand-typography 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 more fastn predefined inherited types using khand-font font-family and font-sizes.
khand-typography

khand-typography package

Package Name
fastn-community.github.io/khand-typography

This FTD font khand-typography can be used for your ftd web projects.

You can use this khand-typography inside the FTD project. Follow below instructions to use this font package.

How to use khand-typography?

To use this khand-typography inside your ftd web project, if you are using our doc-site theme then you just have to pass types to ds.page

Let’s say you are using doc-site inside your project then, it’s as simple as making a sandwich.
Add this to your FASTN.ftd
-- fastn.dependency: fastn-community.github.io/khand-typography
Now import khand-typography inside .ftd file as shown below:
-- import: fastn-community.github.io/khand-typography
add khand-typography types to ds.page types attribute as shown below:
-- ds.page:
types: $khand-typography.types

Once you add types: $khand-typography.types inside your .ftd file, khand-typography will be added as fastn default typography to your ds.page and to all components you add inside ds.page.

If you’re not using doc-site theme and building your own fastn web theme. Then, add khand-typography dependency into FASTN.ftd file.
-- fastn.dependency: fastn-community.github.io/khand-typography
Once you add above dependency, then import khand-typography inside your .ftd file:
-- import: fastn-community.github.io/khand-typography
Done! khand-typography is now added. Lets define a page component:
-- import: fastn-community.github.io/khand-typography

-- component page:
caption title:
body body:
children wrap:
ftd.type-data types: $khand-typography.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

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 $khand-typography.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.

Click on download icon on above code snippet my-ds.ftd file will be downloaded.
Input
-- import: <your-fastn-package-name>/my-ds

-- my-ds.page: I am a page title

I am `page` component body. Body can contain multiple paragraphs, links etc.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry’s standard dummy

- I am a list item.

- I am a list item.

-- ftd.text: I am a child component of `page`
role: $inherited.types.heading-medium
color: $inherited.colors.text

-- end: my-ds.page
types.ftd
Output
I am a page title

I am page component body. Body can contain multiple paragraphs, links etc.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy

  • I am a list item.

  • I am a list item.
I am a child component of page

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 khand-typography 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 more fastn predefined inherited types using khand-font font-family and font-sizes.
Copyright © 2023 - FifthTry