Make a better looking website the hard way

    In part one we covered the fundamental concepts to making a better designed website and some tools to use to do it. Now that you know how to make consistent color schemes, and know that everything on the page craves uniformity, how do we make it all uniform?

Compartmentalization

    This is more of a concept that a concrete idea and also applies to all of coding more than just web design, but the principle is important and I'll cover it to reiterate the importance. The easiest way to make every button on the page look the same is to use the same button on every page. It can have a different action on every page, but using the same component in React, or the same CSS class in vanilla JS on every similar button on a site inherently makes it uniform because there is no room for variation in the same code. Since this is a CSS and design based series, I'll skip the React component approach and focus on CSS classes.
   The general rule of thumb in CSS is that every element on the page has a unique ID tag, but classes are helpful to spread style along many different elements on a page. To give elements a class in HTML simply say:

<input type="submit" class="generic-button" value="Submit"/>
<button class="generic-button"/>Prev</button>
<button class="generic-button"/>Next</button>

To style these button in CSS use the "." identifier followed by the class name:

.generic-button {
  color: white;
  background-color: red;
  width: fit-content;
  border-radius: 10px;
}

Which yield these generic buttons:

   So now any button on our page can still be singled out with a unique ID to have special actions, but given this class will now, without any extra effort, be styled the same as every button on the page upon its first render regardless of functionality.

   But what happens when we want the submit button to have some different properties than the other two, while still maintaining the existing style? We could copy and paste the code into a different class, or we can chain classes together with spaces... Let's see it in action:

<input type="submit" class="generic-button submit" value="Submit"/>
<button class="generic-button"/>Prev</button>
<button class="generic-button"/>Next</button>

All we did now is add a space in the class field, so now it's "generic-button submit". If we add another class style in the css:

.generic-button {
  color: white;
  background-color: red;
  width: fit-content;
  border-radius: 10px;
}

.submit {
  background-color: green;
}

We get the results:

    How did the button turn green and maintain the border radius and font color?!?!

   Well the answer is in the name of the language. It's a Cascading Style Sheet (CSS). This means that we start at the top applying a rule and then we apply more rules and overwrite existing rules (also using specificity rules) as we read further through the file. So now we can add multiple classes to a single element, to set a base style, then sprinkle extra on top to add small unique touches to match functionality and improve flow.
  The takeaway here is write less lines of code, and keep things consistent by compartmentalizing classes in CSS to apply just as much style as necessary to keep it usable on as many elements as possible without ever rewriting the same code.

Dynamic spacing

    This section is the bane of every web developers existence. How to keep a website looking consistent on every device in a world of thousands of screen resolutions. Before making any styling decisions establish what client you are dealing with, since it's a mobile world now. In javascript you can find client-type by using a function similar to this:

 let getDeviceType = () => {
    if(navigator.userAgent.match(/mobile/i)) {
        return 'Mobile';
    } else if (navigator.userAgent.match(/iPad|Android|Touch/i)) {
        return 'Tablet';
    } else {
        return 'Desktop';
    }
}

And using CSS you can use @media queries like screen width to determine the device being used (see more on mobile formatting here)

@media only screen and (max-width: 600px) {
  /*Mobile styles here for devices less than 600px wide*/
}

Now that we have device type established we can start making layouts that scale correctly across all the devices on the web, but how?

Using dynamic spacing! This means that setting the height of your menubar to 200px is a no go. Because 200px is a much different percentage of your MacBook pro display than it is an of a Nexus 4 phone. But this is an easy fix, because CSS has a handy Percent% unit to fix this! CSS actually has 15 different units used to size things. 6 absolute units (units that never change or scale regardless of device)

And 9 relative units

These units make the elements different sizes depending on the screen size (viewport) and propagates down to change the size of children who rely on parent size (percent%) so now on every device the elements will all fit perfectly and scale as you use your phone on change resolution on pc.

(Quick aside about scaling. People with vision impairment rely on the zoom feature to better see your site and read its text so don't set things like font size to things like viewport height because they will always remain the same size regardless of zoom).

    Now you have to tools to build sites that display evenly on different devices, while maintaining consistent styling and keeping functionality! All that's left for you to do is come up with a great idea and implement it! Easy!

Resources: w3 schools CSS units