Blank Page | Testing - Block and Patterns

General Information

Page title should be in the blue bar just above this text, it reads “Blank Page”. It can accommodate pages with very long titles.

Please follow proper heading structures starting with H2s. For example do not jump from a H2 to a H4. Do not use headings based on their styles.

CSS

There are two primary CSS files that make up our pages style-critical.css and style-non-critical.css. You may ignore all other css on this page as those are added by WordPress plugins.

Style-critical.css is inlined into the HTML in a header style tag to improve performance.
Style-non-critical.css is also included in the header but set in a way where it will only be computed once the page has loaded, preventing rendering slowdowns. See the following:

<link rel="preload" href="https://www.monmouth.edu/wp-content/themes/mu-2022/dist/styles/style-non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

JavaScript

The primary JS file is included at the end of the body as seen here:

<script defer src='https://www.monmouth.edu/wp-content/themes/mu-2022/dist/scripts/script.js' id='mu2022-js'></script>
<script id='mu2022-js-after'>
window.scriptLoader = function(s, cb, id) {
	let n = document.createElement('script');
	n.id = id;
	n.readyState ? n.onreadystatechange = function() {
		'loaded' !== n.readyState && 'complete' !== n.readyState || (n.onreadystatechange = null, cb())
	} : n.onload = cb, n.src = s;
	let o = document.getElementsByTagName('script')[0];
	o.parentNode.insertBefore(n, o)
}
</script>

On this page you may see other script tags but they can be ignored as they are added by WordPress plugins and such.

Layouts

We have two primary layouts for this design and a minor sub styling. The layout you see on this page is what should be used.

We do also have a Hero Masthead style, and a variation on this page where we expand the content width to occupy space under the left menu on a desktop. Do not use either of these styles.

Breadcrumbs

Breadcrumbs are optional. If your system can not generate breadcrumbs in the markup we have provided then remove the <nav> with the breadcrumbs class.

HTML Tags & Styles

See our HTML Tags page for an example of what most HTML tags will look like with our styles.
If needed we also have styles related to items you might need such as Buttons and Related Links.

Menus

Note: this page is specifically excluded from the menu.

The left menu is duplicated in two locations in the HTML. Please look for the class supernav to find these locations in the HTML. One is used for desktop, one is for mobile. The menu does not include the full menu tree in the HTML, only items that are relative to the active menu item, see Menu Structure for an example.

Please match the HTML markup as you see it. With the exception that you can ignore the data attributes on each HTML item.
There is some JavaScript running the menu that will request a JSON file. As long as you don’t have any data attributes on the menu items the menu should work fine as long as each menu item have a proper URL for each link and is not a placeholder such as href='#'.
There should be a back link when the homepage is no longer the visible parent menu item. See these pages as an example: Buttons, Data Points

Menu Structure

Menu items are A tags unless they are the active menu item, in this case they are a P tag with a class of current-page.

The rules for how to display the menu boils down to

If the current item has children, show it as the “parent” with its direct descendants.
If the current item does not have children, show its siblings and its parent as the “parent”.

Example Menu

Home Page
- c1
- c2
  - gc1
  - gc2
  - gc3
    - ggc1
    - ggc2
    - ggc3
      - gggc1
      - gggc2
      - gggc3
      - gggc4
    - ggc4
    - ggc5
  - gc4
- c3
- c4
- c5

Example 1

Active page is the Home Page (bold), show the Home Page as the “parent”, with all of it”s immediate children nested beneath. As it is the “parent” it should have a class of parent.

Home Page (.parent.current-page)
    c1 (.child)
    c2 (.child.has-child)
    c3 (.child)
    c4 (.child)
    c5 (.child)

Example 2

c1 is the active item (bold), show c1’s siblings, with Home Page as the “parent”.

Home Page (.parent)
    c1 (.child.current-page)
    c2 (.child.has-child)
    c3 (.child)
    c4 (.child)
    c5 (.child)

Example 3

If on c2, show c2 as the “parent”, with gc1, gc2, gc3, and gc4 as child siblings. Include a link called “back” that will go to the homepage before c2, it should have a class of back.

< back (.back a=home page)
c2(.parent.current-page)
    gc1 (.child)
    gc2 (.child)
    gc3 (.child.has-child)
    gc4 (.child)

Example 4

If on gc1, gc2, or gc4, show all of that item’s siblings, with c2 as the “parent”. Link “back” to the Home Page.

< back (.back a=home page)
c2 (.parent.has-child)
    gc1 (.child.current-page)
    gc2 (.child)
    gc3 (.child.has-child)
    gc4 (.child)

Example 5

If on gc3, show gc3 as the “parent”, with ggc1-ggc5 as child siblings. Link “back” to c2.

< back (.back a=c2)
gc3 (.parent.has-child.current-page)
    ggc1 (.child)
    ggc2 (.child)
    ggc3 (.child.has-child)
    ggc4 (.child)
    ggc5 (.child)

Example 6

If on ggc1, ggc2, ggc4, or ggc5, show that item’s siblings, with gc3 as the “parent”. Link “back” to c2.

< back (.back a=c2)
gc3 (.parent.has-child)
    ggc1 (.child.current-page)
    ggc2 (.child)
    ggc3 (.child.has-child)
    ggc4 (.child)

Example 7

If on ggc3, show ggc3 as the “parent”, with gggc1-gggc5 as child siblings. Link “back” to gc3.

< back (.back a=gc3)
ggc3 (.parent.has-child.current-page)
    gggc1 (.child)
    gggc2 (.child)
    gggc3 (.child)
    gggc4 (.child)