niui-npm

niui is a lightweight, powerful and accessible UI library

To use niui, get niui.min.css, niui.min.js and index.html and edit the latter. Or import the ES module js/niui.js. Check the homepage for details.

• Prefixed BEM class names
• Semantic structure
• Unbreakable, flexible, responsive grid with alignment, embedding, borders option.
• Baseline-aligned typography, quote block, drop caps.
• Built for edge cases (overflowing headlines, images etc)
• Flat default style without rounded edges, shadows etc
• Optional rounded edges, border, shadow via Sass variables
• Dark theme
• Dynamic components, initialised by MutationObserver
• (Mobile) navigation – horizontal, vertical, scrolling. Drop-down nav: Touch-first, CSS-only, JS enhanced, 1-3 levels, responsive, label/link items support
• Buttons with group container for proper line wrap and optional ripple effect
• Modal windows using the Dialog element with many options – shadow, blur, multiple data sources
• Native carousel, swipeable on mobile and desktop, vertical and full window options, carousel inside carousel, auto height option etc
• Lightbox gallery
• Tabs
• Tooltips with full HTML content, auto positioning and unaffected by overflow: hidden
• Nested (un)ordered lists
• Forms with validation, customisation and accessibility. Range input, file input, mandatory fields, optional fieldsets, rich select.
• Accordions – nested, grouped, in a grid
• Cards
• Tables accessible on narrow screens by scrolling; optionally sortable.
• Aspect ratio for image containers
• Masonry (vertical track only)
• Parallax scrolling
• Fixed background
• WordPress theme with lightbox gallery (Classic Editor only)
• Notification bar
• Click to copy to clipboard
• RTL layout ready
• Accessible by keyboard
• 14 KB first view CSS + optional 12 KB JS (combined, minified, gzipped)
• Functional without JS and accessible without CSS
• Seamless transition from CSS-only to JS enhancement
• No dependencies

© 2014-2023 rado.bg

Standalone components

Accordion, Carousel, Select, Modal, Tooltip

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]