node package manager

natuive

natUIve: mostly native front-end framework

13 KB framework leveraging browsers' built-in capabilities, with subtle customisation. Features demo (minified), WordPress theme, Microsoft homepage, Imperial Innovations homepage, Pebble homepage, Seat 61, JetBlue, Mitsubishi Regional Jet, MUBI, SWISS, Mapbox, Airbnb, GOV.UK, Classless demo

  • Unbreakable, flexible (no hardcoded dimensions), responsive grid. Supports Bootstrap-style wrapping columns, but with .col3 (1/3) etc., instead of .col-**-4 (4/12). Auto equal width columns with equal height and vertical alignment*.
  • Baseline-aligned text elements*
  • Embeddable grid and elements*
  • Built around edge cases (overflowing content etc)
  • CSS reset
  • Really blank default style, unlike frameworks with baked-in rounded edges, shadows etc*
  • Semantic structure
  • Balanced functional layout
  • (Mobile) navigation
  • Drop-down nav: Touch-first, CSS-only, JS enhanced, 1-3 levels, responsive, label/link items support
  • Buttons
  • Modal windows with local or external content
  • Lightbox gallery supporting huge galleries* and click to zoom
  • Tooltips with full HTML content*
  • Nested ordered lists*
  • Forms with validation, dynamic submission without page reload, full customisation and accessibility, including native file drop
  • Auto-expanding textarea*
  • Native sliders*, swipeable on mobile and desktop, with numbered or thumbnail navigation, vertical and full screen options, slider inside slider
  • Accordions
  • Tabs
  • Cards
  • Quote block
  • Drop Caps
  • Tables accessible on narrow screens by scrolling; sortable*
  • Footer sticking to the very bottom on short pages*
  • 'Back to top' button
  • Animated anchor links
  • Language selector
  • Native video player
  • Good usability without any classes*
  • Aspect ratio image container*
  • Support for Android Browser scrolling via polyfill overthrow.js*
  • CSS-only viewport height header*
  • URI parameters relay to links*
  • Arabic layout ready*
  • Masonry CSS-only*
  • CSS-only parallax scrolling* and fixed background option
  • WordPress theme*
  • Notificaton bar
  • Functional without JS and accessible without CSS*
  • 6 KB CSS + optional 6 KB JS (combined, minified, OS X gzip)
  • No IE conditional operators HTML5 elements also for IE8 with html5shiv
  • No jQuery or other dependencies*
  • Supporting IE8+, Safari, Chrome, Firefox, Opera, Android 2.3+, iOS, Windows Phone
  • Graceful degradation
  • Full documentation in natUIve.pdf
  • Includes a FREE picture of a cat

* exclusive features, missing in popular frameworks

© 2014-2016 rado.bg

–––

natUIve 1.5

  • Unified Flexbox grid with equal height, vertical alignment and auto wrapping
  • Modular source code
  • Cards
  • Balanced for 10 common page designs
  • Vertically centered viewport banner
  • Click to zoom in lightbox
  • Full screen lightbox

–––

natUIve 1.4

  • New
    • Sortable tables
    • Masonry CSS-only
    • isInViewport()
    • Drop-down nav: Touch-first, CSS-only, JS enhanced, 1-3 levels, responsive, label/link items supporting
  • Improved
    • Tooltip for touch
    • parentByClass() replaced by versatile getClosest()
    • Slider in CSS-only more now has visual cues
    • Form validation for email and URL inputs
    • Form: input type=number with optional data-digits to specify exact digits required
    • WordPress Gallery captions

–––

natUIve 1.3

  • Core
    • Sass CSS for $font-size and $line-height
    • Reduced class dependencies
    • HTML5 elements
    • Themes support
    • openFullWindow(‘content’)
    • Overflowing mobile nav scrollable
    • Node manipulation preserves events
    • Aspect ratio image container
    • Scroll polyfill for Android Browser with overthrow.js
    • Option for Header+Banner (“Hero”) to take up .viewport-height (CSS only)
    • Optimisations and fixes
  • natUIve WordPress theme
  • Lightbox
    • Lazy loading images to support huge galleries
  • Slider
    • Rewritten slide animation to support huge sliders
    • Headless full-window option
  • Video player
  • Tabs

–––

natUIve 1.2

  • Core
    • 50% wide columns option on narrow screens
    • Rows with border option
    • Anchor links animated by CSS
    • Various code optimisations
  • Slider
    • Vertical version
    • Full-screen version
  • Form
    • Border on focus
    • Dynamic form submit without page reload
  • Modal
    • External content via PHP

–––

natUIve 1.1

  • More stability and compatibility
  • Core:
    • Clean, seamless row embedding without padding creep
    • Wrap Grid, which wraps equal-width columns on multiple lines
    • Browser capabilities detection, instead of user agent
  • Tables:
    • Highlight row by hover
  • Lightbox:
    • Image captions
    • Centered/downscaled images by CSS only
    • Lightbox link can be anything, not just a thumbnail image
  • Modal windows:
    • The link can have child elements
    • A modal window can have any content – modalWindow(‘HTML')
  • Form:
    • Supports dragging a file to a file input
    • Flat version with stacked labels/inputs
  • Slider:
    • Auto-slide option
    • Jumping from last to first and first to last