Widths and Heights

Width Utilities

This utility allows you to apply a set width (and height) to any block element including:

• <img> elements
• <div> elements

CSS

.width-15 {
    width:15px;
    height:15px;
    max-width:100%;
}

All Available Width Classes

• .width-15
• .width-25
• .width-30
• .width-35
• .width-50
• .width-75
• .width-100
• .width-125
• .width-150
• .width-200
• .width-250
• .width-300
• .width-350
• .width-400

Responsive Height Utilities

Because we have not been using Flexbox in this design framework, we needed a way to control the height of multiple block elements at once, so they can have uniform height and respond to browser width uniformly.

We created this utility to do just that. You can apply the following class to any block element:

.height-*-50

• * = which browser width you'd like this height to apply to (see Responsivity below)
• 50 = the height of the block in pixels

All Available Height Classes

• .height-*-12
• .height-*-25
• .height-*-50
• .height-*-60
• .height-*-75
• .height-*-90
• .height-*-100
• .height-*-105
• .height-*-110
• .height-*-115
• .height-*-120
• .height-*-125
• .height-*-140
• .height-*-150
• .height-*-160
• .height-*-175
• .height-*-200
• .height-*-225
• .height-*-250
• .height-*-275
• .height-*-300
• .height-*-325
• .height-*-350
• .height-*-375
• .height-*-400
• .height-*-425
• .height-*-450
• .height-*-475
• .height-*-500
• .height-*-525
• .height-*-550
• .height-*-575
• .height-*-600
• .height-*-650
• .height-*-700
• .height-*-750
• .height-*-800
• .height-*-850
• .height-*-900
• .height-*-950
• .height-*-1000
• .height-*-1100
• .height-*-1200
• .height-*-1300
• .height-*-1400
• .height-*-1500

Responsivity

The responsivity of this utility is modeled directly after Bootstrap's Grid classes.