View Code? Open in Web Editor NEW

Capture the feel of the early web with A2k, the Windows2000 inspired web component library

License: MIT License

JavaScript 17.33% HTML 2.60% TypeScript 69.95% Shell 0.13% CSS 9.99%

a2k's Introduction

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 for an overview of a2k
The demo site for the full a2k experience.
The storybook to play with each component.

Sponsor

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

Components

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 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

a2k's People

Contributors

Stargazers

Watchers

a2k's Issues

Refactor imports to use scoped module elements package

Problem: https://twitter.com/AndricoKaroulla/status/1566484444961193984

Package: https://open-wc.org/docs/development/scoped-elements/

Refactor drag controller logic to be in line with corresponding Smashing article

Improve the dragging logic so that it matches what's used in the Smashing article:

Key improvements include:

Removing use of Lit directives, so that the component can be used cross-frameworks
Improve the API and reliability through better selectors
Improve out-of-bounds logic
Use translate instead of positioning

https://www.smashingmagazine.com/2022/09/building-retro-draggable-web-component-using-lit/

Move the DesktopIcon component to an IconButton package

The DesktopIcon component doesn't need to be coupled to the Desktop package and instead can be its own package that can be used in a variety of different contexts.

Components don't work when downloaded from the CDN

Button's width changes on click down

Steps to reproduce:

Navigate to Storybook
Click the "auto" button
Observe that it affects the layout around itself when it's pressed

Desired behaviour

Interacting with the button should not affect the layout of the DOM

down-click.mov

Recommend Projects

andrico1234 / a2k Goto Github PK