Learn full-stack web development using fastn in a week

Content Planning

Button Video

How to create a button

Video Title: How to create a button

Owner: Ajit

Audience: Frontend developer, designer

Goal: To help users to create button using fastn

Assumption: Have already installed fastn and create a fastn package. Understanding of datatypes, components.

Intro Clip

Screen: Introduction slide

Script

Hey Guys, my name is Ajit and I am back with another video on fastn. In this video we are going to create buttons using fastn language.

We will start off by creating a button with basic UI then we will recreate this button as you see on the screen in the later stages of this video.

This UI is just an inspiration we took from Vercel. We will make it look like this using fastn.

To make the button we will use the concepts like:

components.
To the component we will apply various properties with their respective built-in types. Some of the Primitive Types like caption, string, boolean while others of the Derived Types like ftd.color, ftd.shadow.
We will use records as well to define colors for both light and dark mode as well as shadow-color similar to what we have in second button.
We will do event handling that gives shadow to the button on-hover.

You can find all the URLs of the concepts which we will discuss in this video in the description below.

Project build-up

;; Open button.ftd file

Script:

On a quick note, I have created a fastn package on my machine. If you have gone through the Expander Course, i have mentioned that a fastn package primarily needs two files. FASTN.ftd and index.ftd.

In the index.ftd file.

Let's start by creating a component and we will call it button. The syntax is:

-- component button:

-- end: button

Lang:

ftd

We will give the basic properties to this component like, title and link.

title is of caption type.
link is of string type.

You can also make the link as optional, if you do not want to add any link to it.

-- component button:
caption title:
optional string link: 

-- end: button

Lang:

ftd

First, let's create one basic button.

Inside this component we will add ftd.text that will take the title, a link and apply the border property to it.

-- ftd.text: $button.title
link: $button.link
border-width.px: 2

Lang:

ftd

The dollars used here is for reference that the value in the caption of ftd.text will come from component button's title and same for link.

This will do. We can use this component to show the button. We have a basic button ready.

;; Show the UI

Let's move to the second part where we start putting things together to make this UI. Let's start applying some styling properties to the ftd.text

-- ftd.text: $button.title
link: $button.link
border-width.px: 2
padding.px: 10             
border-radius.px: 6        
min-width.fixed.px: 175    
style: bold                
text-align: center

Lang:

ftd

After that, we will give color and role to the text.

For that, in the component definition we have added a variable text-color of type ftd.color.

We can give a default value using $inherited.colors to this variable. In case, the user doesn't pass any text-color, while calling this component, it will take the inherited color from the color-scheme.

-- component button:
caption title:
optional string link: 
ftd.color text-color: $inherited.colors.text-strong 	  


-- end: button

Lang:

ftd

And in the ftd.text, we will pass the reference of text-color to the color. And for the role we have passed as $inherited.type.copy-regular

-- ftd.text: $button.title
link: $button.link
border-width.px: 2
border-radius.px: 6        
padding.px: 10             
min-width.fixed.px: 175    
style: bold    
color: $button.text-color                                    
role: $inherited.types.copy-regular

Lang:

ftd

role is a font specification which defines several font-related properties like font-weight, line-height, letter-spacing etc. If you want to read about roles you can checkout the ftd.responsive-type under built-in types. The URL provided in the description below.

Let's keep improving it. We need background color and border color as well.

-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base				
ftd.color border-color: $inherited.colors.border-strong

Lang:

ftd

-- ftd.text: $button.title
link: $button.link
border-width.px: 2
border-radius.px: 6        
padding.px: 10             
min-width.fixed.px: 175  
text-align: center  
style: bold    
color: $button.text-color                                    
role: $inherited.types.copy-regular   
background.solid: $button.bg-color    
border-color: $button.border-color

Lang:

ftd

Since we are trying to copy the colors of this UI. I have created the custom color variables like:

-- ftd.color monochrome-dark:
light: black
dark: white

-- ftd.color monochrome-light:
light: white
dark: black

-- ftd.color shadow-color:
light: #cae9ee
dark: #e4b0ac

Lang:

ftd

These variables are of record type ftd.color. You can check the URL of records to read about them.

Let's add the shadow to the button. First we will create a variable of type ftd.shadow, which is also a record.

-- ftd.shadow s:
color: $shadow-color
x-offset.px: 0
y-offset.px: 0
blur.px: 50
spread.px: 7

Lang:

ftd

Now we will add the component property of type ftd.shadow and make it optional

-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base      
ftd.color border-color: $inherited.colors.border-strong     
optional ftd.shadow hover-shadow:

Lang:

ftd

And then will add shadow to the button

-- ftd.text: $button.title
link: $button.link
border-width.px: 2
border-radius.px: 6        
padding.px: 10             
min-width.fixed.px: 175    
style: bold                           
role: $inherited.types.copy-regular   
color: $button.text-color      
background.solid: $button.bg-color   
border-color: $button.border-color     
shadow: $button.hover-shadow

Lang:

ftd

Now we can create events which on-hover shows the shadow. So we will create a boolean variable to component definition and create two events of on-mouse-enter and on-mouse-leave.

-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base      
ftd.color border-color: $inherited.colors.border-strong     
optional ftd.shadow hover-shadow:      
boolean $is-hover: false

Lang:

ftd

And then in the button we will add the events.

$on-mouse-enter$: $ftd.set-bool($a = $button.is-hover, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $button.is-hover, v = false)

Lang:

ftd

And to the shadow we will add if condition.

shadow if { button.is-hover }: $button.hover-shadow

Lang:

ftd

The button component where it is called.

-- ftd.column:
background.solid: white
width: fill-container
align-content: center
height.fixed.px: 280


-- button: Get a Demo
hover-shadow: $s
border-color: $shadow-color
text-color: $monochrome-dark
bg-color: $monochrome-light
link: https://fastn.com/expander


-- end: ftd.column

Lang:

ftd

Closing remarks

There you go, we have polished the UI and it looks similar to our original UI with our own touch to it. I hope you have learnt with me and found this video easy to follow. If you like us, you can give us a ✨ on GitHub.

Also, we would love to see your package which you will create following this video. You can share it on the discord's "show-and-tell" channel. Thank you guys.

Final video