Developer

Introduction

The source code and most recent distributable version of Spark are available in our internal Git repository. You can download the code, clone the repository locally, or load it through a package manager (npm, bower, etc.).

The Sabre Spark EDL is built using SASS and vanilla Javascript. It is designed as a framework 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 framework, and it uses a custom implementation of Twitter Bootstrap v4’s grid system to handle layout.

Available for your consumption are compiled and minified CSS/JS files. Alternatively, you can integrate the SCSS and JS source into your build process. Simply clone this repository, add it as a Git submodule or add Spark as a dependency in your package manager of choice (npm, Bower, etc.). From there you can include the source SASS and JS files with @import and require commands, respectively.

Requirements

  • node.js >= v4.0.0

Build

npm install && grunt dist

Test

npm install && grunt start

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%!){:target=”_blank”}, some features of Spark do not work with older Ruby-based versions of SASS.

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: - White Label (spark.whitelabel.scss) - Light (spark.light.scss) - Dark (in development)

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 white label 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;.

Click here to read more about themes.

Using SASS

To use Spark’s SASS in your project, simply use @import ./path/to/spark/scss/spark.light.scss as the first line of your SCSS file.

Javascript

Spark’s Javascript library powers some of the more complex UI components of Spark. It is required if you wish to use the Spark UI components “out of the box”, but the functionality can be mirrored in your codebase if that makes more sense.

There are no external dependencies for Spark’s Javascript and it is very lightweight.

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 a CommonJS module (Browserify, Webpack, etc.), or as an AMD module (RequireJS). If the modules are exposed in the global namespace AND jQuery is already loaded they will also create jQuery plugins.

THESE 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.

Getting Started


Step 1: Get the code

The Spark EDL team maintains a functional HTML/CSS/JS implementation of Spark. It is lightweight, has no external dependencies and can be integrated into any web project.

In just a few steps you can start using Spark:

There are several ways for you to download the Spark codebase for use in your web project.

  • Git
    • Clone
      • git clone http://SGXXXXXX@git.sabre.com/scm/spark/edl.git
      • Replace SGXXXXXX with your employee number
    • Submodule
      • git submodule add http://SGXXXXXX@git.sabre.com/scm/spark/edl.git
      • Replace SGXXXXXX with your employee number
  • NPM
    • Spark is available in the Sabre NPM registry. To download, set registry = http://ltxl0819.sgdcelab.sabre.com:4873/ in your project’s .npmrc file.
    • npm install --save sabre-spark
  • ZIP

Step 2: Integrate Spark

How you integrate Spark into your project depends on the technologies you are using. The most basic 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="/path/to/spark/dist/css/spark.light.min.css">
    …
  </head>
  <body>
    …
    <script src="/path/to/spark/dist/js/spark.min.js"></script>
    …
  </body>
</html>

If you are using SASS as the CSS preprocessor for your project, it may make sense to include the Spark SASS code. This will give you access to the EDL mixins and functions, as well as allow you to extend Spark classes directly. This might look like:

@import '/path/to/spark/scss/spark.light';
// …
.sample-mixin {
  @include clearfix();
}
.sample-extend {
  @extend .spark-panel;
}

If you are using a Javascript module loader like Browserify, Webpack or RequireJS, it may make sense to load individual Spark Javascript components instead of the whole library. This will stop the modules from being exposed into the global namespace, as well as allow you to include only the modules you need. This might look like:

Browserify

var TextInput = require('/path/to/spark/js/components/text-input');
var textInputInstance = new TextInput(document.querySelector('.spark-input'));

Webpack

var TextInput = require('/path/to/spark/js/components/text-input');
var textInputInstance = new TextInput(document.querySelector('.spark-input'));

When using with Webpack, you need to disable parsing of AMD modules. This is because Spark defines dependencies using a UMD style definition. Your webpack.config.js should contain the following:

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /sabre-spark/,
        loader: 'imports?define=>false'
      }
    ]
  }
};

RequireJS

define(['spark-text-input'], function(TextInput) {
  var TextInput = require('/path/to/spark/js/components/text-input');
  var textInputInstance = new TextInput(document.querySelector('.spark-input'));
});

Step 3: Add components

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:

HTML

<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:

HTML

<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>

JS

// 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

// jQuery plugin
$('.spark-input').sparkTextInput();

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

Report Bug

Found a bug? Please submit a request through JIRA.