Web Development: Day 1

Day 1 - NavBar Component

Today I undertook to develop a custom navigation bar from scratch for the first time since learning how to utilize the Bootstrap API. With a wireframe I drew over the weekend to guide me, a trial-by-fire refresher on flexboxes, and responsive CSS units, I wound up with a still in development Navigation bar that conformed with my skeletal mock-up.

Challenges

Historically, I've had difficulty tracking the display property when planning a front-end. I credit React's functional components with forcing me to think much more atomically about the DOM, and thus children elements and their inheritance.

globals.css

I knew that I wanted the NavBar to display on every single page across the application, so I scoped it's styling globally. To start, I set properties for the entire document:

html,
body {
  padding: 0;
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Next.JS adds in a root <div> with an id of __next. In order to frame the content of the application proportionally inside of the page, I added styling to this root element.

#__next {
  height: 83.3vh;
  width: 83.3vw;
  display: flex;
  flex-direction: row;
  align-items: center;
}

The NavBar itself consisted of five buttons evenly spaced out in a column. I wanted the buttons to all stretch to fill the same space regardless of their text input. Here's what I came up with:

.navbar {
  height: 83.3vh;
  width: 27.7vw;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.navitem {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar button {
  width: 16.6vw;
  height: 8.3vh;
}

Takeaways

Responsive Units

CSS has built-in units which make proportional, responsive sizing easy to do. vh and vw stand for 'viewport height' and 'viewport width,' respectively, and 1 unit of each represents 1% of the viewport's corresponding dimension. I used a straight-edge and pencil when developing the wireframe for the webpage, and I had anticipated a maze of

.nav { height: ??%; width: ??% }

in getting the page to render as desired. Instead, using some middle-school mathematics, I was able to quickly determine the desired sizes in relative terms that translated directly into vws and vhs. Not only does the sizing quickly translate, but it is already responsive.

Display

I left today thinking that the element that is receiving the display: flex property is being told "You will digest your immediate children in this matter." Cronus imagery aside, the flexbox reaches down only one level. This insight seriously assisted in reasoning out where and how each element would land.

Status Update

I ended the day with an extremely raw form of the navbar, but I am satisfied with it's geometry, so to speak. Tomorrow I'll take to building out the remainder of the homepage.