Learn to build components that work anywhere with Component Odyssey
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.
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
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