CYCLOPS

The UI/UX Pattern Guide for the CenturyLink Platform

v 1.8.1

Get Started

Cyclops is hosted on the CenturyLink Platform assets server for anyone to use. Add .cyclops to the html tag to properly scope the styles. This allows Cyclops to override any existing styles that have been defined by legacy markup.

          
<html lang="en" class="cyclops">

Then, include these links in your page layouts:

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

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

<!-- bottom of page -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" ></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js" ></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script src="https://assets.ctl.io/cyclops/1.8.1/scripts/cyclops.min.js" ></script>
<!-- your scripts here -->

Upgrading From 1.5 And Earlier

In versions 1.5 and prior, Open Sans, a Google hosted font, was specced as the font for Cyclops. For performance and dependency reasons, Open Sans has been removed from Cyclops spec. This means the stylesheet that includes Open Sans should be removed from your project, as it is no longer specified in Cyclops styles.

<!-- remove this -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">

Learn more about the Operating System font stack.

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" class="cyclops">
  <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>

    <!-- Cyclops -->
    <link href="https://assets.ctl.io/cyclops/1.8.1/css/cyclops.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script src="https://assets.ctl.io/cyclops/1.8.1/scripts/cyclops.min.js"></script>
    <!-- Include any additional scripts your service needs -->

  </body>
</html>