Skip to content

radogado/niui

Repository files navigation

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]