a fastn package

<repo_name>a fastn package

Home

GitHub

fastn typography

<repo_name> package

Package name:

<user_name>.github.io/<repo_name>

Package name:

<user_name>.github.io/<repo_name>

License:

Open Source BSD

This FTD font <repo_name> can be used for your ftd web projects.

You can use this <repo_name> inside the 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

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: <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.

If you’re not using 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.

Click on download icon on above code snippet 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 more fastn predefined inherited types using <font-name>-font font-family and font-sizes.