(Part 2) How to create an Angular 17 Magazine using headless WordPress APIs (Standardize CSS and Install Angular Materials)

In this chapter, we will standardize the CSS that we will be using in our Angular application to be able to stabilize cross-browsing compatibility and after that we will install Angular Materials components and its CSS styles to homogenized the global look and feel of our web application

To standardize our CSS styles, we need to edit our global styles.css file located under ./app/styles.css

CSS Standardization

In our ./app/styles.css file, which initially is empty, we will add these blocks of CSS codes, in the following order:

1. Reset CSS: is used to reduce cross browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The code we need to copy and paste in our styles.css file can be found at: http://meyerweb.com/eric/tools/css/reset/
2. Normalize CSS: makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. The code we need to copy and paste in our styles.css file can be found at: https://necolas.github.io/normalize.css/8.0.1/normalize.css
3. Box Sizing Hack: the box-sizing property allows us to include the padding and border in an element’s total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height. The code we need to copy and paste in our styles.css file can be found at: https://www.paulirish.com/2012/box-sizing-border-box-ftw/ or https://css-tricks.com/box-sizing/#aa-vendor-prefixes
4. ClearFix Hack: for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout.  Learn more: https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/ .The code we need to copy and paste in our styles.css file can be found at: http://nicolasgallagher.com/micro-clearfix-hack/

IMPORTANT NOTE: Please do not change the order in which we are playing our CSS standardization, or at least do not change the first 2 points, because we need to reset to remove initials cross browsing CSS incongruences and them, we need to normalize them.

Angular Materials Installation

For the installation of angular Materials, please watch this video from AyyazTech

Angular Materials Test

Changing Angular Materials colour theme