roboto-typography

roboto-typography package

Package Name

fastn-community.github.io/roboto-typography

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

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

How to use roboto-typography?

To use this roboto-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/roboto-typography

Now import roboto-typography inside .ftd file as shown below:

-- import: fastn-community.github.io/roboto-typography

add roboto-typography types to ds.page types attribute as shown below:

-- ds.page:
types: $roboto-typography.types

Once you add types: $roboto-typography.types inside your .ftd file, roboto-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 roboto-typography dependency into FASTN.ftd file.

-- fastn.dependency: fastn-community.github.io/roboto-typography

Once you add above dependency, then import roboto-typography inside your .ftd file:

-- import: fastn-community.github.io/roboto-typography

Done! roboto-typography is now added. Lets define a page component:

-- import: fastn-community.github.io/roboto-typography

-- component page:
caption title:
body body:
children wrap:
ftd.type-data types: $roboto-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 $roboto-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 roboto-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 roboto-font font-family and font-sizes.