Build retro user interfaces with modern web technologies a2000

a2000 (a2k)

Welcome to a2000 (or a2k for short).

a2000 is a UI library design to capture the feel of the early web using modern web tools and practices.

Note: This is a work in progress and is subjected to change. I welcome any and all feedback!

Check out the demo site for the full a2000 experience. You can also check out the Storybook to play around with each component. If you want to use a2000 in your own projects, you can follow the instructions.

Styles

a2000 comes with its own default set of styles

You can add it to your HTML using a CDN, like so:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@a2000/styles/a2k-styles.css" />

Adding this stylesheet applies the default base styles, variables, and typefaces.

a2000 uses the Pixelated MS Sans Serif typeface.

Components

To use the a2000 components in your applications, you'll need to install the a2000 packages using a package manager like npm or yarn.

Each component has a link to the full installation instructions.

Button

Buttons are components that allow your users to perform actions. These actions can include opening a modal, confirming an action, confirming a delete request, or submitting a form.

Click me Click me

Icons

Icons are pictures that can help a user recognise the meaning of an action/feature quickly. They can also be used to improve the visual design of a website.

You can combine icons with buttons and text to add a visual association to an action. This also increases the click area, which improves the accessibility of the component.

Marquee

Marquees are used to insert scrolling text into the web page. They are also used to increase the retro feel of your site by 1000%.

This is a marquee

Panel

The Panel is a div container that has retro styling pre-applied. Panels can be used to build more complex components. For instance, the taskbar and window components are both built from the panel.

Use me to give your site that Windows2000 feel

Progress

Progress menus are used to show the completion progress for a given task.

Select Menu

Select menus provide the user a way of choosing a value from pre-defined set of options. Select menus are great for presenting the user with a small number of options.

Taskbar

The Taskbar is an a2k component that renders a start menu. The start menu can be used to display the features of your site. In the future, the Taskbar may be used to expand and minimise windows, and more.

Text Field

Text fields allow a user to input free text. These can be used within form elements to capture and submit text inputted by the user

Window

The Window is an a2k component that renders absolute-postioned content to your site. Windows can be draggable and closable, and can render any type of valid HTML markup. Windows are a good option for alerts and programs.

Use me to give your site that Windows2000 feel.

Learn more

a2k is an independent project, created by me, Andrico. If you'd like to support a2k, you can do so by trying out the library and creating issues if you come across any problems. Starring on GitHub also helps the project grow.

You can also keep up to date on updates by following Andrico on Twitter