Home

Reno

The biggest little UI in the world.

The demo site: https://researchnow.github.io/reno/

Original visual designs: https://projects.invisionapp.com/d/main#/projects/prototypes/10491947

Documentation

Web components

All components are standard web components, which can be used with any framework or plain HTML. They are written to be compatible with restrictions of existing frameworks: they take children as is without updating them, or they do not take any children at all and generate their own making them invisible for a framework. In order to be easily stylable no shadow DOM is used.

• reno-content-switcher
• reno-form
• reno-modal
• reno-popup
• reno-progress
• reno-search
• reno-table
  • reno-table-view
  • reno-table-pager
  • reno-table-counter

More implementation details can be found in Technical details of Reno web components.

Styles

CSS stylings are code with SCSS. Styles do not pollute the common space but scoped to either top-level CSS classes like reno or reno-dark or to component tags like <reno-table>.

• Foundation:
  • colors
  • spacing
  • typography
  • icons
  • links
  • buttons
  • miscellaneous
• Form controls:
  • general form-related styles
  • checkboxes and radio buttons
  • labels
  • number
  • select
  • text and text areas
• CSS-only controls:
  • toggle — a form control based on a checkbox.
  • spinner
  • indeterminant progress indicators defined in the style file for reno-progress component.
• Web components listed above document their own styles.

Library

The library provides useful utilities of general nature, which can be used directly and serve as a foundation for Reno components.

• apportion() is a way to distribute an integer amount according to fractional parts in a way that minimizes the overall error.
• bsearch() implements a binary search in a sorted array.
• clean() removes a property by name from an object on all levels.
• cleanRegExp() removes properties identified by a regular expression from an object on all levels.
• clone() clones an object on all levels.
• Drag and drop package:
  • start()
  • common
  • rearrangeable
• formatting:
  • formatCurrency() formats a numeric currency value. The current implementation supports only USD.
  • formatNumber() formats a number to a fixed representation according to a specified precision using specified fractional part and millennia separators.
• getPath() retrieves a value from an object using a string path.
• isEqual() compares two objects for equality on all levels.
• modal is a module, which provides a way to show, hide, and populate a singleton modal container.
  • It serves as a foundation for reno-modal.
• popup is a module, which provides a way to show, hide, and populate a singleton popup container.
  • It serves as a foundation for reno-popup.
• pumpEvent() produces an event handler function, which changes a specified attribute on a specified element according to some event using delay() or some other time-handling function.
• pumpValue() produces an event handler function, changes a specified attribute on a specified element according to some value using delay() or some other time-handling function.
• seq() runs an array of asynchronous operations sequentially.
• timing and delays:
  • debounce() collects input within a time window, then calls a function with the last input.
  • delay() delays a function call by a specified time ignoring all input but the last.
  • throttle() calls a function only once within a specified time window using the latest input.
• toPrecision() rounds off a number to a given number of decimal places.
• toTitleCase() extracts words from a string and capitalizes them.

React-specific helpers

Reno provides useful helpers for React.

• CustomEventHandler
• MountedComponent

General hints can be found in Writing web components for use with React.

Historical documents

• popup before 1.10.0