fervillz / natuive

13 KB feature-rich front-end framework

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*
• WordPress theme*
• 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
• 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