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://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="https://assets.ctl.io/cyclops/1.1.1/css/cyclops.min.css" rel="stylesheet" type="text/css" />
<!-- your styles here -->
<!-- ...your page content... -->
<!-- At the bottom of your 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://assets.ctl.io/cyclops/1.1.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" 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://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="https://assets.ctl.io/cyclops/1.1.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.1.1/scripts/cyclops.min.js"></script>
<!-- Include any additional scripts your service needs -->
</body>
</html>