Quicknr Interface

The first Quicknr extra is here: a free, open source package of 12 Javascript and CSS web interface widgets that can be deployed on any HTML 5 website, not just those made with Quicknr.

Quicknr Interface works similarly to Bootstrap, but it is lighter, containing essentials only and not requiring jQuery.

The complete list of the widgets:

Arrow Anim: Animated arrow for pointing down, up, left or right. Usually down, on a landing page with a full-page hero image or carousel
Font Resize: Resizes the font of the element, usually BODY, in step with changes in the total screen area
Responsive: Makes a row of DIVs responsively adjust to screen width
Carousel: Fully featured carousel, the centrepiece of the package, with many options
Stickybar: A bar lower on the page than the top, that on scrolling the page down, will stick to the top of the page
Slider: Non-looping introductory slider, can be used with just one slide for an animated reveal of the element
Image Animator: Non-looping introductory image animator, that can zoom images for a fake moving appearance, and accepts an overlay object
Navigator Menu: Simple collapsible menu that automatically responds to changes in screen width
Scroller: Parallax scrolling widget
Winscroller: Any clickable object can be made a winscroller, animatedly scrolling the page to a target object. On the BODY tag, will create a "return to top" arrow on the bottom right of the window
X Icon: Close icon that can be applied to objects for hiding or removing them from the page
Accordion: Clickable questions that reveal answers

Widget parameters are set with HTML 5 dataset tag attributes - the web designer does not need to code any Javascript to create the widget. The widget code, however, is accessible from user's own code if needed.

Documentation presently exists only as a comment block at the top of the "js/qnr-interface.js" file.

Improvements and further development will continue as time allows.