Header
Used to set the width and height of elements on a page.
Our classes for width and height have both static values(in pixels) and fluid(in percentages). Sizing classes take on
the syntax of .{property}-{sizing value}
.
Elements can be given static values in pixels. The current set of static values are : 0, 10px, 20px, 30px and 40px.
<div className="w-10"></div>
<div className="w-20"></div>
<div className="w-30"></div>
<div className="w-40"></div>
Fluid width values are represented in percentages. The values are in multiples of 10 and range from a minimum of 0 to a maximum of 100.
<div className="w-10p"></div>
<div className="w-20p"></div>
<div className="w-30p"></div>
<div className="w-40p"></div>
<div className="w-50p"></div>
Height of an element is represented mostly in static values. These values are similar to our spacing values i.e. in multiples of 4 and can range from 0-15(0 to 60px).
<div className="h-1"></div>
<div className="h-2"></div>
<div className="h-3"></div>
<div className="h-4"></div>
<div className="h-5"></div>
<div className="h-6"></div>
<div className="h-7"></div>
<div className="h-8"></div>
<div className="h-9"></div>
<div className="h-10"></div>
<div className="h-11"></div>
<div className="h-12"></div>
<div className="h-13"></div>
<div className="h-14"></div>
<div className="h-15"></div>