It's good to see you here!

It's just a simple showcase of Win98CSS classes. Enjoy! Click OK to see. Or not. Close the card using Ctrl+W

Basic usage

First, you need to  download css file from  here. Then, include it in your HTML head tag. 

<head>
    <link rel="stylesheet" href="win98.css">
</head>

It's done! Now just some classes to elements. Most important thing - always use class  win. Just like in this example, I'm using styles for button. 

<button class="win win-button">Example button</button>

And that's all!

I was trying to avoid styling width and height of elements, so you could do that yourself. I encourage to style elements by yourself, changing paddings, color etc.

Elements

window with nav

nav

content

<div class="win win-window">
    <div class="win win-nav">
        nav
    </div>
    <p>
        content
    </p>
</div>

nav with icons

nav 
<div class="win win-nav">
    nav
    <div class="win win-nav-icons ">
        <button class="win win-icon-button">_</button>
        <button class="win win-icon-button">◽</button>
        <button class="win win-icon-button">X</button>
    </div>
</div>

nav menu

<nav class="win win-menu">
    <div class="win win-menu-sidebar">
        <p>
            <span>Win98</span>CSS</span>
        </p>
    </div>
    <ul class="win win-menu-list">
        <li class="win win-menu-list-item expanding">
            <img class="win win-nav-icon" src="assets/win98_icons/erase_file.ico" /> List item
            <ul class="win win-menu-sublist">
                <li class="win-menu-sublist-item">
                    <img class="win win-nav-icon" src="assets/win98_icons/computer_win.ico" />some option</li>
                <li class="win-menu-sublist-item">some option</li>
                <li class="win-menu-sublist-item">some option</li>
            </ul>
        </li>
        <li class="win win-menu-list-item">
            <img class="win win-nav-icon" src="assets/win98_icons/computer_win.ico" />List item </li>
        <li class="win win-menu-list-item">
            <img class="win win-nav-icon" src="assets/win98_icons/directory_open_cool.ico" />List item </li>
        <hr>
        <li class="win win-menu-list-item">
            <img class="win win-nav-icon" src="assets/win98_icons/installer.ico" />Turn off</li>
    </ul>
</nav>

Forms

button

<button class="win win-button">Button</button>

input

<input class="win win-input" type="text"/>

select - must be in some kind of wrapper

<div class="win win-select">
    <select >
        <option>some option 1</option>
        <option>some option 2</option>
        <option>some option 3</option>
    </select>
</div>

radio/checkbox - input must be inside styled label

<label class="win win-radio">windows radio
    <input type="radio" name="radio">
    <span></span>
</label>
<label class="win win-checkbox">windows checkbox
    <input type="checkbox" name="checkbox">
    <span></span>
</label>

fieldset

win98 fieldset 
<fieldset class="win win-fieldset">
    <legend>win98 fieldset</legend>
   ...
</fieldset>