Getting started
Learn how to properly integrate Sky Framework in your project.
Quick start
Sky Framework has been coded from the ground up, so the only dependency is the latest jQuery. It is essential that you link directly to the code links provided below by the PCCW Global Customer Service Portal, so that your code is automatically updated to date.
Copy-paste the following line before any other stylesheet in your <head> tag.
Copy<link rel="stylesheet" href="https://skyframework.pccwglobal.com/dist/skyframework.css">
Add the followin lines of code just before the closing </body> tag.
Copy<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://skyframework.pccwglobal.com/dist/skyframework.js"></script>
Supported browsers and devices
The framework has been developed to be visually consistent among most browsers and devices and thus, specific code structure has to be applied in select cases to keep this consistency cross-browser. However, the use of native device elements is encouraged by the framework to give users the best possible experience on their device. Keep in mind that the visual consistency is dependent on the correct usage of the code blocks provided in this documentation.
Sky Framework, following modern technologies supports most of the latest, stable releases of all major browsers and platforms - however, the framework is highly likely to work on older unsupported browsers - eg Internet Explorer 9, but with toned down animation effects.
Supported desktop browsers
- Firefox 18 or newer
- Chrome 26 or newer
- Safari 12.1 or newer
- Opera 12.1 or newer
- Internet Explorer 11 or newer
Supported devices
- iOS 7 or newer
- Android 4.4 or newer
- Blackberry 8 or newer
Due to the use of flexbox, stock Android browsers up to version 4.3, Internet explorer 10 and Windows mobile devices are no longer supported.
Touch devices
Sky Framework can successfully detect most touch devices - not only tablets and mobile phones, but also laptop and hybrid laptop-tablet devices like the Microsoft Surface. Upon detecting a touch device a class touch-device is applied to the body of the document that allows specific touch-device styling and functionality to be applied on specific elements.
Development teams can use this class as a parent class to wrap application-specific classes to style elements specifically for touch devices. Using the CSS below, all elements with the class box will have white text and blue background on all touch devices.
Sample CSS Code
Copy.touch-device .box {
color:#fff;
background:#00498f;
}