/todomvc-app-css-alt

Primary LanguageCSS

todomvc-app-css-alt

NOTE: This is not an official repo from todomvc and only serves as personal research.

Overview

This todomvc-app-css-alt repo implements changes to adhere to some a11y audit results that needed to get addressed.

  • Visually, there are only minor changes introduced, that overall don't impact the look and feel of a todomvc application.
  • Structurely, changes have been made to ensure formfields are treated correctly and that the application is accessible to a broader audience.
  • A more detailed explanation of changes can be found in the changelog.

How to use

This package allows you to use the stylesheets in various ways, either by including the complete rules (index.css, index.min.css) in a link tag, or by importing partial css / css module files in your code.

install the package

npm install todomvc-app-css-alt

including the styles in html with a link tag

<link href="todomvc-app-css-alt/dist/index.min.css" rel="stylesheet">

importing the styles in JavaScript:

import "todomvc-app-css-alt/dist/global.css";

importing a css module (React example):

import styles from "todomvc-app-css-alt/dist/footer.module.css";

export default function Footer() {
    return (
        <footer className={styles.footer}>
			<p className={styles["footer-text"]}>
                Part of <a className={styles["footer-link"]} href="http://todomvc.com">TodoMVC</a>
            </p>
	</footer>
    )
}

constructable stylesheets:

import sheet from "todomvc-app-css-alt/dist/footer.constructable.js";

document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

constructable stylesheets in shadow DOM:

import sheet from "todomvc-app-css-alt/dist/footer.constructable.js";

const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets = [sheet];