README
Device Agnostic UI
Device agnostic styles, components and hooks for React and Next.js 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
To install with npm, run:
npm install device-agnostic-ui
Theme, global, component, and syntax highlighting styles are exported in vanilla CSS files that must be manually loaded in your app, as necessary.
Requirements
- Node.js:
^12.22.0 || ^14.17.0 || >= 16.0.0
- Browsers:
> 0.5%, not OperaMini all, not IE > 0, not dead
Exports
These ECMAScript modules and CSS files are published to npm and exported via the package.json
exports
field:
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
LinkActive.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