Design and layout features using LP5 styles.

Section styling

Section elements have padding and background coloring. The colors alternate in a repeating pattern of five starting with the fourth section. The first three are ignored because they are usually the banner, tagline and description. Adding classes "lpeRegForm," "degree-finder" & "info-sessions" will override the pattern. See Forms for more information about the RFI background colors. Since video banners use a figure rather than section element, a special sibling selector will recolor the third section after the figure.

First section

Second section

Third section

Fourth section:nth-of-type(5n+4)

Fifth section

Sixth section:nth-of-type(5n+6)

Seventh section:nth-of-type(5n+7)

Eighth section

Ninth section:nth-of-type(5n+4)

Tenth section

Eleventh section:nth-of-type(5n+6)

Twelfth section:nth-of-type(5n+7)

Thirteenth section

section:nth-of-type(5n + 6) {
    background-color: #DBE3E5
}

section:nth-of-type(5n + 4), section:nth-of-type(5n + 7) {
    background-color: #F4F4F4
}

Standard Body

Most pages feature the same standardized content so that is included from the LP5 template folder (standardBody.php). The standard includes these sections:

If you want these sections to appear in a different order or only include a subset of them, open standardBody.php and copy the parts you want. It's composed of includes as well. Don't forget to comment or remove the include statement for standardBody just before the footer include.

<?php 
   incTemplateSection("standardBody"); // COMMENT THIS TO REMOVE STABDARD CONTENT
   incTemplateSection("footer");
?>

Remember that changing the order of included sections will not change the background coloring sequence.

Banners

The html structure of our banners is like this:

<section class="banner">
   <div>
      <h1></h1>
      <p></p>
  </div>
</section>

The section is what delineates banner content. The inner div shapes & positions its contents. The optional h1 and paragraph are for SEO and introducing the rest of the page content. In detail it looks like this:

<section class="banner">
   <div>
       <h1><span class="degreeType”>This optional text will be tiny ALLCAPS</span><br />
       <span class="nowrap”>This is the optional Big Title But Won’t Wrap</span></h1>
       <p>This is a an optional paragraph, and here’s the appropriate brand name spelled out: 
       <?php returnBrand($GLOBALS["brand"], “long") ?>, and here it is again as 
       an acronym: <?php returnBrand($GLOBALS["brand"], “short") ?>. Note that 
       the h1 may look like two different elements because of the degreeType styling. For SEO reasons, 
       it is one phrase and should make sense as such.</p>
   </div>
</section><!-- /.banner —>

AMU

APU

Standard banners have white text on a default background image specified by CSS and designed so the width of the div content is less than half the banner positioned on the right:

By default, the system offers different banners for APU & AMU which are assigned using PHP with this code:

include("_banner-".$GLOBALS["brand"].".php");

The variable $GLOBALS["brand”] will pick the appropriate version as long as your code looks like this:

<section class="banner"> … </section>

You can also comment out the PHP include statement and place the banner code within your page. This is useful for one-offs that grouped in a folder and have the same banner for AMU & APU but are distinctly different from other pages in the group. Examples include the Military Degrees or Athletes pages.

Wide banners have a background image (usually a blue duotone) but the text is full width (minus padding) and aligned to the left:

<section class="wide banner" style="background-image: url(/common/images/banners/marketing-lg.jpg);"> … </section>

Blank banners have a light blue color instead of a background image with full width (minus padding) blue centered text that’s larger than normal. Usually they only contain an h1.

<section class="banner wide blank"> … </section>

Mobile View

All of the variants have responsive mobile layout that uses the same background image (if any). The background art is repositioned and scaled so only the right side is visible with text superimposed on it. The div scales to the full width and height of the mobile banner and has a translucent background that help legibility.

Forms

The default form is usually partial width aside the content article in the description section.

Partial-width RFI form

<section class="description">
   <article class="content">
      CONTENT GOES HERE
   </article>
   <div id="rfi">
      PARTIAL-WIDTH FORM GOES HERE
   </div><!-- /#rfi -->
</section><!-- /.description --> 

Full-width form

Note that the About Us page as well as others has a different looking RFI layout. It’s the same form just nested in a section with another class=“lpeRegForm” around it. That extra info also makes the form appear as two columns in desktop view.

<section class=“lpeRegForm”><form class="lpeRegForm"> … </form></section>

Articles & asides

This layout uses semantic elements to organize and present the important content. For layouts where the descriptive content is side-by-side with the RFI form, an <article> is wrapped around the content. This resizes its content to 60% of the width of its parent.

<section class="description">
   <article class="content">
      CONTENT GOES HERE
   </article>
   <div id="rfi">
      PARTIAL-WIDTH FORM GOES HERE
   </div><!-- /#rfi -->
</section><!-- /.description --> 

For full-width layouts with no side-by-side RFI form, thre is no <article> needed and the content class should be added to the section especially if you want to use asides.

<section class="content description">
      CONTENT GOES HERE
</section><!-- /.description -->
 

Asides

Asides are used to insert boxed text within an <article>. Since these are often employed for more than one page, there are includes available in the _includes folder that begin with "aside-" but you can also make them yourself.

Asides MUST be children of elements with class="content" in order to inherit the styling shown here.

<aside>
   <h3>Headline</h3>
   <p>Text</p>
</aside>
<aside class="affiliation">
   <img src="image.png" alt="logo" class="logo" >
   <h3>Headline</h3>
   <p>Text</p>
</aside>
<aside class="inverse">
   <h3>Headline</h3>
   <p>Text</p>
</aside>
<aside class="affiliation inverse">
   <img src="image.png" alt="logo" class="logo" >
   <h3>Headline</h3>
   <p>Text</p>
</aside>
<aside class="inverse transparent">
   <h3>Headline</h3>
   <p>Text</p>
</aside>

RFI

Ut eget ante est. Pellentesque tincidunt porttitor velit, ut rutrum risus gravida eu.

Vivamus consequat nibh vitae lectus sollicitudin tempor. Etiam pretium ligula nunc, a pharetra velit posuere a.

Duis eu lobortis metus. Morbi scelerisque turpis magna, at malesuada nunc dapibus ac.

Nullam dignissim condimentum arcu, eu pellentesque elit ornare pellentesque.

Morbi consequat at orci eget condimentum. Donec vel porttitor felis.

Suspendisse pharetra mollis leo, quis faucibus lacus mattis sollicitudin.

To include an aside, use this code: <?php include($GLOBALS["coreContentDir"]."_includes/aside-acbsp.php"); ?>

Columns

Wrapping text in a <div> with class="column" has different effects in the desktop view depending on the parent element class. They will all collapse on small mobile views.

Tuition

If the parent has a class="tuition" the columns will be 50% width separated by a vertical line.

First column

Suspendisse a nibh vitae quam eleifend facilisis sed sed quam. Morbi convallis nulla ex, non ornare metus cursus nec. Aenean laoreet consequat eros. Pellentesque in orci metus.

Second column

Praesent vitae felis vitae libero consequat mollis vitae at justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ut viverra purus, at molestie augue..

<div class="tuition">
   <div class="column">
      <h4>First column</h4>
      <p>Text</p>
   </div>
   <div class="column">
      <h4>Second column</h4>
      <p>Text</p>
   </div>
</div>

Spotlight

If the parent has a class="spotlight" the columns will be 33% width without any visible separator.

First column

Aliquam a arcu mauris. Aliquam augue velit, suscipit quis lacus et, commodo interdum elit. Phasellus sem arcu, laoreet id tempus et, molestie nec urna. In hac habitasse platea dictumst.

Second column

Curabitur urna risus, laoreet ac venenatis vitae, tristique ornare ante. Duis lobortis auctor erat id fringilla.

Third column

Morbi rutrum arcu id pulvinar fermentum. In pretium posuere nulla, id rutrum nisl pharetra vel. Curabitur quam nisi, pharetra nec nulla vitae, accumsan congue felis.

<div class="spotlight">
   <div class="column">
      <h4>First column</h4>
      <p>Text</p>
   </div>
   <div class="column">
      <h4>Second column</h4>
      <p>Text</p>
   </div>
   <div class="column">
      <h4>Third column</h4>
      <p>Text</p>
   </div>
</div>

SVG

We are using SVG for the Tuition and Transfer credit info. The stylling of elements within the SVG is handled by the CSS. More information will be forthcoming.

CODE
 

Testimonials & bylines

Testimonials used in the spotlight section are uniformly structured and reusable. They make use of <blockquote> and <cite>. It displays name, student information and a quote underneath a portrait image.

Heidi Boe Meinhart
Heidi Boe Meinhart
M.S., Sports Management

American Public University exceeded all of my expectations. The resources they provided me made me confident I could achieve my degree.

Martin Lawson
Martin Lawson
B.A., Transportation & Logistics Mgmt.

American Public University has opened my eyes to a whole new world of learning that I didn't even know existed.

Jennifer Deater
Jennifer Deater
B.A., Hospitality Management

American Public University was the answer for us. The online format, the courses – everything was a fit for what we needed.

<img src="/common/images/students/publicj.png" alt="Student Portrait">
<blockquote>
   <cite>Jane Q. Public<br>
   <span>Major, 2016</span></cite>
   <p>Quotable blurb.</p>
</blockquote>
 

Byline

Bylines are structured similar to Testimonials and use <blockquote> or <cite> but since they don't have quoted text, they have no <p>. An example byline is on the ambassadors page.

In a byline, the name, title and other contact information will appear to the side of the image.

<img src="/common/images/students/publicjx.png" alt="Portrait">
<blockquote>
   <cite>Julia X. Public<br>
   <span>Title</span></cite>
</blockquote>
 

Grids

Grids are lists which have styling applied that for each list item: hides bullets/numbers and displays as in inline block. This has the effect of redering the list as a horizontal row. The width of each list item block is 120px for the basic grid and 250px for the captioned grid. Basic grid list items will resize any child images to fit their width and center text.

<ul class="grid">
   <li><a href="#"><img src="image1.png" alt="Image1"> List Item 1</a></li>
   <li><a href="#"><img src="image2.png" alt="Image2"> List Item 2</a></li>
   <li><a href="#"><img src="image3.png" alt="Image3"> List Item 3</a></li>
</ul>

Wider grid

In a list with class="locations grid", each list item will be 220px.

<ul class="grid locations">
   <li>information</li>
   <li>information</li>
   <li>information</li>
</ul>

Captioned grids

In a list with class="captioned grid", each list item will be 250px. Text wrapped in a <span> will overlay the bottom of the image in a transluecent box.

<ul class="captioned grid">
   <li><a href="#"><img src="image1.png" alt="Image1"> <span>List Item Caption 1</span></a></li>
   <li><a href="#"><img src="image2.png" alt="Image2"> <span>List Item Caption 2</span></a></li>
   <li><a href="#"><img src="image3.png" alt="Image3"> <span>List Item Caption 3</span></a></li>
</ul>

Side-by-side cost

At least one page has cost information prominently displayed under the banner. Each value is a list item displayed side-by-side. An unordered list inside parent with the class="tagline" will display inline separated by vertical lines. Adding class="cost" to the unordered list with increase the font size.

Online Associate of Arts for Childcare Professionals

  • Cost per Credit: $270
  • Total Tuition: $16,470
<section class="tagline">
  <h2>Online Associate of Arts for Childcare Professionals</h2>
  <ul class="cost">
     <li>Cost per Credit: $270</li>
     <li>Total Tuition: $16,470</li>
  </ul>
</section>
 

Clean Lists

For information that makes sense to structure as a list but you want to display without bullets like on the Open House page, or use icons use <ul class="cleanList">

<ul class="cleanList">
   <li><a target="_blank" class="button" href="#">Register Now</a> for this event</li>	
   <li><a target="_blank" class="button" href="#">Register Now</a> for this event</li>
</ul>

Adding an extra icon class resizes an image within each <li> to 55px square icon with margin causing the text to wrap neatly beside it. An example if this is the Financial Aid page.

<ul class="icon cleanList">		
   <li><a title="icon" href="#"><img src="/common/images/icons/federal-student-aid.png" alt="icon"></a> Item description goes here.</li>       
   <li><a title="icon" href="#"><img src="/common/images/icons/frequently-asked-questions.png" alt="icon"></a> Item description goes here.</li>
</ul>

Show More

Some ways to show/hide info on page:

Option 1: use Javascript + inline CSS

This has a couple drawbacks: the prompt must say "More" and nothing else because the JS will change it after it is clicked. Also you must include inline CSS style="display:none" on the second part or else it won't be hidden when the page first loads.

More

<div id="showMore">More</div>
<div id="more" style="display:none">Information revealed to users see when they click "More."</div>

Option 2: Use pure HTML 5

This is simpler, but only works in modern browsers. By default, everything is hidden in the details tags except what's in the nested summary tags, but that can be reversed if you add the attribute open to the opening details tag. MDN has additional info.

Summary text users click to expand Information revealed to users see when they click the summary text.
<details><summary>Summary text users click to expand</summary>
Information revealed to users see when they click the summary text.</details>

Typography

Typography styles are still evolving and are located separately.