Skip to content
Lightweight, feature-rich front-end framework
Branch: gh-pages
Clone or download

Latest commit

Latest commit d4902bc Mar 31, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml Aug 28, 2019
demos Drop nav – reverse sub nav fix Mar 31, 2020
dist Drop nav – reverse sub nav fix Mar 31, 2020
images ... Feb 21, 2020
niui-wp Drop nav – reverse sub nav fix Mar 31, 2020
src Drop nav – reverse sub nav fix Mar 31, 2020
.gitignore Drop nav tabbing out – fixed Jul 12, 2019
.npmignore 2.0 Mar 27, 2019 Create Jul 31, 2017 Create Jul 31, 2017
Gruntfile.js Closure Compiler → Terser Mar 29, 2020
LICENSE Create LICENSE Jul 31, 2017 niui Feb 5, 2020
external.html BEM__modifiers Nov 21, 2019
index.html Accessible table sorting Mar 26, 2020
index.js niui Feb 5, 2020
kitchen.html Rich select: FF bottom padding when open Mar 13, 2020 niui Feb 5, 2020
package.json Closure Compiler → Terser Mar 29, 2020
robots.txt niui Feb 5, 2020

niui: mostly native front-end framework/library/toolkit

A lightweight framework leveraging browsers' built-in capabilities, with subtle and powerful customisation.

To use niui, get niui.min.css, niui.min.js and index.html and edit the latter. Check the homepage for details.

NPM usage:

  • npm install --save-dev niui-npm
  • require('./node_modules/niui-npm/index.js');

Demo pages (reimplemented real world examples)

WordPress theme, Microsoft, Imperial Innovations, Pebble homepage, Seat 61, JetBlue, Mitsubishi Regional Jet, MUBI, SWISS, Mapbox, Airbnb, GOV.UK, Google Design, Daring Fireball, Vitsœ, Apple, Brand Union, Tesla, Amnesty, Stripe, Star Wars, Norwegian, David Bowie Is (Japan), Uncharted: The Lost Legacy, Seehotel Jägerwirt, Truphone, Pixel Pioneers, Apex, Loco2,, Nikon D850, Enoden, Tuts+, Hasselblad Chinese, CNN Travel, Postbank, To Make a Film, Oslo

  • Unbreakable, flexible, responsive grid. Supports Bootstrap-style wrapping columns, but with ._1/3 (1/3) etc., instead of .col...4 (4/12). Auto equal width columns with equal height and vertical alignment.
  • Baseline-aligned typography, quote block, drop caps.
  • Unique class names
  • Embeddable grid and elements. Support for multiple modals, nested carousels, nested accordions etc
  • Built around edge cases (overflowing headlines, images etc)
  • Flat default style without rounded edges, shadows etc
  • Semantic structure
  • Dynamic components, dynamically initialised by MutationObserver
  • (Mobile) navigation. 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
  • Modal windows with multiple instances, supporting iPhone Safari toolbars
  • Lightbox gallery supporting huge galleries and click to zoom. Can be opened automatically by URI page#lightbox_id. Video in lightbox. Inline lightboxes switchable to full screen.
  • Tooltips with full HTML content
  • Nested ordered lists
  • Forms with validation, customisation and accessibility.
  • Native sliders, swipeable on mobile and desktop, with numbered or thumbnail (tabs) navigation, vertical and full window options, slider inside slider, fade in/out option, auto height option
  • Accordions
  • Tabs
  • Cards
  • Grid with inline popups
  • Tables accessible on narrow screens by scrolling; sortable.
  • Footer sticking to the very bottom on short pages
  • Language selector
  • Aspect ratio image container
  • Arabic (RTL) layout ready
  • Masonry CSS-only (vertical track only)
  • Parallax scrolling
  • Fixed background
  • WordPress theme with lightbox gallery
  • Notification bar
  • Click to copy to clipboard
  • Functional without JS and accessible without CSS
  • NPM install
  • Documentation
  • ~10 KB first view CSS + optional ~10 KB JS (combined, minified, macOS gzip)
  • Seamless transition from CSS-only to JS-enhanced layout
  • No dependencies
  • Supporting evergreen browsers and Internet Explorer (CSS-only)
  • All components accessible by keyboard

© 2014-2020

Standalone components

Accordion, Slider, Drop nav


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]



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

You can’t perform that action at this time.