IMDT CSS

Utility - layouts

Utility: layouts

Be aware layout on this page is different to better display layouts

Please use the handle in the bottom right hand corner of examples to resize the layout.

.grid class

The .grid layout is not a page layout, it is intended for positioning elements (like buttons or form elements) for listing multiple items.

Basic two items example

One
Two

Basic three items example

One
Two
Three

Basic example with more items

One
Two
Three
One
Two
Three
One
Two
Three

Code example

  <p>Basic two items example</p>
  <div class="grid resize card">
      <div class="card">One</div>
      <div class="card">Two</div>
  </div>
  
  <p>Basic three items example</p>
  <div class="grid resize card">
      <div class="card">One</div>
      <div class="card">Two</div>
      <div class="card">Three</div>
  </div>
  
  <p>Basic example with more items</p>
  <div class="grid resize card">
      <div class="card">One</div>
      <div class="card">Two</div>
      <div class="card">Three</div>
      <div class="card">One</div>
      <div class="card">Two</div>
      <div class="card">Three</div>
      <div class="card">One</div>
      <div class="card">Two</div>
      <div class="card">Three</div>
  </div>

.flex class

Similar to grid layout but hanging items will span the full space available.

The .grid layout is not a page layout, it is intended for positioning elements (like buttons or form elements) for listing multiple items.

Basic two items example

One
Two

Basic three items example

One
Two
Three

Basic example with more items

One
Two
Three
One
Two
Three
One
Two
Three

Code example

  <p>Basic two items example</p>
  <div class="flex resize card">
      <div class="card">One</div>
      <div class="card">Two</div>
  </div>
  
  <p>Basic three items example</p>
  <div class="flex resize card">
      <div class="card">One</div>
      <div class="card">Two</div>
      <div class="card">Three</div>
  </div>
  
  <p>Basic example with more items</p>
  <div class="flex resize card">
      <div class="card">One</div>
      <div class="card">Two</div>
      <div class="card">Three</div>
      <div class="card">One</div>
      <div class="card">Two</div>
      <div class="card">Three</div>
      <div class="card">One</div>
      <div class="card">Two</div>
      <div class="card">Three</div>
  </div>

.grid sidebar page layout

This is a simple responsive two-column, sidebar page layout that builds on the '.grid' style and displays with the sidebar on the left '.grid.sidebar-left' or right '.grid.sidebar-right'.

This layout reverts to block display on screens less that 480px.

To test these, use the browser window to resize and test this layout responding.

Sidebar on the left.

Sidebar

Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quas sed praesentium fugiat facilis soluta quam qui ad perspiciatis doloremque illo non repellendus, placeat, culpa ullam quidem dolorum provident molestias.

Sidebar on the right.

Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quas sed praesentium fugiat facilis soluta quam qui ad perspiciatis doloremque illo non repellendus, placeat, culpa ullam quidem dolorum provident molestias.

Sidebar

Code example

  <div class="grid sidebar-left resize card">
      <div class="card">
          <h3>Sidebar</h3>
          <nav>
              <ul class="unstyled">
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
              </ul>
          </nav>
      </div>
      <div class="card">
          <h3>Content</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quas sed praesentium fugiat
              facilis soluta quam qui ad perspiciatis doloremque illo non repellendus, placeat, culpa
              ullam quidem dolorum provident molestias.</p>
      </div>
  </div>
  
  <p><strong>Sidebar on the right.</strong></p>
  
  <div class="grid sidebar-right resize card">
      <div class="card">
          <h3>Sidebar</h3>
          <nav>
              <ul class="unstyled">
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
                  <li><a href="#">Link to nowhere</a></li>
              </ul>
          </nav>
      </div>
      <div class="card">
          <h3>Content</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quas sed praesentium fugiat
              facilis soluta quam qui ad perspiciatis doloremque illo non repellendus, placeat, culpa
              ullam quidem dolorum provident molestias.</p>
      </div>
  </div>
Utility - color contrast

Text contrast

The class '.contrast-text' expects three custom properties '--r', '--g' and '--b' these represent red, green and blue in an RGB colour.

Setting the rgb properties for the class will set the background color to that rgb value and will apply either black of white text depending on contrast ratio.

NOTE: This is not perfect and there will occasionally be cases where WCAG contrast ratios are not met in all scenarios as the class cannot take font size into consideration.

This is some text for the values "--r: 19; --g: 133; --b: 117".
This is some text for the values "--r: 49; --g: 43; --b: 57".
This is some text for the values "--r: 255; --g: 194; --b: 61".
This is some text for the values "--r: 196; --g: 218; --b: 240". 
<div class="contrast-text" style="--r: 19; --g: 133; --b: 117">
    This is some text for the values "--r: 19; --g: 133; --b: 117".
</div>

<div class="contrast-text" style="--r: 49; --g: 43; --b: 57">
    This is some text for the values "--r: 49; --g: 43; --b: 57".
</div>

<div class="contrast-text" style="--r: 255; --g: 194; --b: 61">
    This is some text for the values "--r: 255; --g: 194; --b: 61".
</div>

<div class="contrast-text" style="--r: 196; --g: 218; --b: 240">
    This is some text for the values "--r: 196; --g: 218; --b: 240".
</div>
Utility - Inline text classes

.bold

For use when semantic emphasis on the importance of the text is not required and the change should be only visual.

You can use the b tag or the .bold class to apply the visual style to text.

<p>You can use the <b>b tag</b> or the <span class="bold">.bold class</span> to apply the bold visual
  effect to text.</p>

.italic

For use when semantic emphasis on the importance of the text is not required and the change should be only visual.

You can use the i tag or the .italic class to apply the visual style to text.

<p>You can use the <i>i tag</i> or the <span class="italic">.italic class</span> to apply the visual
  style to text.</p>

.strike

For use when semantic emphasis on the importance of the text is not required and the change should be only visual.

You can use the s tag or the .strike class to apply the visual style to text.

<p>You can use the <s>s tag</s> or the <span class="strike">.strike class</span> to apply the visual
  style to text.</p>

.underline

For use when semantic emphasis on the importance of the text is not required and the change should be only visual.

You can use the u tag or the .underline class to apply the visual style to text.

<p>You can use the <u>u tag</u> or the <span class="underline">.underline class</span> to apply the visual
  style to text.</p>
Utility - Striped class

.striped

The utility class '.striped' when applied to tha parent element will alternatively stripe child elements using custom properties (--striped-odd-bg, --striped-odd-fg, --striped-even-bg, --striped-even-fg).

There are also properties for row hover background and foreground specific to tables.

There is also an additional .bordered class that can be used alongside .striped to add borderes on striped elements

  • One
  • Two
  • Three
  • One
  • Two
  • Three

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae labore eos.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae labore eos.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae labore eos.


<ul class="striped bordered">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<ul class="striped" style="--striped-odd-bg: black; --striped-odd-fg: grey">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<div class="striped" style="--striped-odd-bg: navy; --striped-odd-fg: white">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse
    totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae labore
    eos.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse
    totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae labore
    eos.</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis nulla et iure pariatur esse
    totam molestiae nisi, ea facere, sint praesentium recusandae, optio sed ab! Recusandae eum quae labore
    eos.</p>
</div>
Utility - Range input

.range

Native range inputs are notoriously varied in appearance across browser. There is a simple utility class '.range' that can be applied to make the styling more consistent but using it prevents the use of ticks (although many browsers don't support ticks or tick labels in case they became more common we have decided not to completely override native ranges). 
<label for="ranger">Class 'range' applied: </label>
<input type="range" name="ranger" id="ranger" class="range">



Other Stuff

Palette

There are 20 colours in each palette; the Dark palette is full of dark colours and contrasts with white, the light palette is full of light colours and contrasts with black.

You can use them by apply the classes .palette and either .light or .dark on the parent element.

You can then either apply the colours to children using .bg{1-20} or apply the additional class to the parent palette-auto which will dynamically apply colours to the parent;y immediate children.

There is also .palette.bordered helper class that applied a border to the palette and it's immediate children.

It is recomended, that the palette colours have a seperator of their contrasting colour (dark = white, light = black), this ensures wcag rules for adjacent elements is always met against neighboring visual items (e.g. other segments, page background or border), if this is not possible please consider using patterns or being able to configure it.

Dark Palette Manual
  • .bg1
  • No class applied
  • .bg20
<ul class="palette dark bordered">
<li class="bg1">.bg1</li>
<li>No class applied</li>
<li class="bg20">.bg20</li>
</ul>
Dark Palette Auto
  • 👍
  • 👍
  • 👍
<ul class="palette palette-auto dark bordered">
<li>👍</li>
<li>👍</li>
<li>👍</li>
</ul>
Light Palette Manual
  • .bg1
  • No class applied
  • .bg20
<ul class="palette light bordered">
<li class="bg1">.bg1</li>
<li>No class applied</li>
<li class="bg20">.bg20</li>
</ul>
Light Palette Auto
  • 👍
  • 👍
  • 👍
<ul class="palette palette-auto light bordered">
<li>👍</li>
<li>👍</li>
<li>👍</li>
</ul>
Patterns

Patterns can be abblied using pattern.pat{1-20} to palette children or dynamically by applying .pattern-auto to the element with the .palette class

Patterns can be used on both palettes

When applying patterns the helper class .pallete-txt can be used on child elements.

  • .pattern.pat1
  • No pattern classes
  • .pattern.pat5
  • .pattern.pat20 
<ul class="palette palette-auto light bordered">
<li class="pattern pat1">
<span class="pattern-txt">
  .pattern.pat1
</span>
</li>
<li>No pattern classes</li>
<li class="pattern pat5">
<span class="pattern-txt">
  .pattern.pat5
</span>
</li>
<li class="pattern pat20">
<span class="pattern-txt">
  .pattern.pat20
</span>
</li>
</ul>
  • 👍
  • 👍
  • 👍
  • 👍
  • 👍
<ul class="palette palette-auto pattern-auto dark">
<li><span class="pattern-txt">👍</span></li>
<li><span class="pattern-txt">👍</span></li>
<li><span class="pattern-txt">👍</span></li>
<li><span class="pattern-txt">👍</span></li>
<li><span class="pattern-txt">👍</span></li>
</ul>