Building layout and styling pages

Introduction

In the previous article we created the Article service and we add some basic styling to it. This is a good starting point, but our page is still far from looking good and looking like a functioning website at all. There is no navigation, no footer and no homepage. We are going to tackle all of these problems in this article. Please remember to create a new branch for the changes we are about to do today.

Updating layout

Our pages need a frame which ensures that everything on the page is displayed properly, like for example centered on the page, with a proper header with the logo and navigation and a footer at the bottom of each page with social media links, general conditions, contact data or whatever else is needed.

Header

We are going to start by creating a component which will contain of a logo and some navigation links to our main pages. For this purpose we create , , and in .

Our Header component can have structure like this:

We have here the which will serve as a logo (I want the product of this course to be a template which anyone can easily customize). We also have links to our main pages which in our case are just homepage and articles page.

Not only that, but we should also add some testing to ensure everything works as expected. I think for such a simple component, one general test is enough.

Furthermore, we have to export this new component, so we can use it in the layout. To do so export it from both and .

Now the new component can be applied to the so we can see it on the page and style it.

Let's commit the changes to not lose track of our progress.

Footer

Now we also want to create a footer for our layout. In our case we are just going to add some dummy social media links (again, whoever uses this template can adjust what they need). We create the same set of files we did with but of course we now name them .

The footer can be as simple as:

It is really simple, just displaying few links, but in most cases this is enough. You can easily improve it by using icons instead of text, but we won't do this in scope of this article.

We want also to add a test to make sure it is all rendering as expected.

Also, we need to add exports to the files, the same way we did with Header component.

And use it in .

Now when it's all done we can commit the changes and start styling.

Styling layout

Now the time comes to run our blog and apply some styles. We start the development server with and open to see our creation.

As you can see it looks... Simple. Let's stick with simple despite some other adjectives might have crossed your mind.

To kick things off, let's create a file in and import it in the . We are also adding a class name of and to . The class will be added to as it will be a reusable utility class.

Inside the file we are going to apply some styles which will assure everything is kept in a proper space on the page.

And we also need the before mentioned which we add to .

It didn't do much yet, but we can see that something is going on.

We can navigate to one of the articles to maybe better see what's going on (or at least have some more content on the page). I've chosen JavaScript Best Practices: Tips and Tricks for Efficient Development. It looks better, but obviously we can see that we are missing styles for the header and footer we have created, so let's focus on those next.

Header and Footer

We can start with header. We do not need much, mostly removing the underline from the links.

This gives us the following result:

This looks cool, don't you agree? We added these cool separators between navigation links and there is also a color change on hover.

Now we can scroll to the bottom of the page to take care of footer.

Saving these should immediately apply these changes to the page and the result we can see now is looking like this:

Again, this is not much, but you must admit, it does the job pretty well and is a good base for further extensions.

Adding missing globals

What will happen now, if we go back to the homepage? This doesn't look right as the footer is not sticking to the bottom. This issue is a result of some missing styling to determine the minimum height of our page's content. We can solve this by adding some global styles to .

This will make sure that the content of all pages is at least one screen height and that the width is never more than the screen width. We also need to add to , so the layout grows to the size of the filling the space properly.

Before we move forward it is a good time to commit the changes

Articles page

Some of you probably already noticed playing around that something is wrong with the articles page. Every article is there printed out as a whole, with all the content being an underlined link. Also, if you look in the browser's console you can notice some DOM validation error. This is because we are having links in our articles and these are nested in the link to the whole article - this is the cause of the error. Having the whole article content in a link also results in everything being underlined as we do not add any styles to overcome this. The amount of content of the article should just be a brief preview instead of a whole thing as well.

Component

The best approach in my opinion, to solve all the above-mentioned problems is to create new variant of the Article component, which cuts the article text to just few dozens of words, removes all the links from the text and maybe look something like a card.

We are going to extend our existing Article to handle some of the responsibilities, but first we need a folder inside and the set of files we used to add before. We are starting with

And the test for it:

We are taking care of cropping the content, leaving only 50 words. This component is also providing a link to the article page. You can also see we are passing parameter to the Article. This new parameter will make sure to disable some interactivity from the article, so we do not have any DOM validation errors.

In Article, we are just passing this new parameter further to Markdown, as this is the place where all text rendering is happening.

Add new powers to Markdown component

We need to now make our Markdown and based on the new parameter, simplify the rendering. To be honest the only thing we are going to handle here is replacing all the links with s that are just going to imitate the link visually.

To do so we can manipulate the passed to (the property can be used to replace any of the HTML components with custom ones).

I have added here a function which replaces the link with a . Having a separate function just for this one component maybe is an overkill, but I know that most people (including me), will add more custom components.

I think a good idea is to add some global styles to the anchor tag.

Now whether it is a link or anything using the class, will look the same. But we can also save what we did at this point.

Updating articles page

With all the hard work we have done so far, we can finally style our articles page.

Summary

Now go to and admire the new, fresh and attractive look of our articles cards. We also can't see any errors in the console anymore!

And we have reached the end achieving all the goals we established at the beginning. The only missing piece here is a homepage content to have at least the minimum to call this page a functional blog. Nevertheless, there are countless ways we can make this project better like adding pagination to articles page or replacing more markdown components with custom ones. Maybe soon we will take a look at some of the possible extensions, but for now that's all! Don't forget to commit the changes, open a PR and merge it back to master.

See you all soon in another article!