Ecosystem Style Guide

Welcome to the style guide for the Ecosystem. Use this as a guide for adding styles to your courses.

Guidelines

Click on category headings below to access more information.

The Clean Code section includes general guidelines that are applicable course-wide. Template sections show proper code for various course features.

Clean Code

  1. Remove inline styles. Any time you see <style= it should be removed and if there's something important styled there it should be sent to Carl to include in a style guide (and move to an external css style sheet.) This includes all style= and <font> tags.
  2. Avoid adding space between elements or at the end of a content section. (No extraneous <p> or <p>&nbsp;</p>.
  3. Avoid using &nbsp; unless it's called for.
  4. Use <p> in place of <div> where a <div> is being used simply to create a new style.
  5. Where possible, try not to put spaces inside tags. For example, use <strong>Title Here</strong> not <strong>Title Here </strong> with a space after "Here". This is important if we decide to apply background coloring to certain items.
  6. If you come across code that has been commented out - usually with a <-- and a --> - leave the comments but edit the content like you would any other code.
  7. Tables
    • Tables should have captions and summaries.
    • Avoid using <p> tags to style in tables. If you need more than one line of text, separate with two breaks <br /><br />
  8. Headings
    • H3 is reserved for the largest, first heading in the content area. H4 and H5 for sub-heads. 
    • Do not add <b> or <strong> to headings - this styling will be done via the CSS.
  9. Links
    • By default, all non e-ed links will open in a new window and all e-ed links will open in the same window. Therefore, delete all target="_blank" unless there is a compelling reason to leave it. For example, you want an assignment page to open in a new window.
    • Linked text should, where possible, include a meaningful link text instead of a URL. 
    • Check links to make sure they open correctly (especially internal links).
  10. Images
    • Maximum size of an image should be 700px. 
    • Crop any whitespace around the image.
    • Images should have meaningful alt tags.  If the image is purely decorative an alt=" " will suffice.
  11. A note on dollar signs ($)  If the MathJax module is turned on in a course, the dollar sign acts as some sort of marker to start displaying MathML. This means that anytime you use a dollar sign in a sentence or a table, etc. (but not as part of an equation) the page thinks it is time to start displaying MathML. To force the dollar sign to render properly, either add a forward slash before the dollar sign (\$) in the wysiwyg editor (not in the html code) or add a span tag around the dollar sign in the code (<span>$</span>).

      Box Templates

Required reading
<div class="box-reading-required">
<h4>TITLE (Such as Required Reading</h4>
<p>Enter Text Here</p>
</div>
 
Optional Reading
(also Supplemental Reading and Concept Gallery)
<div class="box-reading-optional">
<h4>TITLE</h4>
<p>Enter Text Here</p>
</div>
 
Attention/Note
(also Tell Us About It, Reading Review, and Reminder)
<div class="box-note">
<h4>Note:</h4>
<p>Enter Text Here</p>
</div>
 
Activities/Assessments
(also Deliverables)
<div class="box-activity-required">
<h4>TITLE (Such as Deliverable)</h4>
<p>Enter Text Here</p>
</div>
 
Try This, Self Tests, Self Checks
<div class="box-activity-optional">
<h4>Try This!</h4>
<p>Enter Text Here</p>
</div>
 
Box with a Left Justified Image Inside
(rarely used)
<div class="box-image-left">
<p>Enter Text Here</p>
</div>
 
PSU Advert
(used in OER GIS courses to advertise)
<div class="box-psu-ad">
<div class="imgleft"><img alt="Penn State logo" src="https://courseware.e-education.psu.edu/dutton_drupal_theme_images/logo-p..."></div>
<p>Students who register for this Penn State course gain access to assignments and instructor feedback, and earn academic credit. Information about Penn State's Online Geospatial Education programs is available at the <a class="ext" href="http://gis.e-education.psu.edu" target="_blank">Geospatial Education Program Office</a>.</p>
</div>
 
Generic Box for Exceptions
<div class="box-other">
<p>Enter Text Here</p>
</div>

      Table Templates

Remember to remove all the cellpadding, cellspacing, width, height, and border elements to all tables.

Checklist Table (Road Map and Assignment Tables)
<table class="table-checklist" summary="table summary">
<caption>Enter Table caption</caption>
<thead>
  <tr>
    <th scope="col">Heading 1</th>
    <th scope="col">Heading 2</th>
    <th scope="col">Heading 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>New row 1</td>
    <td>New row 2</td>
    <td>New row 3</td>
  </tr>
</tbody>
<table>
 
Data Table Header Top Row Only (will have zebra striping)
<table class="table-data" summary="table summary">
<caption>Enter Table caption</caption>
<thead>
  <tr>
    <th scope="col">Heading 1</th>
    <th scope="col">Heading 2</th>
    <th scope="col">Heading 3</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>New row 1</td>
    <td>New row 2</td>
    <td>New row 3</td>
  </tr>
</tbody>
</table>
 
Data Table Header Top Row and Side Column
<table class="table-data" summary="table summary">
<caption>Enter Table caption</caption>
<thead>
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</tbody>
</table>
 
Data Table Header Side Only
<table class="table-data" summary="table summary">
<caption>Enter Table caption</caption>
<tbody>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</tbody>
</table>
 
Schedule Table (Syllabus ONLY)
<table class="table-schedule" summary="The topics, readings, and assignments for the lesson.">
<caption>Enter Weekly Lesson number and name</caption>
<tbody>
  <tr>
    <th scope="row">Date:</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Topics:</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Readings:</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th scope="row">Assignments:</th>
    <td>&nbsp;</td>
  </tr>
</tbody>
</table>

      Image Templates

Image Center (caption and/or credit lines appear with this style)
The classes "image-center," "image-caption," and "image-credit" may also be used here
<div class="img-center"><img alt="Enter image and alt text here. No sizes!" src="foo.jpg">
     <div class="img-caption">Enter caption here</div>
     <div class="img-credit">Enter image credit here</div>
</div>
 
Image Left (no caption or credit line)
The class "image-left" may also be used here
<div class="img-left">
     <img alt="Enter image and alt text here. No sizes!" src="foo.jpg">
</div>
 
Image Right (no caption or credit line)
The class "image-right" may also be used here
<div class="img-right">
     <img alt="Enter image and alt text here. No sizes!" src="foo.jpg">
</div>
 
Image Left (no caption or credit line, no border - very small decorative images generally)
The class "image-left-unboxed" may be used here
     <img class="image-left-unboxed"alt="Enter image and alt text here. No sizes!" src="foo.jpg">
 
Image Right (no caption or credit line, no border - very small decorative images generally)
The class "image-right-unboxed" may be used here
     <img class="image-right-unboxed"alt="Enter image and alt text here. No sizes!" src="foo.jpg">
 
Image as a Bullet (used to vertically align middle a small decorative image)
The class "img-bullet" may be used here
     <img class="img-bulletalt="Enter image and alt text here. No sizes!" src="foo.jpg">
 
NOTE: If the images in the course are broken, you will need to manually add /files to the URL between the course number and image (see below for example):
 
 

      Video Templates

Precede each video with an accessibility-friendly statement:

Please watch the following video (2:30) entitled "Geology is Your Friend."

 
Iframe Only
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/IessjPY9gwI" frameborder="0" height="225" width="400"></iframe>
</div>
 
When a Caption is Needed under a video

<div class="img-center">
<div class="video-wrapper">embed code</div>
<div class="img-caption">Caption</div>
<div class="img-credit">Credit</div>
</div>

 

      List Type Templates

To create ordered lists using letters or Roman Numerals:

  • Alpha Lower case, <ol class="list-alpha-lower">
  • Alpha Upper case, <ol class="list-alpha-upper">
  • Roman Numerals Lower case, <ol class="list-roman-lower">
  • Roman Numerals Upper case, <ol class="list-roman-upper">

      Miscellaneous Templates

PRE formatted text
In places where the PRE text involves several lines, and/or uses spaces to indent, use the <PRE> tag.
In places where words in paragraph content need to be styled, use <span class="pre">
(NB: The class "pre" can be added as a class to any tag.)
 

If you want to use syntax highlighter, there are instructions on this page.

Bibliography
<div class="box-bibliography">
<p>Reference 1</p>
<p>Reference 2</p>
...
</div>
 
Block Quote
<blockquote>
<p>some text<p>
</blockquote>
 
Highlight
<span class="highlight">...</span>
This can be used to highlight text.
 
Return to Top Link

Used for anchors to return to the top of the page, especially in the syllabus but possibly in other places.

<p class="link-top"><a href="#top">Return to top of page</a></p>
 
Math Equation with a Figure Number
<div class="box-math">EQUATION</div>
<div class="box-math-caption">(#)</div>
<div class="box-math-clear">&nbsp;</div>
 

      Toggler

**Make sure the toggler module is turned on in the course: In the black menu bar, click Modules. In the box, filter for js. Choose custom js library>configuration and check the Toggler box. Note that if custom js library is not enabled, you will have to enable it (check the box) in order to get the configuration option.** 

NOTE: Toggler code is not yet fully accessible. You can continue to use this code for now but it will evenutally need to be updated.

Self-Check using Toggler
<div class="box-activity-optional">
<h4>Title of box</h4>
<p>Question1</p>
<p><textarea aria-hidden=“true" cols="100" rows="5"></textarea></p>
<div aria-label="expand content" class="toggler"><em>Click for answer...</em></div>
<div aria-label="answer">
<p>ANSWER:text</p>
</div>
 
<p>Question2</p>
<p><textarea aria-hidden=“true" cols="100" rows="5"></textarea></p>
<div aria-label="expand content" class="toggler"><em>Click for answer...</em></div>
<div aria-label="answer">
<p>ANSWER:text</p>
</div>
 
<p>Question3</p>
<p><textarea aria-hidden=“true" cols="100" rows="5"></textarea></p>
<div aria-label="expand content" class="toggler"><em>Click for answer...</em></div>
<div aria-label="answer">
<p>ANSWER:text</p>
</div>
</div>
 
Toggler outside of an image or video caption

<div aria-label="expand content" class="toggler">

<strong>Click for text description.</strong> This will expand to provide more information.</div>

<div aria-label="additional content">

Add text description here</div>

 
Toggler inside a caption box for an image
<div class="img-center"><img alt="" src="">
<div class="img-caption">
<div aria-label="expand content" class="toggler">
<strong>img caption here<br></strong>Click to expand to provide more information</a></div>
<div aria-label="additional content">
Add text description here
</div>
</div>
<div class="img-credit">img credit here</div>
</div>
 
Toggler inside caption box for a video
<div class="img-center">
<div class="video-wrapper"><iframe allowfullscreen="" frameborder="0" height="315" src=""></iframe></div>
<div class="img-caption">
<div aria-label="expand content" class="toggler">img caption here<br>
Click for transcript.</div>
<div aria-label="additional content">
<p>Insert transcript here</p>
</div>
</div>
<div class="img-credit">video credit here</div>
</div>
 
 
 
Note that you can re-style this format (above) as an ordered list or whatever makes sense. Also, make sure the toggler module is turned on in the course: In the black menu bar, click Modules. In the box, filter for js. Choose custom js library>configuration and check the Toggler box. Note that if custom js library is not enabled, you will have to enable it (check the box) in order to get the configuration option. 
 
 
 
 

 

Final Ecosystem Checklist

Printable checklist

  • Inline styles (<style, <font>, etc.) have been removed

  • Extraneous <p> tags and spaces (&nbsp) have been removed

  • Headings have been reviewed, are sized appropriately, and are not styled to be bold

  • Boxes use appropriate Ecosystem templates

  • Videos use appropriate templates and each is preceded with an accessible-friendly statement like, "Please watch the following (2:31) video on Bison."

  • Bibliography text, block quotes, highlighted text, togglers, and math equations w/figure numbers use appropriate templates

Tables

  • Tables use appropriate templates for their function (“checklist table” vs. “data table top row only”)

  • All tables have captions and summaries

  • <p> tags inside tables have been removed. Use <br/> tags if you need more than one line of text

Links

  • Target=”_blank” has been eliminated where links lead to outside pages

  • Meaningful text links (Penn State Libraries) have replaced url links (http://www.libraries) and are more accessible than: click here or here or any short, single-word 

  • Broken links have been noted in the course’s corresponding spreadsheet, located in: Ecosystem Move Notes and Info

Images

  • Images are less than 700 px and don’t include unnecessary white space around the edges

  • Images (unless purely decorative) have meaningful alt tags

  • Images w/captions and credits should use the img-center div; others should use img-left or img-right