Rapid UI

Components

Components are usually single-instance objects or libraries, initialized once and re-used throughout a site/theme/app.

Lightbox

Unified Login

Google Web Fonts

Fontello Icons

Controls

Controls are typically used (and re-used) independently from one another to add specific one-off functionality or layout to your site/theme/app.

Button

Create buttons in a flash with several designs to choose from. Buttons can be bound to javascript functions or hyperlinks by using an additional attribute in the shortcode.

Accordion

The accordion opens and closes when clicked to show or hide chunks of content. Great for reducing page clutter while still keeping that information available.

Grid

Grid does away with numerous column shortcodes and handles responsive columnized layouts from a single shortcode.

Horizontal Bar

The Horizontal Bar offers a simple way to visibly separate content or note a change in topic from one body of content to another.

Callout

Callouts add flare around a chunk of content. Easily create Quotes or other bold calls to action.

Caption Box

Caption Boxes make it easy to insert a captioned image which links to a URL or Javascript function.

Image List

The Image List takes ordered/unordered HTML lists a step further with modern styles.

Paged Menu

Perhaps the most advanced shortcode, the Paged Menu converts any WordPress 3.0+ Menu into a fully responsive paged menu similar to the iPhone screen.

Choice

Google Custom Search

Web Page Snapshot

Lightbox

Basic Usage:

To display the lightbox, call this Javascript function: rpLightbox();

Features:

  • A fully customizable lightbox component.
  • Use it as a fancy replacement for Javascript’s alert().
  • Use it as a modal dialog box for demanding someone’s attention.
  • Combine flags to make different lightbox types and behaviors like the close button (close-button), clicking outside the dialog to close it (dimmer-click-close), and pressing the Esc key to close it (esc-close).

Attributes:

  • Title, Message, Icon, Type, Flags (close-button | dimmer-click-close | esc-close),

Demo 1 - Modal Window - One Close Method

Demo 2 - Dialog Box - Two Close Methods

Demo 3 - Popup - Two Close Methods

Unified Login

Basic Usage:

To initiate a “Login with Google”, call this Javascript function: login_openid(“google”);

To embed an OpenID login form, use this shortcode: [[rp_login]]

Features:

  • Login with Google, Yahoo, Facebook, MyOpenID (or simply WordPress).
  • Integrates with the standard WordPress Users system, does not replace it. Continue to take advantage of standard user meta, etc.
  • Automatic WordPress User registration upon successful authentication with third-party provider; obeys the standard setting “Users can register” in the backend.
  • Link multiple accounts with a single WordPress User account. User’s can manage their linked accounts at the standard edit profile page.
  • Very similar to StackOverflow / StackExchange.

Attributes:

  • None

[rp_login]

Google Web Fonts

Basic Usage:

This:

<span style=”font-family:Oswald;”>This text uses the Oswald font from Google.</span>

Becomes this:

This text uses the Oswald font from Google.

Features:

  • Over 600 (and counting!) fonts.
  • Use them just like you would standard fonts in CSS.

Attributes:

  • None

Nothing here yet…

Fontello Icons

Basic Usage:

This:

<span class=”icon-flash”>A simple span element</span>

Becomes this:

A simple span element

Features:

  • Scalable vector-based font icons.
  • Add an icon of any size/color to any HTML element by specifying a CSS class attribute on that element.
  • Or just add the class to a new <i> element.
  • Icon packs include their own class names, with a custom prefix for compatibility.
  • Build custom icon packs from Fontello with just the icons you need (lightweight!).

Attributes:

  • None

Nothing here yet…

Button

Basic usage:

[rp_button]

Features:

  • Buttons can be linked to other pages or shortcode actions.
  • Icons are provided through CSS sprites or Fontello icon packs.
  • Pure CSS animations.
  • Included designs: cassette (default), modern, 3d, perforated, pillar
Attributes:
  • Content attributes: caption
  • Style attributes: design, color, icon_class, style
  • Behavioral attributes: link, target

Example 1: [rp_button] yields:

Button

This button uses the default design (cassette) and doesn’t actually do anything since no other attributes have been specified.

Example 2: [rp_button caption="Google" icon="icon-gplus" link="http://www.google.com"] yields:

Google

This button navigates to Google when clicked because the link attribute has been specified.

Example 3: [rp_button caption="Button" design="modern"][rp_button caption="Button" design="3d"][rp_button caption="Button" design="perforated"][rp_button caption="Button" design="pillar"][rp_button caption="Button" design="flat"] yields:

Button    Button    Button    Button    Button

These buttons use a non-default design.

Horizontal Bar

Basic usage:

[rp_hbar]

Features:

  • The horizontal bar is by far the easiest way to visually divide vertically stacked content.
Attributes:
  • Style attributes: design

Example 1: [rp_hbar]

Example 2: [rp_hbar design="crease"]

Example 3: [rp_hbar design="float"]

Example 4: [rp_hbar design="stitch"]

Example 5: [rp_hbar design="crease2"]

Callout

Basic usage:

[rp_callout]

Features:

  • Callouts add flare to plain text or HTML, demanding more attention from the reader.
  • Choose from included designs or craft your own with CSS.
  • Included designs: balloon, float, quote, wave
Attributes:
  • Content attributes: caption
  • Style attributes: width, padding, design, style, icon_class

Example 1: [rp_callout][/rp_callout] yields:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example 2: [rp_callout design="wave"][/rp_callout] yields:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example 3: [rp_callout design="quote"][/rp_callout] yields:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Accordion / Toggled Content

Basic usage:

[rp_accordion]

Features:

  • Accordions are useful for condensing information that would normally clutter the page, while still allowing that information to be accessed.
  • Use text, HTML or even shortcodes inside the Accordion.
Attributes:
  • Content attributes: title
  • Style attributes: width, title_float, title_color, icon_float, icon_class, style, design

Example 1: [rp_accordion /][rp_accordion title_float="right" icon_float="left" /] yields:

Title
Custom text, HTML or shortcodes go here...
Title
Custom text, HTML or shortcodes go here...

Two calls to the accordion shortcode create an accordion-like expanding effect. Note the use of a trailing backslash /, required for self-enclosing shortcodes such as this one.

Example 2: [rp_accordion title="This is my custom title" title_float="center" icon_float="none" title_color="blue" design="perforated"]This is my custom text.[/rp_accordion] yields:

Lazy Dog
The quick brown fox jumps over the lazy dog.

The inner text is set by wrapping plain text or HTML inside opening and closing shortcodes.

Choice

Basic usage:

[rp_choice]

Features:

  • Customizable start/end labels via attributes.
  • Reverse or Randomize the Start/End points via attributes.
  • Utilizes a hidden <select> element for storing and submitting likert value to the server.
Attributes:
  • Content attributes: labels, start_text, end_text, reverse

Example 1: [rp_choice design="likert" width="100%"] yields:

Least Likely
1
 
2
 
3
 
4
 
5
Most Likely

Example 2: [rp_choice design="steps" width="100%" labels="1,2,3,4"] yields:

Least Likely
1
 
2
 
3
 
4
Most Likely

Example 3: [rp_choice design="select" labels="A,B,C"] yields:

Least Likely
A
 
B
 
C
Most Likely

Example 4: [rp_choice design="pills" labels="A,B,C"] yields:

Least Likely
A
 
B
 
C
Most Likely

Example 5: [rp_choice design="paginate" labels="1,2,3,4,5,6,7,8,9" start_text="<<" end_text=">>"] yields:

<<
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
>>

Example 6: [rp_choice design="tabs" width="100%" labels="Tab 1,Tab 2,Tab 3"] yields:

Least Likely
Tab 1
 
Tab 2
 
Tab 3
Most Likely

Example 7: [rp_choice design="words" labels="yes,no,i don't know"] yields:

Least Likely
yes
 
no
 
i don't know
Most Likely

Image List

Basic usage:

[rp_list]Custom content.[/rp_list]

Description:

Display a list of items with an image floated to the left.

Features:

  • Useful for making fancy bullet lists.
  • Uses a single image or a CSS image sprite with coordinates or an image map with coordinates or a Fontello icon pack.
Attributes:
  • Content attributes: count, span
  • Style attributes: iconset, icon_pos, icon, design

Example 1: [rp_list]List item 1.[/rp_list][rp_list]List item 2.[/rp_list][rp_list]List item 3.[/rp_list] yields:

List item 1.

List item 2.

List item 3.

Caption Box

Basic usage:

[rp_caption_box]

Features:

  • Useful for displaying a captioned image.
Attributes:
  • Content attributes: title, count
  • Style attributes: title_opacity, title_color, width, height, img_abs, img_rel, img_pos, design
  • Behavioral attributes: link

Example 1: [rp_caption_box] yields:

Caption Box

Example 2: [rp_caption_box title="GlassOcean.net" count="3" link="http://glassocean.net"] yields:

GlassOcean.net

Grid

Basic usage:

[rp_grid][/rp_grid]

Description:

Creates a grid of responsive columns, similar to a traditional HTML table.

We’ve created six aliases for this shortcode to allow nesting grids up to six levels deep, since WordPress by default does not allow nesting shortcodes with the same name.

Features:

  • Nest columns inside other columns using the included shortcode aliases (rp_grid_nest0, rp_grid_nest1, etc).
  • No need to use separate _first or _last shortcodes like some other frameworks out there.
  • No need to use separate _half or _third shortcodes like some other frameworks out there. One shortcode handles all column layouts.
Attributes:
  • Content attributes: count, span

Example 1: [rp_grid count="2" span="1"][rp_callout][/rp_grid][rp_grid count="2" span="1"][rp_callout][/rp_grid] yields:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example 2: [rp_grid count="3" span="1"][rp_callout][/rp_grid][rp_grid count="3" span="1"][rp_callout][/rp_grid][rp_grid count="3" span="1"][rp_callout][/rp_grid] yields:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example 3: Nested Columns

A) Left

B) Left

C) Left

C) Right

B) Right

A) Right

Paged Menu

Basic usage:

[rp_paged_menu]

Description:

Converts a WordPress 3.0+ menu into a responsive, paginated menu similar to the iPhone menus.

Features:

  • Included designs: basic (default), dark
Attributes:
  • Content attributes: menu
  • Style attributes: design

Google Custom Search

Basic usage:

[rp_gcse]

Description:

Embeds a custom Google Search Engine, which can be created at google.com/cse.

Features:

  • Included designs:
Attributes:
  • Content attributes:
  • Style attributes:

Example 1: [rp_gcse cx="002839040209968870516:jzxr6r0kfeo"] yields:


Web Page Snapshot

Basic usage:

[rp_snapshot]

Description:

Generates a snapshot (image) of a web page based on the URL.

Features:

  • Included designs:
Attributes:
  • Content attributes:
  • Style attributes:

Example 1: [rp_snapshot link_url="therapidplatform.com" size="400"] yields: