This framework is built on top of Normalize.css, which acts as the CSS reset to maintain consistency across the browsers. If you wish to know more about it then head over this guide, you can find the repository link in the guide as well.
Since the whole framework is made using SASS (a CSS preprocessor), this framework did not use the CSS version of the Normalize.css, but the SCSS version. Also, it is the optimized version of Normalize.css to reduce the file size.
Even though the base is purely based on Narmalize.css, there are few additional features added in it which are basic as well as important in terms of framework.
Contianer
Standard container
The most basic required element is the container, which uses approx. max-width: 82ch. It will be always horizontally centered in the page. You can utilize this container to hold your grid structure.
<div class="phi-container"></div>Full iwdth container
This container will use available width up to 100vw. So if you have a requirement of the full-screen web page, you can use this container to hold the grid.
<div class="phi-container-full"></div>Responsive images
To make an image responsive, add the class phi-image in the <img> tag so that it will always scale according to the viewport width. If you are using a desktop browser, try to resize the browser window. The image won't get overflow beyond the border of the output element, will always stay within the element.
<img class="phi-image" src="/images/M101.jpg"></img>