CYCLOPS CORE

The UI/UX Pattern Guide for the CenturyLink Platform

The Cyclops Project

v 2.0.0-alpha.1

Upgrading from version v1.x.x

Versions of Cyclops prior to v2.0.0 depended heavily on knockout and other external dependencies. Version 2.0.0 attempts to make Cyclops more flexible and easily consumable by breaking the library into Cyclops Core, this library, and framework specific libraries. Core has very few dependencies and each framework library with expose Core functionality in the flavor of that library.

Get Started

Cyclops is hosted on the CenturyLink Platform assets server for anyone to use. Include these links in your page layouts:

          
<!-- In between the head tags -->
<link href="https://assets.ctl.io/cyclops/2.0.0-alpha.1/styles/cyclops.min.css" rel="stylesheet" type="text/css" />
<!-- your styles here -->

<!-- ...page content... -->

<!-- bottom of page -->
<script src="https://assets.ctl.io/cyclops/2.0.0-alpha.1/scripts/cyclops.min.js" ></script>
<!-- your scripts here -->
          
        

Not all of the JavaScript libraries are strictly required. However, becuase they are referenced from a CDN, and are likely already cached client side, it is best practice to just include all the dependencies. If you really want to exclude some please take a look at the dependencies page to determine what is needed.

Basic HTML Template

Start with this basic HTML template, or modify these examples to suit your needs.

          
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Cyclops 101 Template</title>
    <link href="https://assets.ctl.io/cyclops/2.0.0-alpha.1/styles/cyclops.min.css" rel="stylesheet" type="text/css" />
    <!-- Include any additional styles your service needs -->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://assets.ctl.io/cyclops/2.0.0-alpha.1/scripts/cyclops.min.js"></script>
    <!-- Include any additional scripts your service needs -->
  </body>
</html>
          
        
anchor link to top of page