Dihya theme

Posted on Thu 03 August 2017 in Software Engineering

Nota Bene: This is a work in progress. Meaning that this article will be lengthy and regularly updated as time goes on.

I want to change how my website looks like. That is why I decided to implement a theme I named after the queen Dihya who, during the 7th century, fought against the Islamic and Arabic colonialism of North Africa which, thanks to the pervert, racist, terrorist, pedophile, and bloody prophet of Islam, Muhammad the pirate, is nowadays a land of widespread corruption, ignorance and violence.

I am mainly using Jinja2 and Bootstrap4 front end frameworks. Actually, Bootstrap4 is in its alpha version; I know alpha software must not used for production, but I am just curious to see how things are evolving on. If by the end I need to re-code this or that feature, it will not cost me anything. Even if it is not a good practice habit, I see no harm in open sourcing the draft already on GitHub.

Navigation bar

I want to improve the UX by pushing farther the simplicity of my website. Right now, I am not satisfied how the navigation bar looks like because whatever the visitor clicks on, he/she has first to scroll down to see the content.

Design

This is how the navigation bar should look like as UX principles prove to be more effective:

Navbar mobile version

And this is how it should look like on larger screens:

Navbar desktop version

Implementation
  • Even if it is not required, I prefer to wrap the navigation bar in a .container class.
  • I used the semantic HTML5 element <nav> to create the navigation bar. I then ask the navigation bar to toggle at md breakpoint using .navbar-toggleable-md class.
  • I wrote a custom .navbar-custom class to set my favorite background color for the navigation bar as well as to define the links' color.
  • To display the humburger-like icon, I used .navbar-toggler-icon on the non semantic <span> element which itself is wrapped by a <button> element.
  • I wrap the links with <ul> elemnt on which I apply the .navbar-nav class.
  • Each <li> element wraps an <a> link. I applied .nav-item and nav-link classes on them respectively as suggested by the documentation.
  • I put my own name as my website's "logo" within the .navbar-brand class.