Lush.js v0.0.6
Lush.js
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.
Table of Contents
- Lush Markdown
- Initiate Lush.js
- Using Lush.js
- Using presentation mode
- Using Lush.js options
- Lush elements
- Testing Lush
Lush Markdown
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.
Initiate Lush.js
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
Using Lush.js
Lush has two main functions.
markdown2lush( STRING_WITH_LUSH_MARKDOWN )
lush2markdown( STRING_WITH_TITLE, STRING_WITH_SCENARIO, LUSH_ELEMENT_OBJECT ); // example: $('lush')
Using presentation mode
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>
Styling 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
Lush elements
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 -->
Testing Lush
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