Skip to content
10+10 KB feature-rich front-end framework
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos
dist
guide
images
natuive-grid-bootstrap
natuive-wordpress
src
.gitignore
.npmignore
CODE_OF_CONDUCT.md
CONTRIBUTING.md
Gruntfile.js
LICENSE
README.md Vertical tabs glitch fix Feb 20, 2019
external.html
index.html Update index.html Mar 22, 2019
index.js
kitchen.html
package-lock.json WP: retina gallery thumbnails Feb 11, 2019
package.json

README.md

natUIve: mostly native front-end framework

10+10 KB framework leveraging browsers' built-in capabilities, with subtle customisation.

To use natUIve, copy dist and edit dist/index.html. Check the homepage for details.

NPM usage:

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

Demo pages

Kitchen sink, 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, VI.nl, Nikon D850, Enoden, Tuts+, Hasselblad Chinese, CNN Travel, Postbank


  • 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 BEM-like class names
  • Embeddable grid and elements. Support for multiple modals, nested carousels, nested accordions etc
  • Built around edge cases (overflowing headlines etc)
  • Blank default style, without rounded edges or shadows
  • 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, fully 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, full customisation and accessibility, including native file drop. Auto-expanding textarea. Optional fieldsets.
  • 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*
  • Animated anchor links and 'Back to top' button
  • Language selector
  • Aspect ratio image container
  • Arabic (RTL) layout ready
  • Masonry CSS-only (vertical track only)
  • CSS-only parallax scrolling
  • Fixed background
  • WordPress theme
  • 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)
  • No jQuery or other dependencies
  • Supporting evergreen browsers and Internet Explorer (CSS-only)
  • All components accessible by keyboard

* exclusive features, missing in popular frameworks

© 2014-2019 rado.bg

Standalone components

Accordion, Slider, Drop nav

You can’t perform that action at this time.