This FTD font midnight-storm-typography
can be used for your ftd web projects.
FTD
project. Follow below
instructions to use this font package.To use this midnight-storm-typography 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.-- fastn.dependency: fastn-community.github.io/midnight-storm-typography
midnight-storm-typography
inside .ftd
file as shown below:-- import: fastn-community.github.io/midnight-storm-typography
midnight-storm-typography
types
to ds.page
types
attribute as shown
below:-- ds.page:
types: $midnight-storm-typography.types
Once you add types: $midnight-storm-typography.types
inside your .ftd
file,
midnight-storm-typography
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 midnight-storm-typography
dependency into FASTN.ftd
file.-- fastn.dependency: fastn-community.github.io/midnight-storm-typography
midnight-storm-typography
inside your
.ftd
file:-- import: fastn-community.github.io/midnight-storm-typography
midnight-storm-typography
is now added. Lets define a page
component:-- import: fastn-community.github.io/midnight-storm-typography
-- component page:
caption title:
body body:
children wrap:
ftd.type-data types: $midnight-storm-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
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 $midnight-storm-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
.
my-ds.ftd
file will be
downloaded.-- 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
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.
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
midnight-storm-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 morefastn
predefined inherited
types using lato-font
and source-code-pro-font
font-family and font-sizes.