One source for campus
usaskcdn.ca
Core Limestone files are hosted centrally at usaskcdn.ca for you to reference in your projects.
<!-- Limestone CSS --> <link href="https://usaskcdn.ca/limestone/1.3.1/css/limestone.min.css" rel="stylesheet"> <!-- Limestone JS --> <script src="https://usaskcdn.ca/limestone/1.3.1/js/limestone.min.js"></script>
Upgrades
Limestone is actively developed, but keeping pace with upgrades is easy: update the version number in your references and you're good to go!
Release notes
Changes are only released on a new version of the package, not to an existing stable version.
Local copies, customizations, and add-ons
Limestone is carefully designed to translate the University's visual identity for the web while giving developers across campus a flexible toolkit.
You are strongly encouraged to reference the centrally hosted files rather than making local copies. Customized local copies are to be used at your own risk and will not be supported.
However, Limestone can't do everything and you may encounter scenarios where you need to fill gaps with your own code. Building on top of Limestone is encouraged as long as you are adhering to the University's visual identity guidelines.
HTML structure
Follow this basic HTML structure in your projects to ensure Limestone CSS and JS work without a hitch.
<!DOCTYPE html>
<html>
<head>
<title>Limestone 101 Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Limestone CSS -->
<link href="https://usaskcdn.ca/limestone/1.3.1/css/limestone.min.css" rel="stylesheet">
<!-- IE8 support -->
<!--[if lt IE 9]>
<link href="https://usaskcdn.ca/limestone/1.3.1/css/ie.css" rel="stylesheet">
<script src="https://usaskcdn.ca/limestone/1.3.1/js/ie.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Limestone's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- Limestone Javascript -->
<script src="https://usaskcdn.ca/limestone/1.3.1/js/limestone.min.js"></script>
</body>
</html>
PAWS iframe channels
When using Limestone within a PAWS iframe channel, you'll probably want to override the padding-top CSS value on the <body>. This padding exists to accommodate the Header component, but you don't need the header component inside PAWS, so you don't need the padding either. Just add this to the <head> of your channel:
<style>
body { padding-top: 0; }
</style>
Page template
This is the standard page template for nearly all Limestone projects.
Header template
View the Header and Navbar components for header template options.
Content template
We use variations on this system for organizing page content in the WCMS. Copy this approach or devise your own.
Page tite
Section 1
Hello, world!
Section 2
Hello, world!
Section 3
Hello, world!