https://github.com/andrico1234/a2k
Capture the feel of the early web with A2k, the Windows2000 inspired web component library
https://github.com/andrico1234/a2k
css javascript lit storybook web-components
Last synced: 5 months ago
JSON representation
Capture the feel of the early web with A2k, the Windows2000 inspired web component library
- Host: GitHub
- URL: https://github.com/andrico1234/a2k
- Owner: andrico1234
- License: mit
- Created: 2021-12-21T08:12:55.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-24T21:11:18.000Z (almost 2 years ago)
- Last Synced: 2024-07-25T20:11:09.384Z (almost 2 years ago)
- Topics: css, javascript, lit, storybook, web-components
- Language: TypeScript
- Homepage: https://a2000.netlify.app/
- Size: 4.44 MB
- Stars: 71
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A2K (a2000)
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](https://a2000-docs.netlify.app/) for an overview of a2k
- The [demo](https://a2000.netlify.app) site for the full a2k experience.
- The [storybook](https://a2000-storybook.netlify.app/) to play with each component.
---
## Sponsor
Learn to build a component library using minimal tech with [Component Odyssey](https://component-odyssey.com/). 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
---
## Components
- [a2k-blue-screen](https://github.com/andrico1234/a2k/tree/main/packages/blue-screen)
- [a2k-button](https://github.com/andrico1234/a2k/tree/main/packages/button)
- [a2k-cover](https://github.com/andrico1234/a2k/tree/main/packages/cover)
- [a2k-desktop](https://github.com/andrico1234/a2k/tree/main/packages/desktop)
- [a2k-icons](https://github.com/andrico1234/a2k/tree/main/packages/icons)
- [a2k-marquee](https://github.com/andrico1234/a2k/tree/main/packages/marquee)
- [a2k-panel](https://github.com/andrico1234/a2k/tree/main/packages/panel)
- [a2k-progress](https://github.com/andrico1234/a2k/tree/main/packages/progress)
- [a2k-select](https://github.com/andrico1234/a2k/tree/main/packages/select)
- [a2k-stack](https://github.com/andrico1234/a2k/tree/main/packages/stack)
- [a2k-startup](https://github.com/andrico1234/a2k/tree/main/packages/startup)
- [a2k-styles](https://github.com/andrico1234/a2k/tree/main/packages/styles)
- [a2k-taskbar](https://github.com/andrico1234/a2k/tree/main/packages/taskbar)
- [a2k-text-field](https://github.com/andrico1234/a2k/tree/main/packages/text-field)
- [a2k-utilities](https://github.com/andrico1234/a2k/tree/main/packages/utilities)
- [a2k-window](https://github.com/andrico1234/a2k/tree/main/packages/window)
## Development
### Running a2k ui locally
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.
## Tech stack
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.
## Basic Usage
## CSS
To utilise the default CSS stylesheets for a2k, you'll need to install or download the styles.
View the [@a2000/styles](https://github.com/andrico1234/a2k/tree/main/packages/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:
```html
```
`./custom-styles.css `
```css
:root {
--font-primary: Verdana;
}
```
You can view which css variables you can override from within the [a2k-styles.css](https://github.com/andrico1234/a2k/blob/main/packages/styles/a2k-styles.css) file