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]
Open Source Agenda is not affiliated with "Niui" Project. README Source:
radogado/niui