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:
-
Node.js versions
^14.17.0 || ^16.0.0 || >= 18.0.0
. - Deno.
- Browsers matching the Browserslist query
> 0.5%, not OperaMini all, not dead
.
Non Deno projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check
comment:
-
compilerOptions.allowJs
should betrue
. -
compilerOptions.maxNodeModuleJsDepth
should be reasonably large, e.g.10
. -
compilerOptions.module
should be"node16"
or"nodenext"
.
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
:
Blockquote.css
Blockquote.mjs
Button.css
Button.mjs
ButtonSubmit.css
ButtonSubmit.mjs
Code.css
Code.mjs
Fieldset.css
Fieldset.mjs
global.css
Heading.css
Heading.mjs
Html.css
Html.mjs
Icon.css
Icon.mjs
IconTick.mjs
LinkCard.css
LinkCard.mjs
LinkNav.css
LinkNav.mjs
LinkText.css
LinkText.mjs
ListOrdered.css
ListOrdered.mjs
ListUnordered.css
ListUnordered.mjs
Loading.css
Loading.mjs
Margin.css
Margin.mjs
Nav.css
Nav.mjs
package.json
Para.css
Para.mjs
Picture.css
Picture.mjs
Pre.css
Pre.mjs
Scroll.css
Scroll.mjs
Select.css
Select.mjs
splitWordBreaks.mjs
syntax-highlighting-prism.css
Table.css
Table.mjs
Textbox.css
Textbox.mjs
theme.css
Toggle.css
Toggle.mjs
useCustomValidity.mjs
useMergedRef.mjs
useOnFocusReportValidity.mjs
WordBreaks.mjs