98.css

A compose system for constructing devoted recreations of veteran UIs.

Intro

98.css is a CSS library for constructing interfaces that be taught admire Windows 98.
Peek more on GitHub.

This library relies on the utilization of semantic HTML. To fabricate a button, you may perchance need
to make exercise of a . Enter parts require labels. Icon buttons rely on
aria-ticket. This website will records you by that direction of, but accessibility is a major
procedure of this challenge.

You would also override a variety of the sorts of your parts whereas affirming the appears to be like to be supplied by
this library. Need more padding on your buttons? Stride for it. Wish so that you just may add some color to your input labels?
Be our guest.

This library does now no longer own any JavaScript, it merely kinds your HTML with some CSS.
This fashion 98.css is compatible in conjunction with your frontend framework of more than just a few.

Here is an example of 98.css ancient with React, and
an example with vanilla JavaScript. The quickest technique to make exercise of 98.css is to import it from unpkg.

You would also set up 98.css from the GitHub releases website, or from npm.

npm set up 98.css

Ingredients

Button

A mumble button, assuredly is known as a push button, is a control
that causes the utility to compose some movement when the particular person clicks it.

A routine button measures 75px broad and 23px big, with a raised outer and inside of border.
They’re given 12px of horizontal padding by default.

Sign code

<button>Click on mebutton>

When buttons are clicked, the raised borders turn into sunken.
The next button is simulated to be within the pressed (active) order.

Sign code

<button>I am being pressedbutton>

Disabled buttons retain the an analogous raised border, but have a “washed out”
look of their ticket.

Sign code

<button disabled>I will be capable to't be clickedbutton>

Button focal point is communicated with a dotted border, space 4px within the contents of the button.
The next example is simulated to be focused.

Sign code

<button>I am focusedbutton>

Checkbox

A check field represents an self reliant or non-distinctive different.

Checkboxes are represented with a sunken panel, populated with a “check” icon when
selected, subsequent to a ticket indicating the different.

Demonstrate: You must encompass a corresponding ticket after
your checkbox, using the component with a for attribute
pointed at the id of your input. This ensures the checkbox is easy to make exercise of with
assistive applied sciences, on top of ensuring an sincere particular person abilities for all (navigating with the tab key,
being in a location to click the full ticket to make a different the sphere).

Here’s a checkbox

Sign code

<input type="checkbox" id="example1">
<label for="example1">Here's a checkboxlabel>

Checkboxes will even be selected and disabled with the routine checked and disabled
attributes.

When grouping inputs, wrap every input in a container with the self-discipline-row class. This ensures
a consistent spacing between inputs.

I am checked

I am lazy

I am lazy but silent checked

Sign code

<div class="field-row">
  <input checked type="checkbox" id="example2">
  <label for="example2">I am checkedlabel>
div>
<div class="field-row">
  <input disabled type="checkbox" id="example3">
  <label for="example3">I am lazylabel>
div>
<div class="field-row">
  <input checked disabled type="checkbox" id="example4">
  <label for="example4">I am lazy but silent checkedlabel>
div>

OptionButton

An possibility button, assuredly is known as a radio button, represents a single
different within a restricted space of mutually distinctive decisions. That’s, the particular person can retract handiest
one space of alternate options.

Possibility buttons will even be ancient by the radio type on an input component.

Possibility buttons will even be grouped by specifying a shared title attribute on every
input. Factual as before: when grouping inputs, wrap every input in a container with the
self-discipline-row class to make optimistic a consistent spacing between inputs.

Yes

No

Sign code

<div class="field-row">
  <input id="radio5" type="radio" name="first-example">
  <label for="radio5">Yeslabel>
div>
<div class="field-row">
  <input id="radio6" type="radio" name="first-example">
  <label for="radio6">Nolabel>
div>

Possibility buttons may perchance presumably be checked and disabled with their corresponding
HTML attributes.

Peanut butter can have to silent be gentle

I realize why folks admire crunchy peanut butter

Crunchy peanut butter is appropriate

Sign code

<div class="field-row">
  <input id="radio7" type="radio" name="second-example">
  <label for="radio7">Peanut butter can have to silent be gentlelabel>
div>
<div class="field-row">
  <input checked disabled id="radio8" type="radio" name="second-example">
  <label for="radio8">I realize why folks admire crunchy peanut butterlabel>
div>
<div class="field-row">
  <input disabled id="radio9" type="radio" name="second-example">
  <label for="radio9">Crunchy peanut butter is appropriatelabel>
div>

GroupBox

A community field is a definite control you may perchance presumably presumably exercise to prepare a local of
controls. A community field is an oblong physique with an optional ticket that surrounds
a local of controls.

A community field will even be ancient by wrapping your parts with the fieldset mark.
It comprises a sunken outer border and a raised inside of border, corresponding to an engraved field
spherical your controls.

Sign code

<fieldset>
  <div class="field-row">Take out one: div>
  <div class="field-row">
    <input id="radio10" type="radio" name="fieldset-example">
    <label for="radio10">Dinerslabel>
  div>
  <div class="field-row">
    <input id="radio11" type="radio" name="fieldset-example">
    <label for="radio11">Force-Inslabel>
  div>
  <div class="field-row">
    <input id="radio12" type="radio" name="fieldset-example">
    <label for="radio12">Diveslabel>
  div>
fieldset>

You would also provide your community with a ticket by placing a epic component
within the fieldset.

Sign code

<fieldset>
  <legend>On the unusual time's moodlegend>
  <div class="field-row">
    <input id="radio13" type="radio" name="fieldset-example2">
    <label for="radio13">Claire Saffitzlabel>
  div>
  <div class="field-row">
    <input id="radio14" type="radio" name="fieldset-example2">
    <label for="radio14">Brad Leonelabel>
  div>
  <div class="field-row">
    <input id="radio15" type="radio" name="fieldset-example2">
    <label for="radio15">Chris Moroccolabel>
  div>
  <div class="field-row">
    <input id="radio16" type="radio" name="fieldset-example2">
    <label for="radio16">Carla Lalli Musiclabel>
  div>
fieldset>

TextBox

A textual jabber field (assuredly is known as an edit control) is a
rectangular control where the particular person enters or edits textual jabber. It will
be defined to increase a single line or various traces of textual jabber.

Textual jabber boxes can rendered by specifying a textual jabber type on an
input component. As with checkboxes and radio buttons, you
can have to silent provide a corresponding ticket with a smartly space for
attribute, and wrap each in a container with the self-discipline-row class.

Occuptation

Sign code

<div class="field-row">
  <label for="text17">Occuptationlabel>
  <input id="text17" type="text" />
div>

Additionally, you may perchance presumably presumably fabricate exercise of the self-discipline-row-stacked class
to location your ticket above the input as an different of beside it.

Take care of (Line 1)

Take care of (Line 2)

Sign code

<div class="field-row-stacked" style="width: 200px">
  <label for="text18">Take care of (Line 1)label>
  <input id="text18" type="text" />
div>
<div class="field-row-stacked" style="width: 200px">
  <label for="text19">Take care of (Line 2)label>
  <input id="text19" type="text" />
div>

To increase various traces within the particular person’s input, exercise the textarea
component as an different.

Additional notes

Sign code

<div class="field-row-stacked" style="width: 200px">
  <label for="text20">Additional noteslabel>
  <textarea id="text20" rows="8">textarea>
div>

Dropdown

A descend-down checklist field permits the different of handiest a
single merchandise from a checklist. In its closed order, the control displays
the contemporary fee for the control. The particular person opens the checklist to swap
the fee.

Dropdowns will even be rendered by utilizing the capture out and possibility
parts.

Sign code

<select>
  <option>5 - Amazing!option>
  <option>4 - Gargantuan!option>
  <option>3 - Ravishing appropriateoption>
  <option>2 - No longer so immenseoption>
  <option>1 - Heart-brokenoption>
select>

By default, the first possibility will be selected. You would also swap this by
giving one of your possibility parts the selected
attribute.

Sign code

<select>
  <option>5 - Amazing!option>
  <option>4 - Gargantuan!option>
  <option selected>3 - Ravishing appropriateoption>
  <option>2 - No longer so immenseoption>
  <option>1 - Heart-brokenoption>
select>

Window

The next parts illustrate tips on how to manufacture complete windows using
98.css.

Title Bar

On the end edge of the window, inside of its border, is the title bar
(also reffered to because the caption or caption bar), which extends across
the width of the window. The title bar identifies the contents of the
window.

Contain mumble buttons related with the favored commands of the
main window within the title bar. These buttons act as shortcuts to particular
window commands.

You would also fabricate a total title bar by making exercise of three classes,
title-bar, title-bar-textual jabber, and title-bar-controls.

Sign code

<div class="title-bar">
  <div class="title-bar-text">A Title Bardiv>
  <div class="title-bar-controls">
    <button aria-label="Close">button>
  div>
div>

We fabricate exercise of aria-ticket to render the Discontinuance button, to let
assistive applied sciences know the intent of this button. You would exercise
“Decrease” and “Maximize” admire so:

Sign code

<div class="title-bar">
  <div class="title-bar-text">A Title Bardiv>
  <div class="title-bar-controls">
    <button aria-label="Minimize">button>
    <button aria-label="Maximize">button>
    <button aria-label="Close">button>
  div>
div>

Window contents

Each and each window has a boundary that defines its shape.

To give our title bar a residence, we fabricate exercise of the window
class. This affords a raised outer and inside of border, to boot to about a
padding. We can freely resize the window by specifying a width within the
container model.

Sign code

<div class="window" style="width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">A Total Windowdiv>
    <div class="title-bar-controls">
      <button aria-label="Minimize">button>
      <button aria-label="Maximize">button>
      <button aria-label="Close">button>
    div>
  div>
div>

To plot the contents of the window, we exercise the window-physique
class below the title bar.

A Window With Stuff In It

There’s so noteworthy room for activities!

Sign code

<div class="window" style="width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">A Window With Stuff In Itdiv>
    <div class="title-bar-controls">
      <button aria-label="Minimize">button>
      <button aria-label="Maximize">button>
      <button aria-label="Close">button>
    div>
  div>
  <div class="window-body">
    <p>There's so noteworthy room for activities!p>
  div>
div>

TreeView

A tree see control is a definite checklist field control
that displays a local of objects as an indented outline primarily based completely mostly
on their logical hierarchical relationship.

To render a tree see, exercise an ul component with the
tree-see class. The formative years of this checklist (li
parts), can own whatever you may perchance admire.

• We can put
• ✨ No subject ✨
• We need in right here

Sign code

<ul class="tree-view">
  <li>We can putli>
  <li><strong style="color: purple">✨ No subject ✨strong>li>
  <li>We need in right hereli>
ul>

To fabricate this a tree, we can nest further ul parts
(no class wanted on these). This may provide them with a pleasant dotted
border and indentation for instance the structure of the tree.

• Desk of Contents
• What’s web vogue?
• CSS
  • Selectors
  • Specificity
  • Properties
• JavaScript
  • Design conclude away from at all costs
• HTML
• Special Thanks

Sign code

<ul class="tree-view">
  <li>Desk of Contentsli>
  <li>What's web vogue?li>
  <li>
    CSS
    <ul>
      <li>Selectorsli>
      <li>Specificityli>
      <li>Propertiesli>
    ul>
  li>
  <li>
    JavaScript
    <ul>
      <li>Design conclude away from at all costsli>
    ul>
  li>
  <li>HTMLli>
  <li>Special Thanksli>
ul>

Concerns, Contributing, etc.

98.css is MIT licensed.

Refer to the GitHub issues website to gaze bugs
in my CSS or portray contemporary ones. I’ll perchance also in actual fact admire to gaze your pull requests (particularly these contemporary to
commence-source!) and can fortunately provide code overview. 98.css is a fun, foolish challenge and I’ll perchance also admire
to manufacture it a fun set to manufacture your commence-source muscle.

Thanks for checking my runt challenge out, I’m hoping it brought you some pleasure this day. Settle into consideration
starring/following alongside on GitHub and presumably
subscribing to more fun issues on my twitter. 👋