About Spark

The Design Language for Sabre Applications

This section provides an introduction to Spark and quick access to the top resources you'll need to get started. Scroll through the content below or jump directly to one of the following sections:

  • Design Foundations

    The foundation of our language serves to reinforce the intuitiveness of our applications and lend a strong visual harmony.

  • UI Components

    Our language includes a series of the most commonly used interface elements and we're continuing to build on this foundation.

  • Source Code

    Our suite of tools includes font files, icon sets, Photoshop templates and production-grade HTML, CSS and JavaScript.

Why Create an Enterprise Design Language?

For You

We created Spark as a catalyst for designing and developing extraordinary experiences.

 

1. Efficiency

Create efficiency around the basics to free up time for more complex issues

2. Identity

Reinforce the Sabre brand by introducing a modern visual aesthetic and encouraging interactions

3. Experience

Improve the user experience by increasing consistency and leveraging best practices

Design Foundations

Our visual vocabulary is based on user-centered design principles coupled with traditional principles of aesthetics to create a language that is unified, visually pleasing and fosters ease of use within our applications.

The foundations of Spark reinforce this through an intentional use of color, typography and scale, and iconography.

  • Color is used to reinforce the meaning and importance of elements on the page. Learn more about color.
  • Typography lends a vertical rhythm to the page and creates a sense of harmony. Discover how we use typography.
  • Icons are used in space-constrained contexts and to make content easy to scan. Learn more about how to properly design and use icons.
  • Our Voice is friendly, human and smart. Discover more about how to use voice & tone in our applications.

Guiding Principles

1. Simplify

Simplify users lives through modern intuitive interface

2. Delight

Delight users through engaging, dynamic interactions

3. Empower

Empower users through intelligent, personalized displays

Learn More

User Interface Components

 

Based on the foundation above, we've designed a series of UI elements that are flexible enough to support a broad range of solutions, from consumer-facing products to data-intensive business applications.

Our library contains approximately 40 elements, including buttons, tabs, form elements, headers, date selection and toolbars. These components are responsive, comply with Sabre's Accessibility Policy, and tested within a defined set of supported browsers.

View All UI Components

Resources

Designer

The Spark suite of tools was conceived as a starting point for designers involved in the creation of Sabre applications. It includes a series of common UI elements, usage guidelines and templates. Learn more about designer resources.

Templates

Get the PSDs for all UI components and page templates, which include the baseline and breakpoint specific grids for responsive design.

Download Templates

Last updated: 22 May 2019

Fonts

Get the full Roboto Slab and Roboto Regular font families. Noto font is included for international or special characters not supported by Roboto.

Download Fonts

Last updated: 22 May 2019

Icons

Get the latest line and fill icon fonts as well as the full suite of original Streamline icons, in Illustrator formats.

Download Icons

Last updated: 22 May 2019

Developer

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.). Learn more about developer resources.


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.