Building the Theme for BipolarLife.net

Hi Lovelies, it is nice to speak with you again. For some reason, out of the blue, I decided to design a new theme for one of my websites. The Web Dev Bootcamp is inspiring. I wanted to try out some new techniques. I wanted to do a little bit of JavaScript and try it out using Flexbox.

While I always design for WordPress, I decided against using a block-based theme. I know it is the future and that I need to learn. It just seems to be in this awkward phase. I want to see how things shape up by the end of the year. I feel like being a late adapter will pay off dividends as people figure things out.

Some opinions on Gutenberg for WordPress

I’m going to go over some of the decisions that I made.

Responsive Typography

The first decision I made was to use rem instead of em for my typography. It is a change that I should have done long ago for accessibility. If you use rem units, it is easier for a person to change the font size. Also, I didn’t realize em could be so dangerous until I watched this video.

Just how crazy things can get with ems

For most of my typographic choices, I copy & pasted from my good starter, Kraken. I am just so used to it now that I didn’t want to repeat the work. That’s all I took this time. I very purposefully didn’t want to work with any pre-made grids. I wanted to try my hand with Flexbox.

Working with Flexbox

I was pretty uncomfortable using it for the first time. I did check out Brad Traversy’s video on Flexbox too. 

Flexbox Froggy– A cute game that teaches you about Flexbox.

A Complete Guide to Flexbox – CSS-Tricks goes over all you need to know to get started with Flexbox. The examples were really helpful.

How to build a Navigation Bar with CSS Flexbox – A re-creation of the Free Code Camp Nav Bar.

I was able to successfully implement Flexbox between these resources.

The Nav Bar

Creating the Nav Bar was the best use of Flexbox. A beauty that doesn’t use any floats! I’m so in love with this and it was super simple to set up.

Nav Bar for Bipolar Life

Lining up the Logo and the links was super easy.

Content & Sidebar

I also used Flexbox to do the columns for the main content and sidebar.

It did not go as well. I got it to work fine when I was creating my mock-up in HTML. I always design this way for CSS purposes. I don’t work on a design in WordPress first. So many things can go technically wrong. I want to see things working at their simplest.
With trial and error, I was able to get the layout right.

Then I started working on the WordPress theme when everything broke. I was in tears. I thought perhaps that it was a bug and that it wouldn’t work at all.

facepalm

I messed up my class names.

Correcting this fixed everything.

It worked beautifully, but I don’t think it was the best method.

Sticky Navigation

I wanted to test out some JavaScript skills. The first thing I wanted to try is a sticky nav. This takes only like a paragraph of code. Mission was a success.

Responsive Menu

The next goal was to make a responsive menu. I achieved this by creating two menus, one for desktop and one for smaller screens. I used the display:none; to hide the menu that wasn’t in use. Then on the small screens, I created a button that replaces the header. It toggles a menu that is a vertical list. Again, only a paragraph of code!

Active Class

I wanted to do that thing where an underline appears under a link for the active page. I couldn’t get it to work when I started developing the WordPress theme. I’m not sure how to fix it. I’m highly debating uploading my HTML project to GitHub so people can see a working website.

Update: Fixed. It isn’t a Jquery or JavaScript thing. There is a “current-menu-item” class included when you register the menu with WordPress. You can style with CSS.

Glitches

There are two glitches in the WordPress theme that don’t make me happy. I’m not sure right now how to fix them. They don’t impact the functionality of the website. So I’m okay with using it for now. I’m going to take a rest period and try to come back at it with fresh eyes.

Disappearing Sidebar

When I’ve logged in as admin, the sidebar shows on the front page. It disappears when I log out. I have no clue why this is happening. It is very frustrating. It is a weird error.

Update: The cause was a plugin conflict. The sidebar appears on the front page now.

Pagination

The weirdest thing also happens on parts of the website with pagination. The div attaches itself to the header. I need to check my CSS code to see if there were any shared classes or ids. I am not sure what is causing this and will have to look into it more.

Update: This was due to the way that I styled the nav for the sticky menu. The pagination menu also wraps itself in nav tags. That caused the application of the sticky menu style. I switched the CSS for the sticky navigation from nav to the menu ID of #navigation. That fixed it. I think that I will always make sure to style classes or IDs from now on.

There will be a Part 2

I wanted to make it look better for one. It is still a simple and minimal website. It would be cool to do some more simple things with JavaScript and CSS. One thing I want to add is animation.

As always, a work in progress. I’m very proud of what I achieved!

You can check it out here

https://bipolarlife.net.