In this video we will learn how to create a `holy-grail` layout.
Holy-grail layout
The most commonly used layout for websites is the `holy-grail` layout. This
layout is designed to optimize the use of screen space by dividing the webpage
into three main sections:
- a header at the top
- a main content area in the
center, and sidebars on both sides.
- a footer
Let's learn how to create this layout.
`home-page` component
We will start by creating a component that will be for the entire page.
The three parts of the home-page, ie the header, the main part and the
footer part, are aligned in from top to down manner.
So, inside the component `home-page` we will use `ftd.column`.
We have given some properties width, padding, and background color to the row,
note, we are using `$inherited` for background color so that if we use any
color-scheme, it will take the background-color defined in that color-scheme.
And for now, I have given a child to the row as ftd.text with it's inherited
role.
We have one component header ready, we can display it. So before we move ahead,
let's comment others (main and footer) and display header
by calling the component `home-page`. To call it we will write:
-- home-page:
Lang:
ftd
So we have the header in our page.
Main component
Now, similarly, we will build the main area.
As I have mentioned, in the `holy-grail` layout main area has three parts,
which is in left-to-right manner therefore we will put them in a row.
This is the left-sidebar component. Inside the container component column of
width of 25% has a child `ftd.text`.
Similarly, I have created the two components, one for the content, the other
for the right-sidebar.
Since we have already called them in the main-area component.
Let's see the main area in the browser. So we will remove the comment where
the main component is called.
footer component
Last but not the least, let's create the component for footer.
In this component, just like header, we have a row, which has a text. Just the
padding value is different.
Our footer is also ready, so we can remove the comment in the home-page and
Save and refresh the browser.
Now we have the complete `holy-grail` layout for the home-page.
I hope you have found this layouting using `fastn` language easy.
Before we close this, let's see the basic way to add the header links.
In the package, I have created 3 dummy files that will repesent the sections.
And, inside the row of the header component, we will add another row and
to this row we will give three sections as text.
And for formatting, to the parent row, I have added spacing between these two
sections, `ftd.text` and `ftd.row`.
Thank you guys, keep watching these videos to learn more about fastn.
Support us by giving a star on [GitHub](https://github.com/fastn-stack/fastn/)
and join our fastn community on [Discord](/discord/).
Support `fastn`!
Enjoying `fastn`? Please consider giving us a star ⭐️ on
[GitHub](https://github.com/fastn-stack/fastn) to show your support!
[⭐️](https://github.com/fastn-stack/fastn)
Getting Help
Have a question or need help?
Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a)
to get answers and subscribe to it to stay tuned.
Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your
thoughts, suggestion, question etc.
Connect with our [community](/community/)!
[💻️](/community/)
Found an issue?
If you find some issue, please visit our [GitHub
issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.
We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community
today.
We are trying to create the language for human beings and we do not believe it
would be possible without your support. We would love to hear from you.