Table of Contents
Template Usage Guide
Baseline CSS
All pages must include the baseline CSS file:
...
<link rel="stylesheet" href="/css/main.css">
...
Overwriting and Creating Custom Styles
Include a separate stylesheet called "custom.css" and override or create new styles in it. Use this file whenever possible instead of directly editing "main.css".
...
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/custom.css">
...
Choosing Fixed or Responsive Layout
The first step in using the templates is deciding whether to use a fixed or responsive (fluid) layout. By default, all templates are set for a responsive layout.
Fixed Layout
A fixed layout will set your page's width to 960 pixels. The width of the page and its content positioning will remain static regardless of the device's screen resolution.
To enable a fixed layout, include the line <link rel="stylesheet" href="/css/fixed.css">
with the other CSS includes in the <head>.
...
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/fixed.css">
<link rel="stylesheet" href="/css/custom.css">
...
Responsive Layout
A responsive layout will dynamically adjust the page's width and content positioning based on the device's screen resolution. This method will allow you to automatically format your layout for mobile, tablet, and desktop devices.
Add the following stylesheet: <link rel="stylesheet" href="http://dev.www.ucla.edu/css/responsive.css">
...
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/responsive.css">
<link rel="stylesheet" href="/css/custom.css">
...
Choosing a responsive layout also requires the addition of a javascript file. Include the line: <script src="/js/responsive.js"></script> near the </body> of the page.
...
<script src="/js/global.js"></script>
<script src="/js/responsive.js"></script>
<script src="/js/search.js"></script>
</body>
...
Responsive layout is set to default on template pages.
It's required that you use a single layout method throughout your site and you cannot use both fixed and responsive design enabled pages at the same time.
Learn more about responsive web design:
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
Submenus for Main Nav
To create submenus for items in your main nav (#main-nav), you'll need to add nested list items with the proper classes. In the example below, a drop down link "About" actives a submenu with 6 links (3 rows, 2 columns). Each submenu column has 3 rows max. Fill the columns from left to right.
<ul id="main-nav" class="main-nav-template-spacer"> <li><a href="/about" class="dropdown-link">About</a> <ul class="nav-column-wrap" role="region" aria-live="polite">
<li>
<ul class="nav-column">
<li><a href="/about/sublink1.html">Expanded Nav 1</a></li>
<li><a href="/about/sublink2.html">Expanded Nav 1</a></li>
<li><a href="/about/sublink3.html">Expanded Nav 1</a></li>
</ul>
<ul class="nav-column">
<li><a href="/about/sublink4.html">Expanded Nav 1</a></li>
<li><a href="/about/sublink5.html">Expanded Nav 1</a></li>
<li><a href="/about/sublink6.html">Expanded Nav 1</a></li>
</ul> <a href="javascript:void(0)" class="close">Close</a> </li>
</ul>
</li> ...</ul>
Setting "Active" State for Navigational Items
class "active"
To set an active state in a navigational menu for which the user is on, assign the class "active" to a link like so:
<a class="active" href="/about">About</a>
The "active" class should be used on the main navigational menu at the top of the page and for side menus on the left hand side. "Active" classes should not be used for the main sub navigation menu.
You should always assign an "active" class to the current page and current section in your site navigation. Refer to http://www.ucla.edu/about/mission-and-values as an example. The "About" link is selected in the main menu. Since "Mission and Values" is a sub page within "About", it is also assigned an "active" class on the left menu. The "Mission and Values" link that appears as a sub nav under "About" is not selected.
Working with Images
id "hero-image"
Large banner images such as the one found on http://www.ucla.edu/campus-life/ use the id "hero-image".
<img id="hero-image" src="/img/banners/campus-life/campus-life-2.jpg" alt="Girl running up stair case" />
class "offset-left", class "offset-right"
Images used within a body of a page are uniquely positioned to hang over the edge of the content body. Images are assigned the class "offset-left" or "offset-right". Refer to http://www.ucla.edu/students/prospective-students for examples of how images are positioned.
<img src="/img/content-images/prospective-students-campus-life.jpg" class="offset-left" alt="Female lacrosse players" />
<img src="/img/content-images/callout-stats.gif" class="callout-stats offset-right" alt="Over 5000 coures, 109 academic departments, and over 130 majors" />
class "offset-left", class "offset-right"
Images used within a body of a page are uniquely positioned to hang over the edge of the content body. Images are assigned the class "offset-left" or "offset-right". Refer to http://www.ucla.edu/students/prospective-students for examples of how images are positioned.
<img src="/img/content-images/prospective-students-campus-life.jpg" class="offset-left" alt="Female lacrosse players" />
<img src="/img/content-images/callout-stats.gif" class="callout-stats offset-right" alt="Over 5000 coures, 109 academic departments, and over 130 majors" />
Logotype With Signature
Refer to the UCLA Brand Guideline website for instructions on creating your department logotype signature graphic. http://brand.ucla.edu/brand/digital/logo/ If you are using a responsive template, you may need to edit the width of "#template-logo a". The default breakpoint for the logotype is 480 pixels. Use other breakpoints as necessary to scale your graphic. Use your custom.css file to add additional breakpoints or to overwrite the default set at 480px.
@media screen and (max-width:480px) {
...
#template-logo a { width: 250px; }
}
YouTube Video Embeds
Full Width
When embedding a video that fills the width of the page like the one found on http://www.ucla.edu/alumni, you'll need to remove the width and height from the embed code.
<iframe
src="http://www.youtube.com/embed/CUiND-F9wtQ"
frameborder="0" allowfullscreen>
</iframe>
Defined Width
When embedding a video that doesn't fill the width of the entire page like the one found on http://www.ucla.edu/students/prospective-students, you'll need to remove the width and height from the embed code.
Next, wrap the iframe in a div and create an id or class that defines the dimension for your video.
#video-prospective-student {
margin-left: 4px;
max-width: 388px;
}
...
<div id="video-prospective-student">
<iframe
src="http://www.youtube.com/embed/loid1cir06g"
frameborder="0" allowfullscreen>
</iframe>
</div>
Choosing Persistent or Sticky Footers
The template footer can be made persistent or sticky by adding a class to the <body>
tag. By default, footers are persistent. Choose one style for your deployment.
Persistent Footer
Persistent footers always align to the bottom of the browser window regardless of height. The z-index is set higher than the content of the page so it will always be visible and the content will scroll behind it. It's best used for a single line of links as seen on http://ucla.edu.
Sticky Footer
Sticky footers differ from persistent footers by aligning to the bottom of the page content or browser window, whichever is longer in height. By default, it has a height of 100px. It's best used for two lines of content. The first line contains footer links while the second includes static text like department name and contact information. To enable, add the class "sticky-footer" to the body tag of the page.
<body class="sticky-footer">
Template Examples
Template A
Template A can be used for websites that would like to incorporate a more visual layout with large banner images. This is the template that is used for http://ucla.edu.
Home Page
Template Filename | Example |
---|---|
template-a-homepage.html | www.ucla.edu |
Sub Pages
Template B
Template B incorporates a smaller banner image.
Home Page
Template Filename | Example |
---|---|
template-b-homepage.html | Custom – Not Available |
Sub Pages
Template Filename | Example |
---|---|
template-b-subpage.html | Custom – Not Available |
Template C
Template C can be used for smaller sites such as a microsite. This template moves the primary navigation from the top to the left.
Home Page
Template Filename | Example |
---|---|
template-c-homepage.html | www.ucla.edu/external-affairs |
Sub Pages
Template Filename | Example |
---|---|
template-c-subpage.html | Custom – Not Available |
Styles
A reference guide to various styling of content.
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"This is a blockquote. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Nunc lacinia, sem id ullamcorper facilisis, lacus turpis elementum lectus, vitae aliquet leo erat ut diam. Sed faucibus mattis orci, a mattis metus pulvinar a. Quisque tincidunt diam a odio iaculis in vestibulum leo tincidunt. Sed porttitor this is a link neque ac arcu viverra sit amet dignissim nisl vestibulum. Sed fermentum luctus metus vel dignissim. Etiam rhoncus scelerisque mi et dapibus. Donec in ipsum libero, ac posuere arcu. Integer scelerisque purus vel quam gravida sollicitudin. Vivamus tristique leo eu enim aliquet ultrices. Nunc rhoncus sodales dui, sit amet commodo erat suscipit nec. Duis ut ipsum sed nibh aliquam fermentum. Curabitur lorem lectus, vulputate in sollicitudin vitae, condimentum ac sem. Donec magna tellus, tincidunt quis scelerisque sit amet, tempus nec leo. Sed congue metus non augue commodo eget ultricies leo interdum. In nec libero eget metus pretium molestie et ut felis.
Alternative Callout TextThis is bold text. This is italic text.
Callout LinkHeader | Header | Header |
---|---|---|
Cell - Lorem ipsum dolor sit | Cell - Lorem ipsum dolor sit | Cell - Lorem ipsum dolor sit |
Cell - Lorem ipsum dolor sit | Cell - Lorem ipsum dolor sit | Cell - Lorem ipsum dolor sit |
Cell - Lorem ipsum dolor sit | Cell - Lorem ipsum dolor sit | Cell - Lorem ipsum dolor sit |
Styling a Table
To style a table, simply assign the class "stripe" to your table tag. The table header and alternate rows will be styled automatically via functions in /js/global.js. If you want to style your tables manually, assign the class "alt" for alternating table rows.
<table class="stripe" summary="Your table summary"> <thead> <tr> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Cell - Lorem ipsum dolor sit</td> <td>Cell - Lorem ipsum dolor sit</td> <td>Cell - Lorem ipsum dolor sit</td> </tr> <tr> <td>Cell - Lorem ipsum dolor sit</td> <td>Cell - Lorem ipsum dolor sit</td> <td>Cell - Lorem ipsum dolor sit</td> </tr> <tr> <td>Cell - Lorem ipsum dolor sit</td> <td>Cell - Lorem ipsum dolor sit</td> <td>Cell - Lorem ipsum dolor sit</td> </tr> </tbody> </table>
Templates provided by UCLA Marketing & Special Events.
Questions/feedback? Contact Us
Version 1.3.0