Red Badger Components

Components are a beautiful way of splitting your front end UI and logic into self contained packages, which can be reused and even released as open source. During our recent World Risk Review project we've used components extensively for rapid UI implementation.

For example, the Search page was implemented as a parent component containing child components for search results, search filters and suggestions. Lots of internal components were implemented, which are very specific to this project. We've also released new public components, as well as forked and improved many of the existing ones.

Quick guide to Component.io

There is a great introduction post on the Component approach by Stuart Harris. In a nutshell, all components are designed to be a lightwave independent front end package, which you can plug into any web application, or even a static page. Most of our components also include /test/index.html file with example of using that particular component. Here is how you can quickly start using components (and creating new ones!).

Assuming that you already have Homebrew installed on your Mac.

Requirements:

• Install Node.js and npm: brew install node
• Install component.js: npm install -g component

Steps:

• Clone a component git repository: git clone git@github.com:redbadger/pager.git
• Navigate into a directory with component. Run component install to fetch dependencies
• Run component build to combine all dependencies and assets into a single build
• Open test/index.html file with your browser. This file will try to include build/build.js (and sometimes build/build.css) files, which should be generated now

You can integrate the component build step into your Gruntfile, or just copy generated build files into your project. You can also setup your web app to fetch latest version of the particular component, build it and include into your app.

Word of caution: the world of custom components is a bit wild now, and it's a good idea to freeze the component version, or even the whole component build in your app.

Here are some of our public components that we built and improved over the course of the WRR project.

Pager

https://github.com/redbadger/pager

Fork of the original pagination component. Originally a very simple UI component displaying all pages at once, with links. Our current fork can:

• Go to First and Go to Last page buttons
• Display a window of pages - limiting number of page links to a specified amount to the both sides from current page

Demo

Usage 

• Total number - total amount of, say, search results
• Per page - how many entries do you want to display on a single page. Pager will calculate the amount of pages and render page links.
• Max pages - when there are too many entries and pages, you can specify how many page links will be displayed on the left and right from the current page link.

Datepicker

https://github.com/redbadger/datepicker

Fork of the original Datepicker component, now heavily rewritten and improved. New features include:

• Value is now being set and retrieved as Date
• CSS was improved to display background correctly
• It's possible to click outside the datepicker to close it
• Keyboard controls were added, specifically escape to close, enter to set value by hand
• Datepicker emits events when date changes
• Support for date format was added

Demo

Usage

You can specify the date format with a string like "MM.DD.YYYY". Separator symbol and order of elements will be parsed from this string. You can also use "YY" for a two digit year value, or "YYYY" for full year.

Cookie disclaimer

https://github.com/redbadger/cookie-disclaimer

A simple UI component for displaying cookie disclaimer policy on top of the website. Supports local storage. Once closed, it will write a cookie-consent: true local storage entry and will not reappear again.

Demo

Usage

You can specify any html content for the cookie disclaimer. "Close" button will be added by the component.

Collapsible

https://github.com/redbadger/collapsible

A simple Bootstrap-like collapsible component for your DOM elements. Handy when you have a section with title, and you'd like to toggle collapse on the section by clicking on title. Collapsible is especially useful when combined with CSS media queries to build mobile friendly navigations.

Usage

• Tag the collapsible toggle switch with .collapse-toggle and data-collapse attribute equal to the collapsible target selector
• Call collapsible with two arguments - root selector and class name to be applied on the toggle when target is collapsed

Collapsible will parse all elements under root selector for data-collapse attributes and make them collapsible.

Body is used as root selector, and it will be used to find elements with data-collapse attribtues. .collapsed and .expanded classes will be applied to the toggle element.

Pillbox

https://github.com/redbadger/pillbox

Fork of the original component. Now extended with:

• Support for autocomplete
• Whitelisted tags
• Supporting tags with spaces

Demo

Conclusion

Components offer a nice way of abstracting parts of front end logic and UI. They are very lightweight, generally do not depend on libraries like jQuery, and are easy to reuse in different parts of the application, or between applications. We hope you might find some of our components useful for you. There are so many things you can do with components, and the best part is - you can use them today.