Nearly Perpendicular Macaroons

    device-agnostic-ui

    11.0.0 • Public • Published

    Device Agnostic UI logo

    Device Agnostic UI

    Device agnostic styles, components and hooks for React apps — deviceagnosticui.com. One design for any viewport (size, orientation, resolution), input method (touch, mouse) or network speed. Simple to build, test and use.

    • 📦 Tiny bundle size. The minified and gzipped bundle size of individual modules are tested.
    • 📱 Mobile first. Intuitive layouts suitable for any screen size, without media queries.
    • ⌨️ Keyboard ok. Interactive components have clearly discernable :focus styles.
    • 🚨 Native UI. Lightweight, pretty and accessible form field validation messages.
    • 🌗 Dark mode. The color scheme adapts to the operating system’s light or dark mode.
    • 🎨 CSS variables. Easily tweak the theme globally or in your components.
    • 🌏 Few global styles. No intrusive normalization or resets; just the :root essentials.
    • 🖌 Style raw HTML. Special <Html> component to style rendered Markdown.
    • 🧠 Semantic markup. Lean use of semantically appropriate HTML elements.
    • ⚛️ Modern React. Elegant use of React hooks, refs and fragments makes for a great DX.
    • Type safety. Modules are typed via TypeScript JSDoc comments.

    Installation

    For Node.js, to install device-agnostic-ui and its react peer dependency with npm, run:

    npm install device-agnostic-ui react

    For Deno and browsers, an example import map:

    {
      "imports": {
        "class-name-prop": "https://unpkg.com/class-name-prop@6.0.0/classNameProp.mjs",
        "device-agnostic-ui/": "https://unpkg.com/device-agnostic-ui@11.0.0/",
        "react": "https://esm.sh/react@18.2.0"
      }
    }

    These dependencies might not need to be in the import map, depending on what device-agnostic-ui modules the project imports from:

    Theme, global, component, and syntax highlighting styles are exported in vanilla CSS files that must be manually loaded in your app, as necessary.

    Requirements

    Supported runtime environments:

    Non Deno projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check comment:

    Exports

    The npm package device-agnostic-ui features optimal JavaScript module design. It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported. These ECMAScript modules and CSS files are exported via the package.json field exports:

    /device-agnostic-ui/

      Install

      npm i device-agnostic-ui

      DownloadsWeekly Downloads

      4,232

      Version

      11.0.0

      License

      MIT

      Unpacked Size

      78.4 kB

      Total Files

      60

      Last publish

      Collaborators

      • jaydenseric