Drupal Template: 
UQ Base Template

This guide applies to the legacy UQ Base theme only.

Note: Most of these options do not apply to the UQ School theme.

This section outlines the component parts and web standards for the UQ Base theme. Included are examples and implementation references for the layout and presentation of content.

The theme uses SCSS and CSS classes to assign styling to nearly all web elements available in UQ Drupal. This makes it easy for site maintainers to format and style their pages inline with UQ branding guidelines. For each example here the appropriate classes are listed for reference.

Banners
Drupal Template: 
UQ Base Template

Banners allow you to feature content on your site and can be added via the DS Inception module. There are currently three display modes for banners:

  • Tall Banner
    Standard rotating image with floating caption over the top. Banner changes automatically every few seconds.
  • Tall banner with passive buttons
    Rotating image with floating caption and action buttons below. Banner changes automatically every few seconds.
  • Tall banner with action buttons
    Action buttons that change the image and floating caption on hover.

These banners will display any content that is ticked as Featured and Promoted to Homepage, and has a Feature Image. They are limited to show a max of 3 items and will display the most recently added ones.

Where do I use banners?

We recommend you only use Tall Banners on your homepage. For other pages, you can consider using small to medium image styles to insert images into your content.

How do I set up a banner to display on the homepage?

Read instructions for setting up banners


 

Buttons
Drupal Template: 
UQ Base Template

To create buttons, simply apply class="button" to any link or input you wish to style. Then to apply any of the styles below just add the appropriate additional class. E.g. <a href="#" class="button primary">button link</a>

Button Button disabled

Button large Button medium Button small Button tiny

Button primary Button primary disabled

Button alert Button alert disabled

Button success Button success disabled

Button round Button round disabled

Button expand

.expand fills the full width of its container and retains it's horizontal padding.

Button full-width

.full-width fills the full width of its container and has no left or right padding on the button.

Equal height elements
Drupal Template: 
UQ Base Template

Equalise is a javascript that sets equal heights on a set of elements. For instance a grid list with different lengths of content; equalise will set them all to have the same pixel height as the tallest element in the set.

How to use

Add the class .equalise to the parent of the elements you want to have equal heights.

Add .equal-height to each of the elements.

<ul class="equalise">

    <li class="equal-height">Short content</li>

    <li class="equal-height">Longer content than the short content</li>

    <li class="equal-height">Longest content of them all so that this is the list item that defines the height for all of the items in this list</li>

</ul>

Example

  • Short content
  • Longer content than the short content
  • Longest content of them all so that this is the list item that defines the height for all of the items in this list
Image Styles

What is it?

Images are based on a 4:3 aspect ratio. Banners are the exception as they fit a more specific purpose.

How does it work?

Image styles use a Focus scale and crop algorithm to look for faces in the image and crop around those so faces are not cut out of images. Sometimes this is too hard for the algorithm to do if the image is overly complex or poorly lit. You can still manually crop images in Photoshop and upload those.

Using Image Styles

There is an activity in the Site Editor training which covers how to use image styles.

Updating image styles after replacing images

If you replace an existing image via the Image Browser, any image style versions of the original image will not automatically be updated, for instance banners. To trigger these image styles to be regenerated with the newly replaced image go to Configuration > Media > Image Styles. Edit the style that you have a stale image for (e.g. Banner) and click 'Update Style' without making any changes. This will trigger the process to generate new images for this image style.

NOTE: This is a short term work around until the replace function in the Image Browser is updated to trigger image styles to regenerate.

Style Demo

Below this page is a listing of the variations you can use. We recommend you use small to medium image styles for your content.


Read more information about filesize and dimensions.

Forms

Form elements, fieldsets, inputs and legends

All forms need to have a <fieldset> and <legend> to meet accessibility requirements. class="no-border" can be applied to <fieldset> for a simplier style.

Fieldset Legend

Form element

This is an example form. It doesn't do anything but it looks nice and shows how to use the different elements.

Radio buttons:

Checkboxes:

Vertical labels

The placeholder attribute can be used on forms to place example text inside the field. This works in IE10+, Firefox, Safari, Chrome. It should only be used to provide example text and not to replace the label because it isn't fully supported.

Your details

Horizontal labels

Labels can be placed beside fields by adding the classes .right and .inline to the labels. Use column classes to set width of label and field columns.

Postal address
Forms

In this section

Icons
Drupal Template: 
UQ Base Template

Icon SVG Fonts

The current package has been compiled to incorporate specific Entypo glyphs and Font Awesome social icons. Demo sheet

  • We've picked a subset of the most usable icons from entypo, on the basis it has a clean, neutral, crisp style, aren't overly 'designed' and extended the set to include social icons.
  • Our methodology to date has been to go with what we need and take the best of two libraries where it fits and we have the ability to extend as required.
  • The reference sheet has been compiled via Fontello (fontello.com) and you can color as required: 
    <h6><i class="icon-phone">&nbsp;</i> Call us</h6>
      Call us
  • The only major caveat at the moment is ckeditor strips out empty tags so <i class='icon-*'> </i> will dissapear.
  • The icons have 'settled in' and are in production with a few sites. We've worked through various issues across platforms. Our main focus was standards compliant browsers and IE8+. For an example check out http://uq.edu.au/news (social icons) and the responsive menus.
  • If there are glyphs you think are missing and globally useful the set can be re-compiled and extended. 

PNG Icons

NOTE: .png icons are being phased out in favour of SVG font icons. Sites currently using .png icons should change them to SVG versions.

A core set of icons can be added to pages and code using the classes provided. To inset an icon, create an empty tag such as a <span> or <i> and apply the necessary classes.

Example: <span class="icon add"></span>

Icon sizes

You can change the icon size using these classes:
.large = 48x48px
.medium = 24x24px (also the default size)
.small = 12x12px

a .add.large a .add.medium a .add.small

Icon opacity

You can change the icon opacity using these classes:
.opacity-25 = 25% opacity
.opacity-50
.opacity-75 (also the default opacity)
.opacity-100 = completely opaque

a .add.opacity-25 a .add.opacity-50 a .add.opacity-75 a .add.opacity-100

White alternative icon

A white alternative of each icon can be used by adding the class: .white
This is useful when including icons inside buttons.

Available icons

a .add

a .remove

a .delete

a .edit

a .settings

a .arrow-back

a .arrow-forward

a .arrow-left

a .arrow-down

a .arrow-up

a .arrow-right

a .arrow-solid-left

a .arrow-solid-down

a .arrow-solid-up

a .arrow-solid-right

a .book

a .calendar

a .help

a .secure

a .insecure

a .link

a .map

a .marker

a .menu

a .mobile

a .phone

a .print

a .rss

a .save

a .star

a .star-selected

a .upload

a .warning

a .chat

a .people

a .creative-commons

a .home

a .info

a .mail

a .refresh

a .search

a .add.white

a .remove.white

a .delete.white

a .edit.white

a .settings.white

a .arrow-back.white

a .arrow-forward.white

a .arrow-left.white

a .arrow-down.white

a .arrow-up.white

a .arrow-right.white

a .arrow-solid-left.white

a .arrow-solid-down.white

a .arrow-solid-up.white

a .arrow-solid-right.white

a .book.white

a .calendar.white

a .help.white

a .secure.white

a .insecure.white

a .link.white

a .map.white

a .marker.white

a .menu.white

a .mobile.white

a .phone.white

a .print.white

a .rss.white

a .save.white

a .star.white

a .star-selected.white

a .upload.white

a .warning.white

a .chat.white

a .people.white

a .creative-commons.white

a .home.white

a .info.white

a .mail.white

a .refresh.white

a .search.white

Social Media icons

a .itunesu

a .blogger

a .delicious

a .digg

.facebook

a .flickr

a .foursquare

a .googleplus

a .instagram

a .linkedin

a .pinterest

a .tumblr

.twitter

a .skype

a .vimeo

a .youtube

a .itunesu.white

a .blogger.white

a .delicious.white

a .digg.white

.facebook.white

a .flickr.white

a .foursquare.white

a .googleplus.white

a .instagram.white

a .linkedin.white

a .pinterest.white

a .tumblr.white

.twitter.white

a .skype.white

a .vimeo.white

a .youtube.white

Icons inside buttons

add Add a new image

delete Delete selected

help Get help

arrow-back

List with lead
Drupal Template: 
UQ Base Template

The List with lead View is designed to display a group of 3-6 featured pages, along with some lead in text, on the homepage of a site.

The view can be added and configured via Inception (see guide to building a homepage).

 

Panels
Drupal Template: 
UQ Base Template

1.0 UQ Themed Panels uq.panels.css

Provides an array of panel variations to highlight and feature content with preset UQ themed colours.

  • div.panel defines the panel container with no padding and 4px, 15% drop-shadow.
    • h3 coloured heading. Defaults to white text on black background.
    • .panel-description provides preset tints and border presenting an introduction. Defaults to a grey tint.
    • .panel-element container with padding for separate blocks of content.
    • .panel-html to support consistent presentation of the html code used to implement a feature.

Options

  • .no-shadow to remove dropshadows surrounding the panel.
  • For a full width panel or to present content 'edge to edge' e.g. 100% width banner image use a custom div with the foundation twelve class e.g. <div class="twelve">.

1.1 Panel title

Colours to reflect the vibe of the thing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ipsum, convallis a interdum at, cursus vitae leo. Ut ac orci non purus laoreet venenatis ac sed lorem. Curabitur elit elit, convallis in rutrum non, luctus at lacus. Pellentesque id fringilla eros. Etiam interdum aliquam nunc, eu blandit dolor semper in. Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum, ullamcorper in ante. Suspendisse placerat lacinia mauris, sit amet tristique mauris egestas sed. Phasellus blandit fermentum pharetra. Etiam at nisl non sem lacinia vehicula. Nulla feugiat ante ac sapien ultrices iaculis. Aliquam at velit dui.

A diagram
This is where the escaped code lives.

1.2 Coloured panel title

The vibe of the thing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ipsum, convallis a interdum at, cursus vitae leo. Ut ac orci non purus laoreet venenatis ac sed lorem. Curabitur elit elit, convallis in rutrum non, luctus at lacus. Pellentesque id fringilla eros. Etiam interdum aliquam nunc, eu blandit dolor semper in. Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum, ullamcorper in ante. Suspendisse placerat lacinia mauris, sit amet tristique mauris egestas sed. Phasellus blandit fermentum pharetra. Etiam at nisl non sem lacinia vehicula. Nulla feugiat ante ac sapien ultrices iaculis. Aliquam at velit dui.

1.2.1 Equal height panel

This panel uses equal-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ipsum, convallis a interdum at.

1.2.2 Coloured panel title

This panel uses equal-height

Cursus vitae leo. Ut ac orci non purus laoreet venenatis ac sed lorem. Curabitur elit elit, convallis in rutrum non, luctus at lacus.

1.2.3 Equal height panel

This panel uses equal-height

Pellentesque id fringilla eros. Etiam interdum aliquam nunc, eu blandit dolor semper in. Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam.

2.0 Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ipsum, convallis a interdum at, cursus vitae leo. Ut ac orci non purus laoreet venenatis ac sed lorem. Curabitur elit elit, convallis in rutrum non, luctus at lacus.

2.1 Pies within panels

Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum.

Pie

 

2.2 Edge to edge

Example Image

By removing the panel-element class we can use edge to edge.

Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum.

2.2.1 Deep nested panel

Example nested panel.

Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum.

<div class="panel">
	<h3>1.0 Example Panel</h3>
		<div class="panel-description">
			<p>Description and reference markup via <code>code example</code></p>
		</div>
	<div class="panel-element panel-modifier">
		<style scoped>
			/* insert example specific styles */
			.example { }
		</style>
		<div class="example">
			<!--Insert example html code -->
		</div>
	</div>
	<div class="panel-html">
		<pre> <!--Insert escaped html code here --> </pre>
	</div>
</div>
Utility classes

Sometimes you may need to use override styles to align elements the way you want. This might mean changing the margin or padding, removing shadows or borders, or floating elements left and right. The following classes can be applied to elements to override their styles without having to write custom code.

.hide
Hides the element using display:none. Shouldn't be used on content.
.no-border
Removes the border from the element.
.no-padding
Sets padding to zero.
.no-margin
Sets margin to zero.
.no-shadow
Removes box-shadow from the element.
.margin
Adds 10px of margin on all sides.
.margin-top
Adds 10px of margin to the top.
.margin-bottom
Adds 10px of margin to the bottom.
.margin-left
Adds 10px of margin to the left.
.margin-right
Adds 10px of margin to the right.
.padding
Adds 10px of padding on all sides.
.padding-top
Adds 10px of padding to the top.
.padding-bottom
Adds 10px of padding to the bottom.
.padding-left
Adds 10px of padding to the left.
.padding-right
Adds 10px of padding to the right.
.left
Floats the element to the left using float:left.
.right
Floats the element to the right using float:right.
.text-left
Aligns content inside the element to the left using text-align:left.
.text-right
Aligns content inside the element to the right using text-align:right.
.text-center
Aligns content inside the element to the center using text-align:center.
Quicktabs

Tabs are only available via the Quicktabs module.

How to use Quicktabs

  1. Enable Quicktabs module. (The module is not enabled by default and must be requested for use)
  2. Add a Quicktab by going to Structure > Quicktabs > Add Quicktabs Instance
  3. Enter a title, this will be the block title.
  4. Change the renderer to 'zurb_foundation' and select your desired 'Tab Style' below
  5. By default it gives you 2 blank tabs. Enter a title for each and select the item of content you want to display in each tab. You can display blocks, views, node content, or even another Quicktabs instance in each tab. Quicktabs are just a container that displays other content in a tabbed format, the content doesn't live within Quicktabs itself.
  6. Add as many additional tabs as you require.
  7. Once saved the Quicktab is available as a block. Go to Structure > Blocks to find it and assign to a region and pages.

Notes to address

  • Tabs that don't include the heading of the content in them actually output an empty <h2> tag containing an empty <a>.
  • All the tabs point to anchors but the anchor ids don't exist on the tab descriptions. Fails WCAG and means you can't link directly to a specific tab.
  • Zurb_Foundation styles are available to Quicktabs (module) when added as a block. When Quicktabs are used as a formatter for a View, the Zurb_Foundation styles are not available. This still needs to be configured.
  • TO DO: The base Quicktab styles need to be disabled as they are awful.
Tables
Drupal Template: 
UQ Base Template

Cell alignment

By default cell content will vertically aligned to the center of the cell.

  • To align cell content to the top, apply the class .valigntop to the <table>
  • To align cell content to the bottom, apply the class .valignbottom to the <table>

Default table with caption

Table caption
tbody th one tbody th two tbody th three tbody th four
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4

Borderless table

class='noborder'

tbody th one tbody th two tbody th three tbody th four
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4

Simple table with outline

class='noborder striped outline'

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Horizontal rule table

class='horizontal striped'

tbody th one tbody th two tbody th three tbody th four
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4

Minimal table

class='minimal'

tbody th one tbody th two tbody th three tbody th four
thead th one Division 2 Division 3 Division 4
thead th one Division 2 Division 3 Division 4
thead th one Division 2 Division 3 Division 4

Styled table

class='border gradient rounded uppercase'

# IMDB Top 10 Movies Year
1 The Shawshank Redemption 1994
2 The Godfather 1972
3 The Godfather: Part II 1974
4 The Good, the Bad and the Ugly 1966
5 Pulp Fiction 1994
6 12 Angry Men 1957
7 Schindler's List 1993
8 One Flew Over the Cuckoo's Nest 1975
9 The Dark Knight 2008
10 The Lord of the Rings: The Return of the King 2003

Styled table

class='noborder outline striped gradient'

Client/Browser Test Issues
Gmail (Desktop)  
Gmail (Mobile) If the same email is sent repeatedly Gmail will clip it, causing the layout to appear slightly wonky.
Gmail (iOS)  
Gmail (Android)  
Yahoo Mail (Desktop)  
Yahoo Mail (Mobile)  
Mail (iOS)  
Mail (OSX)  
Email (Android)  
Outlook 2000-2003  
Outlook 2007  
Outlook 2012  
Hotmail (Desktop) Headers are green for some reason.
Hotmail (Mobile) Body is 15px too wide to the right - might be a padding issue.
Thunderbird  
Sparrow (iOS)  
Sparrow (Desktop)  

Faculty of Business, Economics and Law

General Information Session for Australian Undergraduate Students

This session includes information about your program including what to enrol in now, what major you can study, how to plan your program, changing programs, and important dates for successful study.
WHO All Australian students commencing studies in undergraduate programs in the Faculty, including dual programs
WHEN Monday, 30 January 2012 - Wednesday, 1 February 2012 - Add to calendar
WHERE Physiology, Building 63, Room 358 - View Map

Monday 21 February | What's on this week

This session includes information about your program including what to enrol in now, what major you can study, how to plan your program, changing programs, and important dates for successful study.

Time Activity Location
Monday
00.00am - 00.00pm Table Cell Table Cell
00.00am - 00.00pm Table Cell Table Cell
00.00am - 00.00pm Table Cell Table Cell
00.00am - 00.00pm Table Cell Table Cell
Tuesday
00.00am - 00.00pm Table Cell Table Cell
00.00am - 00.00pm Table Cell Table Cell
00.00am - 00.00pm Table Cell Table Cell
Wednesday
00.00am - 00.00pm Table Cell Table Cell
00.00am - 00.00pm Table Cell Table Cell
00.00am - 00.00pm Table Cell Table Cell

Green theme table

.green-theme

tbody th one tbody th two tbody th three tbody th four
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4

Blue theme table

.blue-theme

tbody th one tbody th two tbody th three tbody th four
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4

Gold theme table

.gold-theme

tbody th one tbody th two tbody th three tbody th four
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4
Division 1 Division 2 Division 3 Division 4
Toggle

Toggles can be applied to content in a page or used to format a view.

Default style

Create a <ul> with class="toggle". Put class="active" on the first <li> to make it open by default.

  • 1. Enrol
  • 2. Find Accommodation
  • 3. Getting to UQ

    Lorem ipsum dolor sit amet, 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. 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.

  • 4. Get to know your Campus

    Lorem ipsum dolor sit amet, 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. 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.

  • 5. Prepare for study

    Lorem ipsum dolor sit amet, 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. 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.

  • 6. Make friends

    Lorem ipsum dolor sit amet, 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. 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.

Basic style

Create a <ul> with class="toggle basic"

  • 1. Enrol
  • 2. Find Accommodation

    Lorem ipsum dolor sit amet, 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. 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.

  • 3. Getting to UQ

    Lorem ipsum dolor sit amet, 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. 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.

  • 4. Get to know your Campus

    Lorem ipsum dolor sit amet, 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. 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.

  • 5. Prepare for study

    Lorem ipsum dolor sit amet, 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. 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.

  • 6. Make friends

    Lorem ipsum dolor sit amet, 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. 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.

Code example

<ul class="toggle">
	<li class="active">
		<div class="title">
			<h5>Toggle 1</h5>
		</div>

		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</li>
	<li>
		<div class="title">
			<h5>Toggle 2</h5>
		</div>

		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</li>
	<li>
		<div class="title">
			<h5>Toggle 3</h5>
		</div>

		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</li>
</ul>
	
Typography

Headings

Standard headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Add .serif class to headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Underlined Heading

.underline

Paragraph

Curly blue fractal like object of unknown origin. Source: flickr

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Subheading (h2)

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Subheading (h2)

Consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Sub subheading (h4)

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.

Sub subheading (h4)

Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

[top]


Links are styled automatically.

For links to other websites add class="external" to indicate it will take the user away from the current website. It is recommended to use this method rather than opening all links in a new window, let the user decide for themselves if they want to open in a new window/tab.

<a href="http://www.google.com" class="external">Link to external website</a>
http://www.google.com


List types

Default ordered list (ol)

  1. List Item 1
  2. List Item 2
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
  3. List Item 3
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item

Default unordered list (ul)

  • List Item 1
  • List Item 2
    1. Nested Ordered List Item
    2. Nested Ordered List Item
    3. Nested Ordered List Item
  • List Item 3
    • Nested List Item
    • Nested List Item
    • Nested List Item

[top]

Four column nested

ul.disc
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.circle
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.square
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.arrow
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.inline
  • List item no padding, can be used with any of the previous lists.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
ul.no-bullet
  • List item no padding, can be used with any of the previous lists.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

Unordered list with dividers

.divider goes on the <ul> or <ol> and .dark .dashed .thick .no-top .no-tail can be used for additional styling.

  • List Item 1
  • List Item 2
    1. Nested Ordered List Item
    2. Nested Ordered List Item
    3. Nested Ordered List Item
  • List Item 3
    • Nested List Item
    • Nested List Item
    • Nested List Item

Definition list

Title:
Definition list.
Purpose:
Definition lists consist of two parts: a term and a description. To present key/value data in this format, it has been overlooked for years. There are some limitations and for example, no block level tags should be used.
Why is this:
Well, possibly due to the rather obscure dl dd and dt tags. Go look it up on w3schools
Anything else:
Just that we should use this appropriately rather than a table. Key value pairs and tables are two completely different things.

Definition list horizontal

Title:
Definition list.
Purpose:
Definition lists consist of two parts: a term and a description. To present key/value data in this format, it has been overlooked for years. There are some limitations and for example, no block level tags should be used.
Why is it under utilised?:
Well, possibly due to the rather obscure dl dd and dt tags. Go look it up on w3schools
Anything else:
Just that we should use this appropriately rather than a table. Key value pairs and tables are two completely different things.

abbr, acronym, pre, code, sub, sup, etc.

This is a sentence with an example of superscript and subscript. It was written by Web Services (bold the author), authors of This Website About Drupal (and <cite> the publication). At UQ we often refer to ourselves in acronym form and this can be marked-up like this in HTML <acronym>, or like this UQ in HTML 5 <abbr>. It's also handy for things like AVE.

pre
defines preformatted text which is great for code examples or specific indenting.

You can use it with <code> to display formatted code examples like this using class="markup" and <pre>

<table summary="This is a table to demonstrate tables.">
	<thead>
		<tr>
			<th scope="col">Table header 1</th>
			<th scope="col">Table header 2</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Table footer 1</td>
			<td>Table footer 2</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Table data 1</td>
			<td>Table data 2</td>
		</tr>
	</tbody>
</table>

Blockquote

"This stylesheet is going to help so freaking much."

-Blockquote

The price of greatness is responsibility. This is a class="pullquote offset-by-one" style example. It stands out and is awesome.

Winston Churchill

[top]