Welcome to a2000 (or a2k for short).
This UI library is designed to capture the feel of the early web, while employing modern UX and web practices.
Note: This is a work in progress, you should not use it in production. But if you decide to try it out, any and all feedback is welcome!
Check out:
- The docs for an overview of a2k
- The demo site for the full a2k experience.
- The storybook to play with each component.
Learn to build a component library using minimal tech with Component Odyssey. As a result, you'll:
- Become a more future-proof web developer
- Build components that your users will love
- Boost your career opportunities
- Learn to do more with less
- a2k-blue-screen
- a2k-button
- a2k-cover
- a2k-desktop
- a2k-icons
- a2k-marquee
- a2k-panel
- a2k-progress
- a2k-select
- a2k-stack
- a2k-startup
- a2k-styles
- a2k-taskbar
- a2k-text-field
- a2k-utilities
- a2k-window
Begin by forking the repo. Whilst in the root directory:
run nvm use, or ensure you're the node version specified in the .nvmrc file.
- install dependencies using yarn.
- ensure the tests are passing by running yarn test.
- kick off the dev server by running yarn develop.
- run the docs site locally using yarn docs:start.
- jump into whichever you package you want to change.
- view your changes in your locally running docs.
a2k uses:
- 💪🏾 TypeScript to keep things strong(ly typed).
- 🔥 Lit for quickly crafting reactive web components
- 📝 Changesets to manage changelogs, versioning, and publishing.
- 🛠 Web Test Runner for browser testing.
- 🧼 ESLint + Prettier for keeping code clean like a money machine.
- 🎨 Storybook for cataloging each component.
- ☁️ Netlify for hosting a2k in the cloud.
- 🙋🏽♂️ Andrico for keeping things ticking along.
To utilise the default CSS stylesheets for a2k, you'll need to install or download the styles.
View the @a2000/styles for installation instructions.
Every a2k web component inherits styles from the CSS variables defined in the a2k-styles.css file. These styles can be overridden by applying styles to the same variables at a later point in the cascade.
E.g. Overriding the default font-family from Tahoma to Verdana can be done in the following way:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@a2000/styles/a2k-styles.css"
/>
<link rel="stylesheet" href="./custom-styles.css" />
</head>
<body>
<!-- Content -->
</body>
</html>./custom-styles.css
:root {
--font-primary: Verdana;
}You can view which css variables you can override from within the a2k-styles.css file