Lush.js is a Javascript framework for online service blueprinting. Lush uses its own HTML tags that you can add to any website or web application. Lush.js reads (Lush Markdown)[#Lush-Markdown].

• Lush Markdown
• Initiate Lush.js
• Using Lush.js
• Using presentation mode
• Using Lush.js options
• Lush elements
• Testing Lush

Lush Markdown is regular markdown extended with service blueprint terminology. Lush Markdown uses the dollar ($) sign to indicate a markdown attributes.

Lush Markdown attributes:

• $ Service - Name of the service. Only the first one will be used.
• $ Scenario - A plain words descriptor of what happens in the step. This creates a new swimming lane.
• $ Step Definition - A plain words descriptor of what happens in the step.
• $ Channel - The channels involved in 
the step.
• $ Actor - The journeyer, support actors
 of the step.
• $ API, System - What makes this step “go”. APIs, Systems, Processes.
• $ Observation, Fact - Statements or facts that are 
important to note.
• $ Policy, Rule - Rules or policies that dictate 
why things are a certain way.
• $ Metric - Data that helps measure & 
learn about the step / scenario.
• $ Critical Moment - Sources of pain or experience 
breakdown.
• $ Question - Questions that need to be followed up on.
• $ Idea - Ah-ha realisations to
 improve the service experience.

Lush.js can be added directly to any web application:

<script src="lush.min.js"></script>

It will generate the Lush HTML elements that can be used in the browser

Lush has two main functions.

markdown2lush( STRING_WITH_LUSH_MARKDOWN )

lush2markdown( STRING_WITH_TITLE, STRING_WITH_SCENARIO, LUSH_ELEMENT_OBJECT ); // example: $('lush')

You can add a button with the id lush-prezi

Example:

<button id="lush-prezi">Click here for presentation mode</button>

Clicking the button will open lush in full screen presentation mode.

Clicker support: Lush also supports basic clicker support

The markdown can be added directly to the lush element.

<lush>
$ Service
NAME OF THE SERVICE

	$ Scenario
	INFO ABOUT SCENARIO

		$ Step Definition
		# Title

		$ Channel
		# Title

		$ Actor
		# Title

		$ API, System
		# Title

		$ Observation, Fact
		# Title

		$ Policy, Rule
		# Title

		$ Metric
		# Title

		$ Critical Moment
		# Title

		$ Question
		# Title

		$ Idea
		# Title

	$ Scenario another scenario
</lush>

Lush can be styled like any other HTML element. Lush has a set of shadow DOM properties set. You can simply overwrite these by styling them (see a list of available elements below)

Also see the file: examples/styled.html

When you add Lush.js to your page, a few elements will be added to the shadow dom. You can use these elements directly, but you don't have too.

<lush-title>   <!-- the title, often the project name -->
<lush-subtitle><!-- a subtitle, often a scenario -->
<lush-row>     <!-- lush will create a row that contains all the columns -->
<lush-column>  <!-- a column per step -->
<lush-layer>   <!-- a layer, example: Metric or Touchpoint -->
<lush-content> <!-- the content of the latyer -->

The following elements are stylable but it would not be adviced to overwrite the shadowdom elements

<lush>        <!-- lush canvas element, avoid styling of this element -->

You can test Lush by running npm test.

Lush is tested using Selenium-webdriver and the PhantomJS driver (for Travis testing). You might want to install these globally (see the links).

The Selenium Webdriver comes with Firefox support, you can change the the driver in the testfile from PhantomJS to Firefox (or install additional drivers more info)

Lush's npm install installs support for testing in PhantomJS, Chrome and Firefox