-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
160 lines (132 loc) · 6.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Live style guide</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="stylesheets/full-stylesheet.css" />
<link rel="stylesheet" href="stylesheets/styleguide.css">
<script type="text/javascript" src="//use.typekit.com/hyb5bko.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript"> document.documentElement.className += " js";</script>
</head>
<body class="styleguide">
<!--[if lt IE 7]>
<div class="lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<div class="lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<div class="lt-ie9">
<![endif]-->
<div class="campl-row campl-global-header">
<div class="campl-wrap clearfix">
<div class="campl-column9" id="global-header-controls">
<a href="/project-light" class="campl-main-logo">
<img alt="" src="images/interface/main-logo-small.svg" height="38px;" class="campl-scale-with-grid" />
</a>
<ul class="campl-unstyled-list campl-horizontal-navigation campl-global-navigation">
<li>
<a class="campl-no-drawer" href="components/core-elements/index.html">Core elements</a>
</li>
<li>
<a class="campl-no-drawer" href="components/inpage-components/index.html">In-page components</a>
</li>
<li>
<a class="campl-no-drawer" href="template-variants/index.html">Page templates</a>
</li>
</ul>
</div>
</div>
</div>
<div class="campl-row campl-global-navigation-drawer">
<div class="campl-wrap clearfix">
<div class="campl-column12">
<ul class="campl-unstyled-list campl-global-navigation-container">
<li><a href="/project-light">Home</a></li>
<li><a href="components/core-elements/index.html" >Core elements</a></li>
<li><a href="components/inpage-components/index.html" >In-page components</a></li>
<li><a href="template-variants/index.html" >Page templates</a></li>
</ul>
</div>
</div>
</div>
<div class="campl-row campl-content styleguide-notes">
<div class="campl-wrap clearfix">
<div class="campl-column12 central-content">
<div class="campl-content-container">
<h1>University of Cambridge web style Guide</h1>
<p>Welcome to the University of Cambridge web style guide.</p>
<p>The guidelines, templates and components provided here form the central toolkit for building University of Cambridge and partner websites.</p>
<p>The guide’s main purpose is to encourage a consistent, efficient, satisfying user experience across all University of Cambridge sites, whilst
giving local site managers enough flexibility to build the sites they need.</p>
<p>The guide is a living document; as the University and local web managers’ needs evolve, new components and other elements can be added.</p>
<p>If you have questions or requests for the style guide, contact <a href="mailto:[email protected]">[email protected]</a>.</p>
</div>
</div>
<div class="campl-column12 central-content">
</div>
<div class="campl-column4">
<div class="campl-content-container">
<div class="campl-vertical-teaser campl-teaser">
<h3 class='campl-teaser-title'><a href="components/core-elements/index.html">Core elements</a></h3>
<p>The core, universal building blocks for all sites, such as grids, typography and navigation.</p>
<a href="components/core-elements/index.html" class="campl-primary-cta">Read more</a>
</div>
</div>
</div>
<div class="campl-column4">
<div class="campl-content-container">
<div class="campl-vertical-teaser campl-teaser">
<h3 class='campl-teaser-title'><a href="components/inpage-components/index.html">In-page components</a></h3>
<p>A palette of standard components for use on web pages, such as teasers, carousels, calendars and tables.</p>
<a href="components/inpage-components/index.html" class="campl-primary-cta">Read more</a>
</div>
</div>
</div>
<div class="campl-column4">
<div class="campl-content-container">
<div class="campl-vertical-teaser campl-teaser">
<h3 class='campl-teaser-title'><a href="template-variants/index.html">Page templates</a></h3>
<p>Full templates for common page types, such as section pages, article pages, listings pages and the homepage.</p>
<a href="template-variants/index.html" class="campl-primary-cta">Read more</a>
</div>
</div>
</div>
<div class="campl-column12 central-content">
<div class="campl-content-container">
<h2>A reminder about using responsive templates</h2>
<p>All templates and components in this guide are responsive. They are designed to appear optimally on any device: desktop PC,
laptop, tablet or smartphone.</p>
<p>But the guidelines cannot (and should not) specify layouts to the last detail. A particular arrangement of components that
looks fine on a desktop PC may not on a smaller tablet or mobile screen. Testing your site designs on a variety of screen
sizes is therefore essential.</p>
<p>Tip: to see how a template or component in the guide will look at smaller screen widths, drag your browser window smaller.</p>
</div>
</div>
</div>
</div>
<div class="campl-row campl-global-footer">
<div class="campl-wrap clearfix">
<div class="campl-content-container">
<p>© 2015 University of Cambridge</p>
</div>
</div>
</div>
<!--[if lte IE 8]>
</div>
<![endif]-->
<script type="text/javascript" src="javascripts/libs/ios-orientationchange-fix.js"></script>
<script src="javascripts/libs/jquery-min.js"></script>
<script src="javascripts/libs/modernizr.js"></script>
<script src="javascripts/custom.js"></script>
</body>
</html>