Forum Redesign — React and Node Forum Part 2
Why I decided to start from scratch with the forum redesign.
Since the last article, I’ve done a chunk more work on the React front end to display the content from the NodeBB back end.
- I went through the same steps I did for displaying the categories to be able to display the topics for a given category
- I created a front end for displaying the messages in a topic
- I created a login screen
By this point, I had a front end that displayed most of the content that the forum would need to display. It wasn’t beautiful but it worked.
So I decided to rebuild the framework from the ground
Why would I do that since I had something that worked? There are two main reasons:
- I had been building and testing this with the output as a full-screen forum on my second monitor. This meant none of the styling worked on mobile (which is currently 45% of the forum users and will likely increase).
- I’ve recently been introduced to CSS Grid — an awesome new way to describe the layout of your pages.
Quick Intro to CSS Grid
CSS grid is a way to describe the shape of elements in your website more naturally. Showing you is easier than trying to explain it. Here’s my main app definition. It has a div called .ukband 4 child divs.
In the CSS all we need to do is to say that .ukb is displaying a grid and describe that grid. We describe the grid by defining the columns (6 each with a width of 1 fraction) and rows (4 with differing heights). We can then define what components are taking up which spaces, almost drawing out the layout.
To get this to work we need to define what header is so we add grid-area to the header class.
Repeat this for the footer, main and nav elements and we have ourselves a template!
OK, but why?
This is where the power of CSS Grid really shines. I said that almost half of the users are on mobile, and what if we want the mobile view to have the nav fixed to the bottom instead of the top? That would normally involve a LOT of CSS to get it all working.
With CSS Grid you can just redefine the grid template:
And get a completely different layout!
This means we can have completely different designs for mobile, desktop and tablet without spending ages hacking the CSS to work how we want it to.
Other Progress
As well as getting the basic layout working, I wanted the desktop navigation to stay stuck to the top of the page when scrolling down and the mobile navigation to always be attached to the bottom of the screen.
I found some code for making a stick nav bar, tested it out and then modified the CSS so that it would also work how I wanted on mobile.
And here is the result:
Thanks for following along with the progress of this full redesign. If you like this project then make sure to follow me to see how it all goes!
