chore: clean up code split

botoxparty · May 14, 2020 · f022815 · f022815
1 parent 62c3d95
commit f022815
Show file tree

Hide file tree

Showing 35 changed files with 384 additions and 671 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,4 +1,4 @@
-Copyright 2020 Jordan Scales
+Copyright 2020 Adam Hammad, Jordan Scales
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

diff --git a/README.md b/README.md
@@ -1,39 +1,39 @@
 ## 98.css
 
-[![npm](https://98badges.now.sh/api/version)](http://npm.im/98.css)
-[![gzip size](https://98badges.now.sh/api/size)](https://unpkg.com/98.css)
+[![npm](https://98badges.now.sh/api/version)](http://npm.im/gui.css)
+[![gzip size](https://98badges.now.sh/api/size)](https://unpkg.com/gui.css)
 
 A design system for building faithful recreations of old UIs.
 
 <img alt="a screenshot of a window with the title 'My First VB4 Program' and two buttons OK and Cancel, styled like a Windows 98 dialog" src="https://github.com/jdan/98.css/blob/master/docs/window.png?raw=true" height="133"> <img alt="a magnified view showing pixel-perfect borders on a scrollbar and button element" src="https://github.com/jdan/98.css/blob/master/docs/zoom.png?raw=true?raw=true" height="133">
 
-98.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.
+GUI.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.
 
 ### Installation / Usage
 
-The easiest way to use 98.css is to import it from [unpkg](https://unpkg.com/).
+The easiest way to use GUI.css is to import it from [unpkg](https://unpkg.com/).
 
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <title>98.css example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://unpkg.com/98.css" />
-</head>
-
-<body>
-  <div class="window" style="margin: 32px; width: 250px">
-    <div class="title-bar">
-      <div class="title-bar-text">
-        My First VB4 Program
+  <head>
+    <title>98.css example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://unpkg.com/98.css" />
+  </head>
+
+  <body>
+    <div class="window" style="margin: 32px; width: 250px">
+      <div class="title-bar">
+        <div class="title-bar-text">
+          My First VB4 Program
+        </div>
+      </div>
+      <div class="window-body">
+        <p>Hello, world!</p>
       </div>
     </div>
-    <div class="window-body">
-      <p>Hello, world!</p>
-    </div>
-  </div>
-</body>
+  </body>
 </html>
 ```
 

diff --git a/build.js b/build.js
@@ -10,21 +10,41 @@ const postcss = require("postcss");
 
 const { homepage, version } = require("./package.json");
 
+const postcssParser = postcss()
+  .use(require("postcss-import"))
+  .use(require("postcss-nested"))
+  .use(require("postcss-inline-svg"))
+  .use(require("postcss-css-variables"))
+  .use(require("postcss-calc"))
+  .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }))
+  .use(require("cssnano"));
+
 function buildCSS() {
+  const input =
+    `/*! GUI.css v${version} - ${homepage} */\n` +
+    fs.readFileSync("gui/index.scss");
+
+  return postcssParser
+    .process(input, {
+      from: "gui/index.scss",
+      to: "dist/GUI.css",
+      map: { inline: false },
+    })
+    .then((result) => {
+      mkdirp.sync("dist");
+      fs.writeFileSync("dist/GUI.css", result.css);
+      fs.writeFileSync("dist/GUI.css.map", result.map.toString());
+    });
+}
+
+function build98CSS() {
   const input =
     `/*! 98.css v${version} - ${homepage} */\n` +
-    fs.readFileSync("themes/XP/index.scss");
+    fs.readFileSync("themes/98/index.scss");
 
-  return postcss()
-    .use(require("postcss-import"))
-    .use(require("postcss-nested"))
-    .use(require("postcss-inline-svg"))
-    .use(require("postcss-css-variables"))
-    .use(require("postcss-calc"))
-    .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }))
-    .use(require("cssnano"))
+  return postcssParser
     .process(input, {
-      from: "themes/XP/index.scss",
+      from: "themes/98/index.scss",
       to: "dist/98.css",
       map: { inline: false },
     })
@@ -35,6 +55,24 @@ function buildCSS() {
     });
 }
 
+function buildXPCSS() {
+  const input =
+    `/*! XP.css v${version} - ${homepage} */\n` +
+    fs.readFileSync("themes/XP/index.scss");
+
+  return postcssParser
+    .process(input, {
+      from: "themes/XP/index.scss",
+      to: "dist/XP.css",
+      map: { inline: false },
+    })
+    .then((result) => {
+      mkdirp.sync("dist");
+      fs.writeFileSync("dist/XP.css", result.css);
+      fs.writeFileSync("dist/XP.css.map", result.map.toString());
+    });
+}
+
 function buildDocs() {
   let id = 0;
   function getNewId() {
@@ -45,6 +83,7 @@ function buildDocs() {
   }
 
   const template = fs.readFileSync("docs/index.html.ejs", "utf-8");
+
   function example(code) {
     const magicBrackets = /\[\[(.*)\]\]/g;
     const dedented = dedent(code);
@@ -75,7 +114,9 @@ function buildDocs() {
 }
 
 function build() {
-  buildCSS()
+  build98CSS()
+    .then(buildXPCSS)
+    .then(buildCSS)
     .then(buildDocs)
     .catch((err) => console.log(err));
 }

diff --git a/docs/docs.css b/docs/docs.css
@@ -156,3 +156,13 @@ button.active {
     overflow-x: scroll;
   }
 }
+
+.theme-switcher {
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  background: black;
+  color: white;
+  font-weight: bold;
+  padding: 5px;
+}
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
@@ -10,14 +10,14 @@
   <meta property="og:title" content="98.css" />
   <meta name="Description" content="A design system for building faithful recreations of old UIs." />
   <meta property="og:description" content="A design system for building faithful recreations of old UIs." />
-  <meta property="og:image" content="https://github.com/jdan/98.css/raw/master/docs/window.png?raw=true" />
+  <meta property="og:image" content="https://github.com/botoxparty/98.css/raw/master/docs/window.png?raw=true" />
 
-  <link rel="stylesheet" href="98.css">
+  <link id="theme-stylesheet" rel="stylesheet" href="XP.css">
   <link rel="stylesheet" href="docs.css">
   <link rel="stylesheet" href="vs.css">
 </head>
 
-<body ontouchstart>
+<body class="surface" ontouchstart>
   <aside>
     <ul class="tree-view">
       <li><a href="#intro">Intro</a></li>
@@ -27,6 +27,7 @@
           <li><a href="#button">Button</a></li>
           <li><a href="#checkbox">Checkbox</a></li>
           <li><a href="#option-button">OptionButton</a></li>
+          <li><a href="#tabs">Tabs</a></li>
           <li><a href="#group-box">GroupBox</a></li>
           <li><a href="#text-box">TextBox</a></li>
           <li><a href="#slider">Slider</a></li>
@@ -45,8 +46,18 @@
     </ul>
   </aside>
 
+  <div class="theme-switcher">
+    <section class="field-row">
+      <label>Select a theme</label>
+      <select id="theme-switcher-select">
+        <option value="XP.css">Windows XP</option>
+        <option value="98.css">Windows 98</option>
+      </select>
+    </section>
+  </div>
+
   <main>
-    <h1>98.css</h1>
+    <h1>XP.css</h1>
     <hr>
     <p>A design system for building faithful recreations of old UIs.</p>
 
@@ -61,14 +72,15 @@
 
     <h2 id="intro">Intro</h2>
     <p>
-      98.css is a CSS library for building interfaces that look like Windows 98.
-      See more <a href="https://github.com/jdan/98.css">on GitHub</a>.
+      XP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs.<br>
+      See <a href="https://github.com/botoxparty/XP.css">XP.css on GitHub</a><br>
+      See <a href="https://github.com/jdan/98.css">98.css on GitHub</a>
     </p>
 
     <div class="window" style="margin: 32px; width: 250px">
       <div class="title-bar">
         <div class="title-bar-text">
-          My First VB4 Program
+          My First Program
         </div>
 
         <div class="title-bar-controls">
@@ -850,4 +862,6 @@
   </main>
 </body>
 
+<script src="script.js"></script>
+
 </html>
diff --git a/docs/script.js b/docs/script.js
@@ -0,0 +1,9 @@
+const themeSwitcher = document.getElementById("theme-switcher-select");
+const stylesheet = document.getElementById("theme-stylesheet");
+
+let theme = stylesheet.href;
+
+themeSwitcher.addEventListener("change", (e) => {
+  stylesheet.href = e.target.value;
+  document.getElementsByTagName("h1")[0].innerText = e.target.value;
+});
diff --git a/gui/_tabs.scss b/gui/_tabs.scss
@@ -1,6 +1,6 @@
 :root {
     --tab-border: 1px solid #888;
-    --tab-bg: white;
+    --tab-bg: var(--surface);
 }
 
 .tabs {

diff --git a/gui/_variables.scss b/gui/_variables.scss
@@ -5,7 +5,7 @@
 :root {
     --sans-serif: "Pixelated MS Sans Serif", Arial;
     /* Color */
-    --surface: #c0c0c0;
+    --surface: lightblue;
     --button-highlight: #ffffff;
     --button-face: #dfdfdf;
     --button-shadow: #808080;

diff --git a/gui/_window.scss b/gui/_window.scss
@@ -1,3 +1,6 @@
+:root {
+    --title-bar-bg: black;
+}
 .window {
     -webkit-font-smoothing: none;
     font-size: 11px;
@@ -11,7 +14,7 @@
 .title-bar {
     -webkit-font-smoothing: none;
     font-size: 11px;
-    background: linear-gradient(90deg, var(--dialog-blue), var(--dialog-blue-light));
+    background: var(--title-bar-bg);
     padding: 3px 2px 3px 3px;
     display: flex;
     justify-content: space-between;
@@ -41,7 +44,6 @@
     button[aria-label="Help"] {
     }
     button[aria-label="Close"] {
-        margin-left: 2px;
     }
 }
 .window-body {

diff --git a/gui/index.scss b/gui/index.scss
@@ -14,3 +14,7 @@
 @import "_treeview.scss";
 @import "_fieldset.scss";
 @import "_tabs.scss";
+
+.surface {
+    background: var(--surface);
+}