Sizing

Used to set the width and height of elements on a page.

Class Reference

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}.

Static Width

Elements can be given static values in pixels. The current set of static values are : 0, 10px, 20px, 30px and 40px.

Class
Output
.w-0
width: 0px;
.w-10
width: 10px;
.w-20
width: 20px;
.w-30
width: 30px;
.w-40
width: 40px;
.wmx-40
max-width: 40px;

Example

.w-10
.w-20
.w-30
.w-40
<div className="w-10"></div>
<div className="w-20"></div>
<div className="w-30"></div>
<div className="w-40"></div>

Fluid Width

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.

Class
Output
.w-0
width: 0px;
.w-10p
width: 10%;
.w-20p
width: 20%;
.w-30p
width: 30%;
.w-40p
width: 40%;
.w-50p
width: 50%;
.w-60p
width: 60%;
.w-70p
width: 70%;
.w-80p
width: 80%;
.w-90p
width: 90%;
.w-100p
width: 100%;
.wmx-70p
max-width: 70%;

Example

.w-10p
.w-90p
.w-20p
.w-80p
.w-30p
.w-70p
.w-40p
.w-60p
.w-40p
.w-60p 
<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

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).

Class
Output
.h-0
height: 0px;
.h-1
height: 4px;
.h-2
height: 8px;
.h-3
height: 12px;
.h-4
height: 16px;
.h-5
height: 20px;
.h-6
height: 24px;
.h-7
height: 28px;
.h-8
height: 32px;
.h-9
height: 36px;
.h-10
height: 40px;
.h-11
height: 44px;
.h-12
height: 48px;
.h-13
height: 52px;
.h-14
height: 56px;
.h-15
height: 60px;
.h-100p
height: 100%;

Example

.h-1
.h-2
.h-3
.h-4
.h-5
.h-6
.h-7
.h-8
.h-9
.h-10
.h-11
.h-12
.h-13
.h-14
.h-15
<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>
Back to: Position
See next: Spacing

CONTENTS