ITL utility_classes

ITL utility_classes

Source: _layout.scss, line 1

4.1 Display types

Quick classes to change the display

  • .inline: display: inline
  • .inline-block: display: inline-block
  • .block: display: block
  • .hidden: display: none

Example

Example
<div class="h50 bg-blue">
 <div class="inline-block p16 bg-red">Example</div>
</div>

Source: _layout.scss, line 38

4.2 Positioning

Quick classes to change the position

  • .fixed: position: fixed
  • .absolute: position: absolute
  • .relative: position: relative

Example

Relative container div
Normal div
Absolute top div
<div class="relative bg-red p64">Relative container div
 <div class="bg-yellow"> Normal div </div>
 <div class="absolute t0 bg-blue">Absolute top div</div>
</div>

Source: _layout.scss, line 65

4.2.1 Placement

@mixin absolute-cover @mixin pseudo-cover -- use on a :before or :after to cover node To change position of fixed and absolute elements use these classes:

  • .t<X>: Changes the top value to X

  • .r<X>: Changes the right value to X

  • .b<X>: Changes the bottom value to X

  • .l<X>: Changes the left value to X

  • .absolute-cover: makes element cover its relative parent

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

Source: _layout.scss, line 115

4.3 Flex

@mixin flex-center @mixin flex-column

  • .flex: sets display to flex
  • .flex-column: creates a flex column
  • .flex-row: creates a flex row
  • .flex-shrink: makes the ele shrinkable to fit flexparent
  • .flex-grow: makes the ele consume empty space of flexparent
  • .flex-start: places the ele at start of flexparent
  • .flex-end: places the ele at the end of flexparent
  • .flex-center: places its child at the center

Example

LOGO
Menu
1
2
3

Test text

<div class="flex-row">
  <div class="flex-center w100 bg-red">LOGO</div>
  <div class="flex-grow flex-end  bg-green p4"> Menu </div>
</div>
<div class="flex-row">
  <div class="flex-column w100">
    <div class="bg-blue">1</div><div class="flex-grow bg-green">2</div><div class="bg-blue">3</div>
  </div>
  <div class="flex-grow bg-yellow">
     <h1 class="title h128">Test text</h1>
  </div>
</div>

Source: _layout.scss, line 184

4.4 Spacing

@mixin space-between @mixin space-around

  • .space-between: justify-content: space-between
  • .space-around: justify-content: space-around

Example

<div class="space-between bg-eee">
<button class="button">cta1</button><button class="button">cta2</button><button class="button">cta3</button>
</div>
<div class="space-around bg-gray">
<button class="button">cta1</button><button class="button">cta2</button><button class="button">cta3</button>
</div>

Source: _layout.scss, line 223

4.5.1 Centering

@mixin flex-center

  • .m-auto: absolute centering (block in block)@child
  • .m0-auto: horizontal center (block in block)@child
  • .center: horizontal center (inline in block)@parent
  • .flex-center: centers everything @parent
  • .items-center: horizontal centering baseline@parent

Example

<div class="flex-center wp100 h200 bg-red">
 <div class="bg-white w16 h16"></div>
</div>
<div class="relative inline-block w200 h200 bg-blue">
 <div class="absolute absolute--fill m-auto bg-red w16 h16"></div>
</div>
<div class="relative inline-block w200 h200 bg-blue">
 <div class="m0-auto bg-red w16 hp100"></div>
</div>

Source: _layout.scss, line 259

4.5.2 Floating

  • .float-left: float: left
  • .float-right: float: right

Source: _layout.scss, line 275

4.5.3 Text align

  • .left-align: left aligns text
  • .right-align: right aligns text
  • .center: centers text