@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.
105 lines (80 loc) • 2.34 kB
HTML
<html lang="en">
<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>@ou-imdt/css</title>
<link rel="stylesheet" href="./themes/brand.css">
<link rel="stylesheet" href="./datavis-palette.css">
<style>
:root {}
imdt-themer {
position: absolute;
top: 0;
right: 0;
padding: 0.5ch 1ch;
display: inline-block;
background: var(--bg, #fff);
border-bottom: 1px solid grey;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
z-index: 1000;
border-bottom-left-radius: 5px;
}
.two-col {
display: grid;
grid-template-columns: auto 1fr;
height: 100svh;
}
.two-col > * {
overflow-y: auto;
resize: horizontal;
}
.two-col > :first-child {
height: 100%;
max-height: 100svh;
padding: 1ch;
}
.two-col #main-content {
padding: 1ch;
}
/* Custom class for demo purposes, not a part of css */
</style>
<script src="./imdt-themer.js"></script>
<script src="./vleapi.1.js"></script>
<script type="module" crossorigin src="./index.js"></script>
<link rel="stylesheet" crossorigin href="./index.css">
</head>
<body data-theme="">
<div class="two-col">
<div id="main-sidebar" class="neutral border">
<h1 class="h6">IMDT CSS</h1>
<p>Version: <span data-version></span></p>
<!-- populated by js -->
<strong>Guidelines</strong>
<ul class="unstyled" id="guide-items"></ul>
<!-- populated by js -->
<strong>Utilities</strong>
<ul class="unstyled" id="utility-items"></ul>
<!-- populated by js -->
<strong>Native Styles</strong>
<ul class="unstyled" id="native-items"></ul>
</div>
<main>
<imdt-themer>
<button data-name="default">default</button>
<button data-name="brand">brand</button>
</imdt-themer>
<div id="main-content"></div>
</main>
</div>
<!-- <section>
<h2>Native Elements</h2>
<div id="native"></div>
</section>
<section>
<h2>Utilities</h2>
<div id="utility"></div>
</section> -->
</body>
</html>