Web Toolkit

Sky branded CSS, JavaScript utilities, and UI components.

Save time by using the toolkit to set your base styles. Create Sky styled headings and buttons within seconds.

The toolkit can also help you quickly build robust components like accordions and carousels.

Business descriptions of component functionality is visible from directly within the demo site (created from the actual unit-test reports)

Contents

1. Getting Started
2. Prerequisites
3. Setup
4. Building/Running the Toolkit
5. Code Overview
6. Folder Structure
7. Feature Requests & Bugs
8. Supported Browsers
9. Contributing
10. Versioning and Releases
11. Change log
12. Troubleshooting

Getting Started

This project contains the code to generate the toolkit files, e.g. toolkit.js + toolkit.css. The code to generate the demo site is also here.

Prerequisites

To build the toolkit locally, you'll need to install:

• ruby (version 1.9.3 or later),
• node.js,
• npm,
• grunt cli,
• Bundler

To check you have these tools with the correct versions, run:

• which node && which npm && which grunt && which ruby && which bundle
• bundle check && npm update

Setup

Clone the repository and install the dependencies

git clone https://github.com/skyglobal/web-toolkit.git
cd web-toolkit
git remote add upstream https://github.com/skyglobal/web-toolkit.git
npm install
bundle install

Building/Running the Toolkit

Update the toolkit by making your change and testing it within the demo site.

• grunt server : Grunt will spin up the Jekyll server, watch for code changes and rebuild on the fly.
• grunt server --beautify : To help when debugging.
• grunt test : Runs the unit tests in PhantomJS
• grunt test-cross-browser : Runs the unit tests using multiple browsers remotely.
• grunt fonts : Only needed to rebuild the Icon Fonts (skycons).

Please help us out by contributing any changes you make locally back into the source project. See CONTRIBUTING.md.

For more details about the available commands please see grunt/README.md

Code Overview

The repository contains two main components; the Web Toolkit and the demo site.

• Sass files are in app/src/sass and compiled output is saved into dist/stylesheets
• JavaScript code is in app/src/js and contains four modules which are output to _site/dist/scripts
• toolkit contains the JS utilities and toolkit UI components code
• demo provides demo support for the website
• changes provides support for the changes page of the website
• testIframe provides support for running unit tests online on the website
• HTML files are in app/_includes
• Skycons are in the app/static/font-svgs and minified into grunt/fonts/min.

Folder Structure

$ tree
.
├── _site           => content generated by Jekyll
│   ├── dist        => content generated by Grunt
├── app             => dev area for source code. get stuck in
│   ├── _includes   => Source code for the toolkit documentation. Your demo html goes here
│   │   └── allIncludes.html => a single file referencing all includes. used for demo and test page
│   ├── src
│   │   ├── fonts   => templates used to generate the font icons (skycons)
│   │   ├── icons   => multi coloured icons used within scss for spriting (not yet converted to svg's)
│   │   ├── js      => place for source JS files
│   │   ├── sass    => place for source SCSS files
│   │   └── svgs    => retina ready multi-coloured icons.
│   ├── _layouts    => layout for the index and test html pages
│   ├── static          => home of the unchanging and non-generated code
│   │   ├── deprecated  => code moved from the masthead project
│   │   ├── font-svgs   => src svg files used to generate font icons (skycons)
│   │   ├── fonts       => Sky Text Fonts
│   │   ├── images      => images not for spriting
│   │   ├── lib         => untouched third-party files
│   |   └── wiki-images => images used for demos in the wiki
│   ├── changes.html    => Page for users to see changes between toolkit version
│   ├── index.html      => Main demo page
│   └── test.html       => used by `grunt test` to run all tests at once
├── grunt           => grunt config files live here
├── node_modules    => npm plugins
├── test
│   ├── libararies  => Third-party src files for testing
│   ├── specs       => place for *-spec.js files
│   ├── screenshots
│   ├── config.js   => RequireJS and Mocha config file
│   └── runner.js   => explitly call each spec file for `grunt test` to run
├── config.yml      => Jekyll config file
├── circle.yml      => CircleCI config file
├── gemfile
├── gruntfile.js    => grunt config file
├── package.json    => NodeJS config file, includes version number for toolkit
├── rakefile        => build script
└── README.md

Feature Requests + Bugs

Please take a look through currently open and closed issues to see if your feature/bug has already been discussed. If not, feel free to open new issues and let us know about any bugs that you find.

This project is currently maintained out of the hard work from a very few contributers who are working on other projects at the same time. If you could write any updates and submit pull requests (see Contributing) this would be amazing (and you would get your request looked at much faster!).

Supported Browsers

• Latest Chrome (Win8, Mavericks, Android)
• Latest Firefox (Win8, Mavericks)
• Safari 7 (Mavericks, iOS 7)
• IE 11 (Win 8)
• IE 10 (Win 7)
• IE 9 (Vista)
• IE 8 (Vista)

^ back to contents