ITL utility_classes

7 Sizes

Source: _sizes.scss, line 1

7.1 Widths and Heights

w<X>: sets width to X

h<X>: sets height to X

.full-width, .wp100: sets width to 100%

.full-height, .hp100: sets height to 100%

X should be in: [0, 4, 8, 16, 32, 64, 100, 128, 200, 250, 256, 512]

Example

<div class="bg-blue w16 h16 inline-block"></div>
<div class="bg-yellow w32 h16 inline-block"></div>
<div class="bg-red w64 h32 inline-block"></div>
<div class="bg-green full-width h8"></div>

Source: _sizes.scss, line 20

7.2 Margins and Paddings

p<X>: sets padding to X

pt<X>: sets padding-top to X

pr<X>: sets padding-right to X

pb<X>: sets padding-bottom to X

pl<X>: sets padding-left to X

m<X>: sets margin to X

mt<X>: sets margin-top to X

mr<X>: sets margin-right to X

mb<X>: sets margin-bottom to X

ml<X>: sets margin-left to X

X should be in: [0, 4, 8, 16, 32, 64, 100, 128, 200, 250, 256, 512]

Example

<div class="bg-blue full-width h8 mb4"></div>
<div class="bg-red full-width h8 mb4"></div>
<div class="bg-yellow w256 h8 mr4 inline-block"></div><div class="bg-green w256 h8 mr4 inline-block"></div><div class="bg-black w256 h8 mr4 inline-block"></div>