jdan / 98.css Goto Github PK

View Code? Open in Web Editor NEW

9.0K 60.0 299.0 712 KB

A design system for building faithful recreations of old UIs

Home Page: https://jdan.github.io/98.css

License: MIT License

CSS 89.95% JavaScript 10.05%

css design-system windows98 guy-fieri

98.css's Introduction

98.css

A design system for building faithful recreations of old UIs.

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.

Be sure to check out XP.css and 7.css as well.

Installation / Usage

The easiest way to use 98.css is to import it from unpkg.

<!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
      </div>
    </div>
    <div class="window-body">
      <p>Hello, world!</p>
    </div>
  </div>
</body>
</html>

Alternatively, you can grab 98.css for the releases page or npm.

npm install 98.css

Here is an example of 98.css being used with React, and an example with vanilla JavaScript.

Refer to the documentation page for specific instructions on this library's components.

Developing

First, run npm install.

style.css is where everything happens.

You can use npm start to start a development environment that will watch for file changes and rebuild 98.css, reloading your browser in the process.

You can run a build manually with npm run build. This will write to the dist/ directory.

Issues, Contributing, etc.

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. 👋

Publishing

Building the docs site: npm run deploy:docs

Publishing to npm: npm run release

License

MIT

98.css's People

Contributors

Stargazers

Watchers

Forkers

modernserf dosycorps hachesilva-forks hedgehog-online extanimal meai girvo mxzz keroosha jacola peer2poor bansicloud mohansha ckanitz zsumair zavg raymondseger joelamyman 10xxx ryanmjacobs mishalzaman kaytwo designium mattbegent ixquitilissaid framework-93 juddy loama murilobsd designemail numtel tpenguinltg fourks linecode hbsmile yancymin danx16 sgrives blockchaincaffe fengweijp xheinrich ruoduan-hub soluno redstrike fstr0 grumdrig hagiasofiya iobote davwheat bignuoli n055 roadlabs gcalacouris munanyuebei xianyunyehexjy mzhren bobslaede jian-cui mobeidat imyxz malarium lyrl wisnubaldas kostecke hraverkar jesstam hhy5277 ynotrusso teodragovic cassiohub juanra007 mpopv jindeveloper hotwordland kiwicool91 wayfarer1549 nullnotfound designtips will-777 vinay20045 articks ygra barseghyanartur nogtini janhaa askalal raylouis scarecrowlol wushian wscodinglover valencia-io lungzeeyim rahmansurya ointeractive-depot doc22940 csscheatsheet ianchen0119 smartree efuzy kambaa

98.css's Issues

Dropdown menu doesn't render correctly

Reference screenshot found online:

Current dropdown in latest Edge Dev (Chromium):

Also the hover state doesn't seem right.

EDIT: This may be a limitation of using a native select component.

Trigger a build commit on push to master

Set up Travis CI so that when commits are pushed to the master branch, the project is built and the result is pushed back to master. This should make pull request diffs easier to read and it will prevent branches from being polluted with "Build project" commits every time a change is requested.

Padding on radios and checkbox on mobile Safari

Inauthentic rendering of top/left window borders

Hi. The Chicago rendering theme introduced in Windows 95 actually has a fairly prominent mistake in it that your recreation is missing; specifically, window borders (and only window borders) have the "Light" and "Hilight" colours swapped. I've attached some comparative screenshots for reference. You can check ToastyTech for more exact metrics, e.g. fixing the padding on the window caption text and the caption bar context buttons.

Pressed button text position

On a Windows machine (98 style), the button text actually shifts down and right a pixel, contributing to the 'pressed' look and feel.

I have a fix for this but don't have contributor access to submit a PR for review. It was...surprisingly finicky to get right cross-browser.

Text is illegible on a 5k screen

It's so razor thin I can't really read it anymore.

What's the common wisdom on build/ + checking in builds?

As many of you noticed, build/98.css and docs/98.css are checked in. docs/ powers https://jdan.github.io/98.css, and build/ allows folks to use 98.css via https://unpkg.com/98.css

However, these are annoying to deal with in PRs! They're minified so we get conflicts on pretty much every commit. I used to have an npm test (+ travis integration) to make sure people ran npm run build, but I've just removed that. I'm starting to think we don't want any PRs to include build/98.css or docs/98.css.

Any ideas for making this more pleasant?

Can you give more version?

Windows 3.x XP Vista style
Mac OS ?

Table component

It would be awesome to have some kind of table component.

Keep it up, this looks awesome!!! 🎉

Text is too smooth

Text is beautiful, smooth, and readable. I don't wish I had bought a Mac when I read it. Should be jagged.

Slightly different font weight for elements of a tree in tree view if there is more than one word

Not sure if this was intended or not, but in a tree if there is an element with more than one word it appears slightly bolder than one with a single word.

Titlebar gradient should not extend the full width

According to the high-quality screenshots in the GUIdebook gallery, the titlebar gradient should not span the entire width of the titlebar, but only the title portion. The window icon has a solid background (ActiveTitle, InactiveTitle), and the window controls have a solid background (GradientActiveTitle, GradientInactiveTitle).

If you would like to use it as a reference, I attempted to make a faithful recreation myself a few years ago for a Windows theme creator and I believe I the colour mapping to the various elements are correct. The repo is tpenguinltg/winclassic (demo). You can load the Windows 98 values into the box to see it live.

Text Boxes have rounded corners on iOS Google Chrome

Description

TextBox has rounded corners when viewing on iOS using Google Chrome.

Might be fixed by #3

Screenshot

Firefox draws its own focus rectangle, which surrounds only the button text

This conflicts with the custom one. Seems to need

button::-moz-focus-inner {
  border: 0;
}

Not deploying, error in build/98.css

When attempting to deploy my app made with React with 98.css, it presents an error message:

./node_modules/98.css/build/98.css
ParserError: Syntax Error at line: 1, column 6
at Array.forEach ()
at Array.forEach ()

and refuses to compile! Reinstalling 98.css with npm and updating the packages along with reconfiguring my packages.json(https://blog.usejournal.com/how-to-deploy-your-react-app-into-github-pages-b2c96292b18e) does not aid the problem. This has been a consistent issue I have been encountering and is preventing me from further developing my personal website.

border-style inset/outset

Hi,

I saw this posted on Hacker News and I was wondering why you use box-shadow for the "3D effect" on buttons and window borders instead of border-style: outset. Is there a technical reason for it?

I think the box-shadow version makes it look a bit softer than it was in Windows 98.

support for `readonly`

There's support for the disabled attribute, but I don't see support for the readonly.

They look the same, but behave differently. The disabled inputs don't present in the POST data, while the readonly ones do.

Missing BSOD

Missing styles for a BSOD. I recall seeing that quite a bit back in the day.

Lacking "restore" icon button

We have the maximize button but not the restore button.

Window title bar dimensions seem to be incorrect

It appears that the buttons on the title bar and the borders are not quite the same as on actual Windows 98.

Please compare (grey background is 98.css, teal is Windows 98):
- 98.css
- Windows 98
- overlaid and centered on the top right corner
- centered on the close button

Border of groupboxes

GroupBoxes are 2 colored (white and dark gray) in w98, however the css has them colored in 4 colors (black, d gray, b gray, white)
example in windows 98:

css:

Buttons and dropdowns have no text color

This happens if you change the fallback-colours in your browser to light text on dark background.

Couple of problems on Twitter iOS browser(probably it is safari, safari has same problems too)

Theme support

I'd love color theme support. Custom colors were a wonderful way to personalize your os.

Labels for checkboxes and radio buttons should not be selectable

I may be mistaken, but clicking and dragging on labels of a checkbox shouldn't highlight the selected text in blue. If this is the case, and it wouldn't negatively hamper a11y to do so, it seems like the fix is: https://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable?

Feel free to close this issue if either of my two assumptions above (98 components have un-selectable checkbox/radio labels, and making it unselectable wouldn't damage accessibility somehow) is false, but this was just a thought. I'm happy to take this on myself if nobody else grabs it.

Font smoothing issue on non-retina screen with desktop safari

If you open the page in an external(non-retina) screen in latest Safari on MacOS Catalina, font smoothing doesn't render properly. Here is a screenshot:

Radio buttons/checkboxes don't have pressed state

To closer mimic the original, when clicking and holding these controls, they should be displayed differently. IIRC Windows changes the white background to gray.

Selecting Label Text

Couldn't find a position on this, so I figured I'd mention it here.

Traditionally on Windows platforms (Including Windows 98), labels (and legends, window title bars, etc) cannot have their text selected. Modern systems allow you to double-click labels to copy their text however.

As accessibility is a priority, I'd recommend considering the ramifications of this. With my experience with assistive technology, you should still be able to read those out, even with text selection disallowed.

Another option may be able to have a utility class that explicitly allows for selection (Or a custom data attribute) but there doesn't seem to be much of that in this project so far.

Either way, I thought it'd be good to discuss!

Should disabled buttons be clickable?

On the https://jdan.github.io/98.css/ page, "disabled" buttons still can be "clicked" - they show their :active state.

I checked The Windows Interface Guidelines for Software Design (p. 381-382 for information on unavailable appearance for buttons), but it does not specifically say what the correct behavior is. Still, it seems like it will be more logical for a disabled button to not be "clickable" - especially as it will not perform any action.

missing input type=number styling :)

Subj. I think it was called "spin boxes" in Windows 98?

Checkbox/radio label should not be selectable

You should not be able to select certain text, like the checkbox or radio label or other labels.

[Missing] - input[type="file"]

the input[type="file"] is unstyled

Button text should move when button is pressed

I don't have a copy of Windows 98 handy to check and capture a video of this in action (or any versions of Windows, for that matter), but the behaviour of Windows Classic on newer versions of Windows is that the text of a button moves when the button is in a depressed state. I don't expect this to have been different in Windows 98.

According to my theme designer, the text moves 1px down and 1px right from its normal position.

Add an `npm start` to build and serve docs site

Development is a little wonky. Would be nice if an npm start could watch for file changes and serve docs/index.html.ejs. Bonus points for hot reloading :)

Needs custom cursors

I think the cursor/mouse pointer used to change when hovering over certain things...
(TBH I can't remember exactly)

Missing scrollbars (proposal inside)

Hi !!!

I noticed that the scrollbars were missing, I played a bit on CodePen to try to reproduce them, and I came up with this result: https://codepen.io/BeardedBear/pen/jObVXmV

Are you interested? Feel free to retrieve the code if you are :)

however, I never found solutions for Firefox :(

Edit note : Thanks padraigfl for the button trick.

Font does not match 8pt Tahoma

I see there's a letter-spacing: -0.03ch. I'm not sure if that's what you were going for:

(this is Firefox on Windows 10)

I think that because Windows uses pretty aggressive hinting, the spaces between letters become more uneven, sometimes snapping to 1 pixel and sometimes to 2 pixels. I can only speak for myself but the end result looks... broken.

Maybe using another, narrower font would have a better effect than this tweak?

Now that I think of it, turning off ligatures could also help: some of the "tt", "ti" and so on look like a big part of the problem.

Great project, by the way :)

Window effect

This feature is missed: http://www.pccaretips.com/images/blog/errors/computer-freeze.jpeg

Firefox fails to render group box border

On Firefox, the group box border does not render.

Tab Control Missing

The stylesheet lacks the Tab control. It's quite intricate in implementation, especially when rows are involved.

Buttons need border-radius: 0 for hard rectangle edge

The Windows Classic style UIs don't have rounded rectangles. On at least Chrome and Edge Preview, you need border-radius: 0 to achieve the hard edges.

Slider control

It would be really nice to have a themed slider control component.

https://flylib.com/books/en/4.348.1.74/1/

Problem with tree view.

I have a trree view in a field-row.
Found that the first

-item was ok but the rest had space in front after the binding line.
I think they inherited margin-left from the field-row.

So I added

ul.tree-view ul,
ul.tree-view li {
margin-top: 3px;
margin-left: 0px;
}

to the 98.css

Since I'm no css guru, I'm not shure this is the right solution, but it solved my problem.

Duplicated checkbox and radios on PaleMoon

Hi! Nice css!

Here are some duplicates from https://jdan.github.io/98.css/:
http://i.imgur.com/2uUluIv.png
http://i.imgur.com/o3kHimb.png

PaleMoon 28.9.1

Border for images or other components

I'm not sure what to call this, but some windows would have an inset border for images or other components, similar to text areas. Here are a couple screenshots:

The test area in the bottom right:

The image in the window behind the menus:

This inset border is used for most windows that contain other items, like the file explorer or browser (also seen in the second image). Note that this is different from the Group Box border. It's actually the inverse of the regular window border; the highlight is bottom-right and shadow is top-left, since it's inset.

What's the license in the end?