Markup Refine

markup-refine-lib refines semantic HTML without taking over the rest of your application. Import the CSS, add data-mr only where semantic styling should apply, and opt into components or JavaScript behavior only when needed.

Quick start

import "markup-refine-lib/css";
import "markup-refine-lib/behaviors"; // optional

<main data-mr class="mr-container">
  <h1>Users</h1>
  <form>
    <label>Name <input name="name" /></label>
    <button>Save</button>
  </form>
</main>

Stable design

• [data-mr] scopes semantic/reset styling.
• --mr-* tokens provide theming.
• mr-* classes provide explicit component/layout presentation.
• data-mr-* provides optional progressive enhancement.
• Native HTML/ARIA carries state whenever possible.

Start with scoped semantic HTML, then seetheming,components,layout, andprogressive enhancement.