diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..55b4959 --- /dev/null +++ b/LICENSE @@ -0,0 +1,7 @@ +Copyright 2020 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: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..50ceea8 --- /dev/null +++ b/README.md @@ -0,0 +1,23 @@ +## 98.css + +A design system for building faithful recreations of old UIs. + +![a screenshot of a window with the title "My First VB4 Program" and two buttons OK and Cancel, styled like a Windows 98 dialog](./docs/98.css) + +### Installation + +You can grab 98.css from npm. + +``` +npm install 98.css +``` + +Then reference [`build/98.css`](https://github.com/jdan/98.css/blob/master/build/98.css) however you see fit. Refer to the [documentation page](https://jdan.github.io/98.css/) for specific instructions on this library's components. + +### Issues, Contributing, etc. + +98.css is [MIT licensed](https://github.com/jdan/98.css/blob/master/LICENSE). + +Refer to [the Github issues page](https://github.com/jdan/98.css/issues) to see bugs in my CSS or report new ones. I'd really like to see your pull requests (especially those new to open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like to make it a fun place to build your open-source muscle. + +Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on Github](https://github.com/jdan/98.css/stargazers) and maybe subscribing to more fun things on [my twitter](https://twitter.com/jdan). 👋 diff --git a/build/98.css b/build/98.css index 7b8efd7..0e5a2b4 100644 --- a/build/98.css +++ b/build/98.css @@ -1,3 +1,9 @@ +/** + * 98.css + * Copyright (c) 2020 Jordan Scales + * https://github.com/jdan/98.css/blob/master/LICENSE + */ + :root { /* Color */ --surface: #c0c0c0; @@ -387,7 +393,7 @@ a:focus { outline: 1px dotted #0000ff; } -ul.treeview { +ul.tree-view { display: block; background: #ffffff; box-shadow: inset -1px -1px #ffffff, @@ -397,36 +403,36 @@ ul.treeview { margin: 0; } -ul.treeview li { +ul.tree-view li { list-style-type: none; } -ul.treeview a { +ul.tree-view a { text-decoration: none; color: #000; } -ul.treeview a:focus { +ul.tree-view a:focus { background-color: #000080; color: #ffffff; } -ul.treeview ul, -ul.treeview li { +ul.tree-view ul, +ul.tree-view li { margin-top: 3px; } -ul.treeview ul { +ul.tree-view ul { margin-left: 16px; padding-left: 16px; /* Goes down too far */ border-left: 1px dotted #808080; } -ul.treeview ul > li { +ul.tree-view ul > li { position: relative; } -ul.treeview ul > li::before { +ul.tree-view ul > li::before { content: ""; display: block; position: absolute; @@ -437,7 +443,7 @@ ul.treeview ul > li::before { } /* Cover the bottom of the left dotted border */ -ul.treeview ul > li:last-child::after { +ul.tree-view ul > li:last-child::after { content: ""; display: block; position: absolute; diff --git a/docs/98.css b/docs/98.css index 7b8efd7..0e5a2b4 100644 --- a/docs/98.css +++ b/docs/98.css @@ -1,3 +1,9 @@ +/** + * 98.css + * Copyright (c) 2020 Jordan Scales + * https://github.com/jdan/98.css/blob/master/LICENSE + */ + :root { /* Color */ --surface: #c0c0c0; @@ -387,7 +393,7 @@ a:focus { outline: 1px dotted #0000ff; } -ul.treeview { +ul.tree-view { display: block; background: #ffffff; box-shadow: inset -1px -1px #ffffff, @@ -397,36 +403,36 @@ ul.treeview { margin: 0; } -ul.treeview li { +ul.tree-view li { list-style-type: none; } -ul.treeview a { +ul.tree-view a { text-decoration: none; color: #000; } -ul.treeview a:focus { +ul.tree-view a:focus { background-color: #000080; color: #ffffff; } -ul.treeview ul, -ul.treeview li { +ul.tree-view ul, +ul.tree-view li { margin-top: 3px; } -ul.treeview ul { +ul.tree-view ul { margin-left: 16px; padding-left: 16px; /* Goes down too far */ border-left: 1px dotted #808080; } -ul.treeview ul > li { +ul.tree-view ul > li { position: relative; } -ul.treeview ul > li::before { +ul.tree-view ul > li::before { content: ""; display: block; position: absolute; @@ -437,7 +443,7 @@ ul.treeview ul > li::before { } /* Cover the bottom of the left dotted border */ -ul.treeview ul > li:last-child::after { +ul.tree-view ul > li:last-child::after { content: ""; display: block; position: absolute; diff --git a/docs/backup.html b/docs/backup.html deleted file mode 100644 index cbd6408..0000000 --- a/docs/backup.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - - -
-
-
- Windows 98 Example -
- -
- - - -
-
-
-
This is an example window with some controls.
- -
- I think it's -
- - -
- -
- - -
- -
- - -
- -
- - -
-
- -
- Checkboxes -
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- - - -
-
- -
- - -
- -
- Learn more -
-
-
- - diff --git a/docs/docs.css b/docs/docs.css index 5e1484b..467de78 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -20,7 +20,7 @@ aside { align-items: stretch; } -aside .treeview { +aside .tree-view { width: 100%; /* TODO: Move scrollbar into the recessed region? */ overflow-y: scroll; diff --git a/docs/index.html b/docs/index.html index a5c5cbc..6bcbbf2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,7 +9,7 @@ @@ -83,8 +83,10 @@ This means 98.css is compatible with your frontend framework of choice.

-

You can install 98.css from the GitHub releases page, or from npm.

- 
npm install 98.css
+

+ You can install 98.css from the GitHub releases page, or from npm. +

+ 
npm install 98.css

Components

@@ -735,8 +737,101 @@ — Microsoft Windows User Experience p. 178 + +

+ To render a tree view, use an ul element with the + tree-view class. The children of this list (li + elements), can contain whatever you'd like. +

+ +
+
    +
  • We can put
    • +
  • ✨ Whatever ✨
    • +
  • We want in here
    • +
+
+ Show code + 
<ul class="tree-view">
+  <li>We can put</li>
+  <li><strong style="color: purple">✨ Whatever ✨</strong></li>
+  <li>We want in here</li>
+</ul>
+
+
+ +

+ To make this a tree, we can nest further ul elements + (no class needed on these). This will provide them with a nice dotted + border and indentation to illustrate the structure of the tree. +

+ +
+
    +
  • Table of Contents
    • +
  • What is web development?
    • +
  • + CSS +
      +
    • Selectors
      • +
    • Specificity
      • +
    • Properties
      • +
    +
    • +
  • + JavaScript +
      +
    • Avoid at all costs
      • +
    +
    • +
  • HTML
    • +
  • Special Thanks
    • +
+
+ Show code + 
<ul class="tree-view">
+  <li>Table of Contents</li>
+  <li>What is web development?</li>
+  <li>
+    CSS
+    <ul>
+      <li>Selectors</li>
+      <li>Specificity</li>
+      <li>Properties</li>
+    </ul>
+  </li>
+  <li>
+    JavaScript
+    <ul>
+      <li>Avoid at all costs</li>
+    </ul>
+  </li>
+  <li>HTML</li>
+  <li>Special Thanks</li>
+</ul>
+
+
+ +

Issues, Contributing, etc.

+ +

+ 98.css is MIT licensed. +

+ +

+ Refer to the Github issues page to see bugs + in my CSS or report new ones. I'd really like to see your pull requests (especially those new to + open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like + to make it a fun place to build your open-source muscle. +

+ +

+ Thank you for checking my little project out, I hope it brought you some joy today. Consider + starring/following along on Github and maybe + subscribing to more fun things on my twitter. 👋 +

diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 4f36f20..b9018f9 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -9,7 +9,7 @@ @@ -83,8 +83,10 @@ This means 98.css is compatible with your frontend framework of choice.

-

You can install 98.css from the GitHub releases page, or from npm.

- 
npm install 98.css
+

+ You can install 98.css from the GitHub releases page, or from npm. +

+ 
npm install 98.css

Components

@@ -533,8 +535,70 @@ — Microsoft Windows User Experience p. 178 + +

+ To render a tree view, use an ul element with the + tree-view class. The children of this list (li + elements), can contain whatever you'd like. +

+ + <%- example(` + + `) %> + +

+ To make this a tree, we can nest further ul elements + (no class needed on these). This will provide them with a nice dotted + border and indentation to illustrate the structure of the tree. +

+ + <%- example(` + + `) %> + +

Issues, Contributing, etc.

+ +

+ 98.css is MIT licensed. +

+ +

+ Refer to the Github issues page to see bugs + in my CSS or report new ones. I'd really like to see your pull requests (especially those new to + open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like + to make it a fun place to build your open-source muscle. +

+ +

+ Thank you for checking my little project out, I hope it brought you some joy today. Consider + starring/following along on Github and maybe + subscribing to more fun things on my twitter. 👋 +

diff --git a/docs/window.png b/docs/window.png new file mode 100644 index 0000000..6eff86a Binary files /dev/null and b/docs/window.png differ diff --git a/style.css b/style.css index 5df09d0..d5cfe1e 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,9 @@ +/** + * 98.css + * Copyright (c) 2020 Jordan Scales + * https://github.com/jdan/98.css/blob/master/LICENSE + */ + :root { /* Color */ --surface: #c0c0c0; @@ -359,7 +365,7 @@ a:focus { outline: 1px dotted var(--link-blue); } -ul.treeview { +ul.tree-view { display: block; background: var(--button-highlight); box-shadow: var(--border-field); @@ -367,36 +373,36 @@ ul.treeview { margin: 0; } -ul.treeview li { +ul.tree-view li { list-style-type: none; } -ul.treeview a { +ul.tree-view a { text-decoration: none; color: #000; } -ul.treeview a:focus { +ul.tree-view a:focus { background-color: var(--dialog-blue); color: var(--button-highlight); } -ul.treeview ul, -ul.treeview li { +ul.tree-view ul, +ul.tree-view li { margin-top: 3px; } -ul.treeview ul { +ul.tree-view ul { margin-left: 16px; padding-left: 16px; /* Goes down too far */ border-left: 1px dotted #808080; } -ul.treeview ul > li { +ul.tree-view ul > li { position: relative; } -ul.treeview ul > li::before { +ul.tree-view ul > li::before { content: ""; display: block; position: absolute; @@ -407,7 +413,7 @@ ul.treeview ul > li::before { } /* Cover the bottom of the left dotted border */ -ul.treeview ul > li:last-child::after { +ul.tree-view ul > li:last-child::after { content: ""; display: block; position: absolute;