University of Minnesota Extension
www.extension.umn.edu
612-624-1222
 Menu  Menu

Extension > Extension web templates > Web style guide

Print Email Share

Web style guide

A style guide and code standards document is a way of ensuring brand and code consistency. By maintaining all of a website's primary elements on a single page, we can see how modular components can be reused, as well as how changes to those elements will affect the site overall.

Colors

Colors are built into the template. Hence, this section is just for reference.

Extension Core Maroon
#7a0019

Extension Core Gold
#ffcc33

Extension Core Red
#ce1b21

Extension Core Maroon Dark
#590006

Extension Core Light Gray
#ddd6ce

Extension Core Gray
#877e77

Typography colors

Text color
#000000

Link color
#980913

Typography

Fonts

  • Arial, Helvetica, sans-serif;
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789


  • 'Roboto', Arial, Helvetica, sans-serif;
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789

Headings

  • h1 - The H1 is the main page heading

    Page title - There may be only one h1 element per page.

  • h2 - The H2 is the section-level heading

    Section title - The secondary header above is an h2 element, which may be used for any form of important section-level header. More than one may be used per page.

  • h3 - The H3 is a third-level heading

    Sub header - The header above is an h3 element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy.

  • h4 - The H4 is the fourth-level heading

    Sub header - Typically used for article title or call-to-action elements.

  • h5 - The H5 is the fifth-level heading

    Sub header

  • h6 - The H6 is the sixth-level heading and the lowest

    Sub header

Body

  • .lede (Intro text)

    A lede, or lead, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story.

  • .text-larger

    All paragraphs are wrapped in p tags. Additionally, p elements can be wrapped with a blockquote element if the p element is indeed a quote. Historically, blockquote has been used purely to force indents, but this is now achieved using CSS. Reserve blockquote for quotes.

    <small> or .text-smaller

    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.

Inline

  • <a> - This is a text link
  • <strong> - Strong is used to indicate strong importance
  • <em> - This text has added emphasis
  • <b> - The b element is stylistically different text from normal text, without any special importance
  • <i> - The i element is text that is set off from the normal text
  • <sup> - Superscript®
  • <sub> - Subscript for things like H2O
  • <abbr> - Abbreviation: HTML
  • <q> - This text is a short inline quotation
  • <cite> - This is a citation
  • <dfn> - The dfn element indicates a definition.
  • <address>
    Address Name
    1234 Main St.
    Anywhere, US 12345
  • <tel> - 1-800-851-9530
  • <time> -
  • <blockquote>
    One small step for man, one giant leap for mankind.

Alignment

  • .text-left

  • .text-right

<p class="text-left"><code>.text-left</code></p>
<p class="text-right"><code>.text-right</code></p>

Buttons

A button is a UI element that requires action by the user to perform a function.

Default Important

<a class="button" href="#">Button Text</a>
<a class="button button-important" href="#">Button Text</a>

Block buttons

These buttons fill the width of the container they are in.

Dates & Locations of course Dates & Locations of course
<a class="button button-block" href="#">Button Text</a>
<a class="button button-important button-block" href="#">Button Text</a>

Grid

The grid structure is based on 12 columns. This code is meant to build the framework for a page. Use columns if you wish to divide a page further.

 
 

<div class="row">
	<div class="grid_3"></div>
	<div class="grid_9"></div>
</div>
 
 
 

<div class="row">
	<div class="grid_3"></div>
	<div class="grid_6"></div>
	<div class="grid_3"></div>
</div>

Each .row can consist of any combination of .grid_1 - .grid_12 that add up to 12.

Columns

Left column Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Right column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Add class of .last

Left column Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Right column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Add class of .last

<div class="column">
    left column, row 1
</div>
<div class="column last">
    right column, row 1
</div>
<div class="clear"></div>
<div class="column">
    left column, row 2
</div>
<div class="column last">
    right column, row 2
</div>
<div class="clear"></div>

Left column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis felis at ante suscipit elementum.

Center column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis felis at ante suscipit elementum.

Right column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis felis at ante suscipit elementum.

<div class="column narrow">
    left column
</div>
<div class="column narrow">
    center column
</div>
<div class="column narrow last">
    right column
</div>
<div class="clear"></div>

Left column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis felis at ante suscipit elementum.

Right column Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis felis at ante suscipit elementum.

<div class="column wide">
    left column
</div>
<div class="column narrow last">
    right column
</div>

Images

A good source for high-quality photos is the Extension image gallery

Saving for web

Images used on the web should be no larger than 800px x 600px at 72 DPI. To view and modify the size of the image in Photoshop, go to Image > Image Size.

Save the image by going to File > Save for Web.

Photographs should be saved as the JPG file format with a quality level of 70.

Image styles

Left align image

<img src="img/fruit-200px.jpg" alt="" class="img-left">

Centered image

<img src="img/fruit-200px.jpg" alt="" class="img-center">

Right align image

<img src="img/fruit-200px.jpg" alt="" class="img-right">

Basic frame

Add class="frame" to the img tag

Photo frame

Add class="photoFrame" to the img tag

Photo captions

Caption

Proin vitae lacus. Class aptent taciti sociosqu ad litora torquent.

<div class="imgCapLeft medium">
	<img src="img.jpg" alt="" />
	<p>Proin vitae lacus. Class aptent taciti sociosqu ad litora torquent.</p>
</div>

Credit

The photo credit has the same structure as the photo caption. The only difference is that you add class="credit" to the p tag.

Copyright © istockphoto

<div class="imgCapLeft medium">
	<img src="img.jpg" alt="" />
	<p class="credit">Copyright © istockphoto</p>
</div>

Caption and credit

The photo credit has the same structure as the photo caption. The only difference is that you add class="credit" to the p tag.

Copyright © istockphoto

Proin vitae lacus. Class aptent taciti sociosqu ad litora torquent.

<div class="imgCapLeft medium">
	<img src="img.jpg" alt="" />
    	<p class="credit">Copyright © istockphoto</p>
    	<p>Proin vitae lacus. Class aptent taciti sociosqu ad litora torquent.</p>
</div>

Full width image with caption

This is an example of an image in a grid_9 column. The image should be 670px.

Proin vitae lacus. Class aptent taciti sociosqu ad litora torquent.

Available classes

Your caption box can either be aligned left, right or full width of the column:

  • imgCap - Full width of column
  • imgCapRight - Aligned right
  • imgCapLeft - Aligned left

In order for the caption to align properly with the image, the images need to be one of these specific widths:

  • xsmall - 100px
  • small - 200px
  • medium - 300px
  • large - 400px
  • xlarge - 500px
Type Example New window?
Link to a HTML document within the umn.edu domain Link to HTML No
Link to a HTML document outside the umn.edu domain Link to HTML No
Link to a PDF, DOC, etc. document within umn.edu domain Link to PDF (960 K PDF) Yes
Link to a PDF, DOC, etc. document outside umn.edu domain Link to PDF (960 K PDF) Yes
Link to a page within the Extension Intranet Link to Extension Intranet No

Things that happen automatically

  • The links that require a new window have that functionality added automatically. Please do not add target="_blank".

Things that you'll need to add manually

  • For links to downloads (PDF, DOC, etc) you'll have to add the size and PDF/DOC/etc denotation manually
  • © 2016 Regents of the University of Minnesota. All rights reserved.
  • The University of Minnesota is an equal opportunity educator and employer. Privacy