Skip Navigation

Developer

Introduction

The Sabre Spark EDL is built using SASS and vanilla Javascript. It is designed as a library that is easily integrated into Sabre products without adding unnecessary bloat. It provides a set of robust UI components to provide a consistent user experience across Sabre products. These components are designed to be easy to use and help shorten development cycles.

Spark is a mobile-first, responsive CSS and JS library. It has no external dependencies (other than build tools), and is a great starting point for any web application. It is not a framework, and can be used with any front end technologies; React, Angular, Backbone or any other SPA frameworks play nicely with Spark.

Difference between V1 and V2

Thanks to lots of valuable community feedback, Spark v2 expanded on the functionality found in v1, and created a tool that is even more useful for Sabre developers. Some of the exciting and incremental improvements made in version 2 include:

Improvements in Version 2

Load individual components

The dist directory now includes separate stylesheets and script files for each component. Read more about how to use these.

Build custom style sheets and JS bundles

The spark-export-components CLI tool adds the ability to export custom stylesheets and script bundles for a given set of components. Read more about how this tool works.

Load only fonts being used

The stylesheets output by Spark now only load the fonts needed for a set of components, instead of loading the whole font family up front.

There have been some minor changes to the JS API, CSS class names and HTML structure of some components. A full list of changes is available in the changelog.

Getting started with Spark

1) Get the code

There are several ways to download the Spark codebase for viewing or for use in your web project:

NPM logo

NPM

The NPM registry details below have been updated. The old Nexus registry (nexus.sabre.com) will be sunset at the end of 2019 so we have updated our documentation to reflect the new registry (repository.sabre.com). Visit the Airline Solutions Reference Architecture site for migration instructions.

Spark is available in the Sabre NPM registry. To download it, set the following in your project’s .npmrc file which should be located in your project root:

registry=https://repository.sabre.com/repository/npm-all/

Then run npm install --save sabre-spark.

Git logo

Git

The source code and most recent distributable version of Spark are available in our internal Git repository. To download as a submodule, run git submodule add http://SGXXXXXX@git.sabre.com/scm/spark/edl.git where SGXXXXXX is replaced with your employee number.

Zip file

Download the latest ZIP file (updated 30 May 2023) and add it to your project.

2) Add Spark to your project

How you integrate Spark into your project depends on the technologies you are using.

Basic approach

The simplest approach is to include the minified CSS/JS into your project directly. This might look like:

<!doctype html>
<html>
  <head>
    ...
    <link type="text/css" href="node_modules/sabre-spark/dist/css/spark.light.min.css">
    ...
  </head>
  <body>
    ...
    <script src="node_modules/sabre-spark/dist/js/spark.min.js"></script>
    ...
  </body>
</html>

Note that the minified CSS and Javascript are found in the dist folder of the codebase.

Including specific components

Version 2 of Spark allows the ability to include individual components into your project. Instead of including all of Spark, as illustrated in the previous example, it may be useful to load components on an as-needed basis. This might look like:

<!doctype html>
<html>
  <head>
    ...
    <!-- Include common styles for all components: grid, messaging, etc. -->
    <link type="text/css" href="node_modules/sabre-spark/dist/css/components/common.light.css">
    <!-- Include individual components -->
    <link type="text/css" href="node_modules/sabre-spark/dist/css/components/text-input.light.css">
    <link type="text/css" href="node_modules/sabre-spark/dist/css/components/calendar.light.css">
    <link type="text/css" href="node_modules/sabre-spark/dist/css/components/date-input.light.css">
    <link type="text/css" href="node_modules/sabre-spark/dist/css/components/button.light.css">
    ...
  </head>
  <body>
    ...
    <script src="node_modules/sabre-spark/dist/js/components/text-input.js"></script>
    <script src="node_modules/sabre-spark/dist/js/components/calendar.js"></script>
    <script src="node_modules/sabre-spark/dist/js/components/date-input.js"></script>
    ...
  </body>
</html>

Note that required common styles are included before the individual component styles. For more advanced component integration, take a look at the Custom Component Export Tool.

Add component markup

With the code downloaded and ready to be referenced by your project, the only thing left to do is include the Spark-specific component markup. The best examples of component markup can be found in the UI Components section of this site. There are also some examples included in the SCSS source code, but they are not as comprehensive. Here is an example of how to build a button:

<button class="spark-btn spark-btn--md">Default</button>

Many of the Spark UI components are built using only HTML and CSS. However, some of the more complicated components must also instantiate a JavaScript helper to enable the full range of functionality. Here is an example of how to build a text input:

<label class="spark-input">
  <input class="spark-input__field" name="example1" placeholder="Enter Full Name..." role="textbox">
  <span class="spark-label">What is your name?</span>
</label>

<script type="text/javascript">
// Vanilla JS
var el = document.querySelector('.spark-input');
var instance = new Spark.TextInput(el); // When exposed globally, JS components are available in the Spark namespace

// Optional jQuery plugin
$('.spark-input').sparkTextInput();
</script>

For more information on how to implement each component, see the UI Components section.

The Advanced Approach

The Spark codebase can also be integrated into applications that have defined build processes. Examples of such applications include those that are built on libraries/frameworks such as React or Angular. For this approach, we recommend using NPM to get the Spark codebase and adding the necessary SASS and JS files.

SASS

Spark uses SASS as a CSS preprocessor because it is powerful, stable and widely adopted. The class naming conventions follow the BEM style: block, element, modifier.

When using Spark’s SASS files in your project, it is recommended you use node-sass instead of the sass Ruby gem. In addition to being much faster (by up to 4000%!), some features of Spark do not work with older Ruby-based versions of SASS.

Using SASS

To use Spark’s SASS in your project, simply add the following to your SCSS file:

@import 'node_modules/sabre-spark/scss/spark.light';

If you want to include individual components into your SCSS, do something like:

// Load required Spark dependencies
@import 'node_modules/sabre-spark/scss/config/index';
@import 'node_modules/sabre-spark/scss/functions/index';
@import 'node_modules/sabre-spark/scss/mixins/index';
@import 'node_modules/sabre-spark/scss/placeholders/index';
@import 'node_modules/sabre-spark/scss/common/index';
@import 'node_modules/sabre-spark/scss/helpers/index';

// Include components
@import 'node_modules/sabre-spark/scss/components/button';
@import 'node_modules/sabre-spark/scss/components/modal';
@import 'node_modules/sabre-spark/scss/components/slider';
SASS Themes

Spark is built to accommodate different “themes”. While the core of the SASS is the same, each theme can define its own variables to alter colors, font weights, etc. The themes are:

Although your product may eventually ship with the “White Label” theme, all initial development should use either the Light or Dark theme. When delivering a whitelabel product using Spark, simply replace references to spark.light.css or spark.dark.css with spark.whitelabel.css. If you are using the Spark SASS files directly, replace your @import /path/to/spark.light; with @import /path/to/spark.whitelabel;.

Javascript

View the annotated JS source.

Spark’s Javascript library powers some of the more complex UI components of Spark. It has no external dependencies and is required if you wish to use the Spark UI components “out of the box”.

The code can be included as a compiled and minified file, or individual components can be loaded. Each component supports being exposed in the global namespace (window.Spark.*), being loaded as an ES6 module (Babel), a CommonJS module (Browserify, Webpack, etc.), or as an AMD module (RequireJS). There is also a jQuery version of Spark available in dist/js.

SPARK’S JAVASCRIPT MODULES WILL NOT BE INSTANTIATED AUTOMATICALLY. In order to support a broad range of use cases, the modules do not automatically create instances of themselves when the page loads. For example, a text input would need to be instantiated after the document is ready by using new Spark.TextInput(document.querySelector('#textinputid')); or $('#textinputid').sparkTextInput();. If you are using a framework like Backbone, Angular or React, instantiating each component can be done on the fly when views are rendered.

Loading an ES6 module would look like this:

// Load from ES5 compiled code
import {TextInput, DateInput} from 'sabre-spark';
// Or load from ES6 source code
import {TextInput, DateInput} from 'sabre-spark/js/src/spark';
// Or load a single component from ES6 source code
import TextInput from 'sabre-spark/js/src/components/text-input';
import DateInput from 'sabre-spark/js/src/components/date-input';

In v2 of Spark, the following method of loading the modules into a namespace NO LONGER WORKS. This approach should be considered an ES6 anti-pattern.

// DON'T DO THIS ANYMORE
import Spark from 'sabre-spark';
let headerInstance = new Spark.Header();

Loading a CommonJS module would look like this:

var TextInput = require('sabre-spark').TextInput;

When using with RequireJS, you’ll want to path Spark like this:

requirejs.config({
  // ...
  paths: {
    spark: 'node_modules/sabre-spark/dist/js'
  }
});

Tools

Custom Component Exporter

If you need to generate JS, SCSS and/or CSS files for a custom set of UI components, you can use the spark-export-components command line tool. It can output a .js file for use globaly or with a package manager, an .scss file with @import statements for each requested component, or a compiled .css file.

CLI Usage:

spark-export-components [components]

CLI Example:

spark-export-components button expand panel --theme light --out spark.custom

CLI Options

-t, --theme       Name of the theme to use
-o, --out         Output directory
-h, --help        Print usage info
--nojs            Don't output JS for components
--nocss           Don't output CSS for components
--noscss          Don't output SCSS for components
--filename        The name to use for output files
--jsfilename      The name to use for output JS files
--cssfilename     The name to use for output CSS files

Report Bug

Found a bug? Please submit a request through JIRA.

Community Resources

Provided below are links to view and download Spark components developed using the React javascript library. If you are interested in getting involved in this community effort please contact Gonzalo do Carmo Norte.

Spark + React Resources

Spark + React Resources