shards98

CSS and JS style library inspired by 98.css

Installation

Via npm

I don't recommend this but you can do it if you want

npm install shards98

Then import in your project:

import "shards98/shards98.css";
import { addWindowControls, addWindowTitles, populateTaskBar } from "shards98";

Via CDN (no installation required, recommended)

Include directly in your HTML:

<!-- CSS -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/shards98.css"
/>

<!-- JavaScript -->
<script type="module">
  import {
    addWindowControls,
    addWindowTitles,
    populateTaskBar,
  } from "https://cdn.jsdelivr.net/npm/[email protected]/js/index.js";

  // Your code here
</script>

Alternative CDN (unpkg):

<link rel="stylesheet" href="https://unpkg.com/[email protected]/shards98.css" />
<script
  type="module"
  src="https://unpkg.com/[email protected]/js/index.js"
></script>

Usage

<!-- how to make a window -->
<window status="{opened|minimized|maximized}" name="{name goes here}">
  <!-- Whatever you want goes here -->
</window>

<!-- How to make the taskbar -->
<taskbar>
  <img src="{your icon goes here}" alt="{alt goes here}" class="icon" />

  <div class="start-menu">
    <h2>Start</h2>
    <ul class="start-list">
      <!-- closed windows go here -->
    </ul>
  </div>

  <ul class="tasks">
    <!-- Minimized or opened windows go here -->
  </ul>

  <div class="time">12:00 PM</div>
</taskbar>

Styling

taskbar .start-menu {
  /* set your start menu's background here */
}

window-title {
  /* for custom window titles*/
}

window-controls {
  /* for custom window controls */
}
window-controls button {
  /* for custom window control buttons */
}