Device Agnostic UI

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

Features

📱

Mobile first

Intuitive layouts suitable for any screen size, without media queries.

⌨️

Keyboard ok

Interactive components have clearly discernable :focus styles.

🌗

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.

Setup

  1. Install from npm:

    npm install device-agnostic-ui
  2. Customize the Babel config:

    {
      "presets": [
        [
          "next/babel",
          {
            "styled-jsx": {
              "optimizeForSpeed": false
            }
          }
        ]
      ]
    }

    Hopefully this won’t be necessary in the future, see zeit/styled-jsx#602.

  3. Setup the essential global styles.
  4. Use some components!