Skip to content

Latest commit

 

History

History
110 lines (82 loc) · 4.16 KB

README.md

File metadata and controls

110 lines (82 loc) · 4.16 KB
Raw

A2K (a2000)

Andricos2000. Build retro user interfaces with modern web technologies

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