https://github.com/radogado/niui

Lightweight, feature-rich, accessible front-end UI library
https://github.com/radogado/niui

accordion aspect-ratio baseline buttons cards css forms frontend grid html javascript lightbox lists masonry modal-windows nav parallax-scrolling slider tooltips wordpress-theme

Last synced: 17 days ago
JSON representation

Lightweight, feature-rich, accessible front-end UI library

• Host: GitHub
• URL: https://github.com/radogado/niui
• Owner: radogado
• License: mit
• Created: 2013-06-25T19:44:39.000Z (over 11 years ago)
• Default Branch: gh-pages
• Last Pushed: 2023-12-18T19:27:54.000Z (11 months ago)
• Last Synced: 2024-04-13T22:16:55.744Z (7 months ago)
• Topics: accordion, aspect-ratio, baseline, buttons, cards, css, forms, frontend, grid, html, javascript, lightbox, lists, masonry, modal-windows, nav, parallax-scrolling, slider, tooltips, wordpress-theme
• Language: HTML
• Homepage: https://niui.dev
• Size: 156 MB
• Stars: 212
• Watchers: 17
• Forks: 26
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# niui is a lightweight, powerful and accessible UI library

To use niui, get [niui.min.css](https://radogado.github.io/niui/dist/niui.min.css), [niui.min.js](https://radogado.github.io/niui/dist/niui.min.js) and [index.html](https://radogado.github.io/niui/dist/index.html) and edit the latter. Or import the ES module js/niui.js. Check the [homepage](https://radogado.github.io/niui/) for details.

- Prefixed BEM class names

- Semantic structure

- Unbreakable, flexible, responsive [grid](https://radogado.github.io/niui/#grid) with alignment, embedding, borders option.

- Baseline-aligned [typography](https://radogado.github.io/niui/#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](https://radogado.github.io/niui/#dynamic-components), initialised by MutationObserver

- (Mobile) [navigation](https://radogado.github.io/niui/#nav) – horizontal, vertical, scrolling. Drop-down nav: Touch-first, CSS-only, JS enhanced, 1-3 levels, responsive, label/link items support

- [Buttons](https://radogado.github.io/niui/#buttons) with group container for proper line wrap and optional ripple effect

- [Modal windows](https://radogado.github.io/niui/#modal) using the Dialog element with many options – shadow, blur, multiple data sources

- Native [carousel](https://radogado.github.io/niui/#carousel), swipeable on mobile and desktop, vertical and full window options, carousel inside carousel, auto height option etc

- [Lightbox gallery](https://radogado.github.io/niui/#lightbox)

- [Tabs](https://radogado.github.io/niui/#tabs)

- [Tooltips](https://radogado.github.io/niui/#tooltip) with full HTML content, auto positioning and unaffected by overflow: hidden

- Nested (un)ordered [lists](https://radogado.github.io/niui/#lists)

- [Forms](https://radogado.github.io/niui/#forms) with validation, customisation and accessibility. Range input, file input, mandatory fields, optional fieldsets, rich select.

- [Accordions](https://radogado.github.io/niui/#accordion) – nested, grouped, in a grid

- [Cards](https://radogado.github.io/niui/#cards)

- [Tables](https://radogado.github.io/niui/#tables) accessible on narrow screens by scrolling; optionally sortable.

- [Aspect ratio](https://radogado.github.io/niui/#aspect-ratio) for image containers

- [Masonry](https://radogado.github.io/niui/#masonry) (vertical track only)

- [Parallax scrolling](https://radogado.github.io/niui/#parallax)

- [Fixed background](https://radogado.github.io/niui/#fixed-background)

- [WordPress theme](https://radogado.github.io/niui/niui-wp.zip) with lightbox gallery (Classic Editor only)

- [Notification bar](https://radogado.github.io/niui/#notifications)

- Click to [copy to clipboard](https://radogado.github.io/niui/#copy)

- 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](http://rado.bg)

## Standalone components

[Accordion](https://radogado.github.io/n-accordion/), [Carousel](https://nativecarousel.com), [Select](https://radogado.github.io/n-select/), [Modal](https://radogado.github.io/n-modal/), [Tooltip](https://github.com/radogado/n-tooltip)

## Contributors

### Code Contributors

This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].



### Financial Contributors

Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/niui/contribute)]

#### Individuals



#### Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/niui/contribute)]