The Sabre Spark EDL is built using SASS and vanilla Javascript. It is designed as a framework which 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.
For more information about Spark, visit sabrespark.com.
npm install grunt-cli
npm install && grunt dist
npm install && npm start
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.
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;.
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.
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.
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'
}
]
}
};
View the annotated JS source (in-progress).
If you need to generate an SCSS or CSS file with a custom set of UI components, you can use the spark-custom-scss command tool. It can output a .scss file with @import statements for each component, or a compiled .css file.
NOTE: Some components rely on others to function. For example, the Header is an extension of Menu. It will take some trial and error to find the bare minimum number of components to include.
require('sabre-spark/scss/build-custom')([components], themeName, outputFileName);
require('sabre-spark/scss/build-custom')(['button', 'expand', 'panel'], 'light', 'spark.custom.scss');
require('sabre-spark/scss/build-custom')(['button', 'expand', 'panel'], '', 'spark.custom.whitelabel.scss');
tools/bin/spark-custom-scss [components] --theme <name> --output <name>
tools/bin/spark-custom-scss button expand panel --theme light --output spark.custom.scss
tools/bin/spark-custom-scss table --theme "" --output spark.custom.css