@ou-imdt/css
Version:
The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.
697 lines (605 loc) • 27.3 kB
HTML
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="osep light a11y dark-a11y dark" />
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./themes/brand.css">
<link rel="stylesheet" href="./datavis-palette.css">
<style>
:root {
--card-border: 1px solid grey;
}
imdt-themer {
position: sticky;
top: 0;
width: 100%;
display: inline-block;
background: var(--bg, #fff);
border-bottom: 1px solid grey;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<script src="./imdt-themer.js"></script>
<script src="./vleapi.1.js"></script>
<body data-theme="" id="root">
<main>
<h1>
IMDT CSS
</h1>
<imdt-themer>
<button data-name="default">default</button>
<button data-name="brand">brand</button>
<!-- <button data-name="osep">osep</button>
<button data-name="light">light</button>
<button data-name="dark">dark</button>
<button data-name="a11y">a11y</button>
<button data-name="dark-a11y">dark-a11y</button> -->
</imdt-themer>
<div class="">
<div>
<details>
<summary>Utility - layouts</summary>
<h1>Utility: layouts</h1>
<p>Be aware layout on this page is different to better display layouts</p>
<p>Please use the handle in the bottom right hand corner of examples to resize the layout.</p>
<div>
<div>
<h2>.grid class</h2>
<p>The .grid layout is not a page layout, it is intended for positioning elements (like buttons or form
elements) for listing multiple items.</p>
<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>
<p>Code example</p>
</div>
<pre>
<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>
</pre>
</div>
<hr>
<div>
<div>
<h2>.flex class</h2>
<p>Similar to grid layout but hanging items will span the full space available.</p>
<p>The .grid layout is not a page layout, it is intended for positioning elements (like buttons or form
elements) for listing multiple items.</p>
<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>
<p>Code example</p>
</div>
<pre>
<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>
</pre>
</div>
<hr>
<hr>
<div>
<div>
<h2>.grid sidebar page layout</h2>
<p>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'.</p>
<p>This layout reverts to block display on screens less that 480px.</p>
<p>To test these, use the browser window to resize and test this layout responding.</p>
<p><strong>Sidebar on the left.</strong></p>
<div class="grid sidebar-left 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 card">
<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 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>
<p>Code example</p>
</div>
<pre>
<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>
</pre>
</div>
</details>
<details>
<summary>Utility - color contrast</summary>
<div class="grid">
<div>
<h2>Text contrast</h2>
<p>The class '.contrast-text' expects three custom properties '--r', '--g' and '--b' these represent
red,
green and blue in an RGB colour.</p>
<p>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.</p>
<p><strong>NOTE:</strong> 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.</p>
<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>
</div>
<pre>
<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>
</pre>
</div>
</details>
<details>
<summary>Utility - Inline text classes</summary>
<div class="grid">
<div>
<h2>.bold</h2>
<p>For use when semantic emphasis on the importance of the text is not required and the change should be
only visual.</p>
<p>You can use the <b>b tag</b> or the <span class="bold">.bold class</span> to apply the visual
style to text.</p>
</div>
<pre>
<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>
</pre>
</div>
<div class="grid">
<div>
<h2>.italic</h2>
<p>For use when semantic emphasis on the importance of the text is not required and the change should be
only visual.</p>
<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>
</div>
<pre>
<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>
</pre>
</div>
<div class="grid">
<div>
<h2>.strike</h2>
<p>For use when semantic emphasis on the importance of the text is not required and the change should be
only visual.</p>
<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>
</div>
<pre>
<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>
</pre>
</div>
<div class="grid">
<div>
<h2>.underline</h2>
<p>For use when semantic emphasis on the importance of the text is not required and the change should be
only visual.</p>
<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>
</div>
<pre>
<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>
</pre>
</div>
</details>
<details>
<summary>Utility - Striped class</summary>
<div class="grid">
<div>
<h2>.striped</h2>
<p>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).</p>
<p>There are also properties for row hover background and foreground specific to tables.</p>
<p>There is also an additional .bordered class that can be used alongside .striped to add borderes on
striped elements</p>
<ul class="striped bordered unstyled">
<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>
</div>
<pre>
<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>
</pre>
</div>
</details>
<details>
<summary>Utility - Range input</summary>
<div class="grid">
<div>
<h2>.range</h2>
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="ranger2">Class 'range' applied: </label>
<input type="range" name="ranger2" id="ranger2" class="range">
</div>
<pre>
<label for="ranger">Class 'range' applied: </label>
<input type="range" name="ranger" id="ranger" class="range">
</pre>
</div>
</details>
</div>
</div>
<br><br><br>
<h2>Other Stuff</h2>
<hr>
<div class="box">
<div><strong>Palette</strong></div>
<p>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.</p>
<p>You can use them by apply the classes <code>.palette</code> and either <code>.light</code> or
<code>.dark</code> on the parent element.
</p>
<p>
You can then either apply the colours to children using <code>.bg{1-20}</code> or apply the additional class
to the parent <code>palette-auto</code> which will dynamically apply colours to the parent;y immediate
children.</code>
</p>
<p>There is also <code>.palette.bordered</code> helper class that applied a border to the palette and it's
immediate children.</p>
<p><strong>It is recomended</strong>, 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.</p>
<details>
<summary>Dark Palette Manual</summary>
<ul class="palette dark bordered">
<li class="bg1">.bg1</li>
<li>No class applied</li>
<li class="bg20">.bg20</li>
</ul>
<pre>
<ul class="palette dark bordered">
<li class="bg1">.bg1</li>
<li>No class applied</li>
<li class="bg20">.bg20</li>
</ul>
</pre>
</details>
<details>
<summary>Dark Palette Auto</summary>
<ul class="palette palette-auto dark bordered">
<li>👍</li>
<li>👍</li>
<li>👍</li>
</ul>
<pre>
<ul class="palette palette-auto dark bordered">
<li>👍</li>
<li>👍</li>
<li>👍</li>
</ul>
</pre>
</details>
<details style="background: white; color: black">
<summary>Light Palette Manual</summary>
<ul class="palette light bordered">
<li class="bg1">.bg1</li>
<li>No class applied</li>
<li class="bg20">.bg20</li>
</ul>
<pre>
<ul class="palette light bordered">
<li class="bg1">.bg1</li>
<li>No class applied</li>
<li class="bg20">.bg20</li>
</ul>
</pre>
</details>
<details style="background: white; color: black">
<summary>Light Palette Auto</summary>
<ul class="palette palette-auto light bordered">
<li>👍</li>
<li>👍</li>
<li>👍</li>
</ul>
<pre>
<ul class="palette palette-auto light bordered">
<li>👍</li>
<li>👍</li>
<li>👍</li>
</ul>
</pre>
</details>
<details style="background: white; color: black">
<summary>Patterns</summary>
<p>Patterns can be abblied using <code>pattern.pat{1-20}</code> to palette children or dynamically by
applying <code>.pattern-auto</code> to the element with the <code>.palette</code> class</p>
<p>Patterns can be used on both palettes</p>
<p>When applying patterns the helper class <code>.pallete-txt</code> can be used on child elements.</p>
<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>
<pre>
<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>
</pre>
<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>
<pre>
<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>
</pre>
</details>
</div>
</main>
<!-- <div>
<p>Utility classes</p>
<ol>
<li>
<a href="./demos/utility-inline-text.html">Other Elements</a>
<small>.bold, .italic, .strike, .underline</small>
</li>
</ol>
</div> -->
<!-- <script type="module">
import "./src/reset.css";
import "./src/brand-colors.css";
import "./src/root.css";
import "./src/native.css";
import "./src/utility.css";
</script> -->
<script type="module" src="./index.js"></script>
</body>
</html>