Simple CSS Logo

Sizing

Sometimes you have some items that just have to be a certain size on the screen. Simplicity offers a few ways to make that happen.

Setting Relative Sizes

width

Class

Description

.w-25

width = 25%

.w-50

width = 50%

.w-75

width = 75%

.w-100

width = 100%

height

Class

Description

.h-25

height = 25%

.h-50

height = 50%

.h-75

height = 75%

.h-100

height = 100%

Setting Absolute Sizes

Height

Class

Description

.fh-50

height = 50px

.fh-100

height = 100px

.fh-150

height = 150px

.fh-200

height = 200px

.fh-250

height = 250px

.fh-300

height = 300px

.fh-350

height = 350px

.fh-400

height = 400px

.fh-450

height = 450px

.fh-500

height = 500px

Width

Class

Description

.fw-50

width = 50px

.fw-100

width = 100px

.fw-150

width = 150px

.fw-200

width = 200px

.fw-250

width = 250px

.fw-300

width = 300px

.fw-350

width = 350px

.fw-400

width = 400px

.fw-450

width = 450px

.fw-500

width = 500px