Skip to main content

Getting started

How to import Limestone CSS and JS into your projects, including recommended HTML templates

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.2.0/css/limestone.min.css" rel="stylesheet">
<!-- Limestone JS -->
<script src="https://usaskcdn.ca/limestone/1.2.0/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

View 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.2.0/css/limestone.min.css" rel="stylesheet">
    <!-- IE8 support -->
    <!--[if lt IE 9]>
      <link href="https://usaskcdn.ca/limestone/1.2.0/css/ie.css" rel="stylesheet">
      <script src="https://usaskcdn.ca/limestone/1.2.0/js/ie.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Limestone's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Limestone Javascript -->
    <script src="https://usaskcdn.ca/limestone/1.2.0/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!

Footer template

Standard footer template, including the U of S logo and space for additional links and social media icons.

Do not remove U of S logo

The U of S logo is an important signifier to users that they are on a U of S website. Do not remove the logo without first consulting Marketing and Communications.