OVERVIEW
Target audience: Site Administrators, Site Managers, Site Editors
The grid class in the Web Management System (WMS) can be applied to ordered and unordered lists to create grid-type displays.
In this article:
Overview
Note:
This article presumes some familiarity with basic HTML (ol and ul lists), applying CSS styles, and editing Source with the WYSIWYG Editor. To learn more about HTML tags and CSS classes used in the WMS, go to the Basic HTML markup in the WMS IT Knowledge Base article.
There are three kinds of lists (ordered, unordered, and definition) available in the WMS, the grid class applies only to ordered and unordered lists.
| List type | opening tag | closing tag |
|---|---|---|
| Ordered | <ol> | </ol> |
| Unordered | <ul> | </ul> |
| Definition | <dl> | </dl> |
For example, the HTML code for an ordered list with 6 list items would be something like:
<ol>
<li>This is the first list item</li>
<li>This is the second list item</li>
<li>This is the third list item</li>
<li>This is the fourth list item</li>
<li>This is the fifth list item</li>
<li>This is the sixth list item</li>
</ol>
On a WMS page, it would display a numbered list:
If the grid class is applied to the ol tag:
<ol class="grid">
<li>This is the first list item</li>
<li>This is the second list item</li>
<li>This is the third list item</li>
<li>This is the fourth list item</li>
<li>This is the fifth list item</li>
<li>This is the sixth list item</li>
</ol>
It will transform the list into a numbered grid display:
The same can be done with unordered lists:
<ul class="grid">
<li>This is the first list item</li>
<li>This is the second list item</li>
<li>This is the third list item</li>
<li>This is the fourth list item</li>
<li>This is the fifth list item</li>
<li>This is the sixth list item</li>
</ul>
Which would yield a basic grid without numbers.
Additional Classes
Below is a list of classes that can be used in combination with the grid class:
| Class | Purpose | List type | HTML | Example |
|---|---|---|---|---|
| zero | removes borders | ol, ul | <ul class="grid zero"> | Sectional navigation |
| alternate | adds a grey background | ol, ul | <ul class="grid alternate"> | A series of steps in a process |
| enhance | changes the colour of the list number | ol | <ol class="grid enhance"> | Nested lists |
Note:
The classes zero, alternate and enhance can be combined for additional configurations, e.g.:
- <ol class="grid zero enhance">
- <ol class="grid alternate enhance">
Use cases
The following examples demonstrate how grid displays can be used, including a short description and some code snippets:
A series of steps in a process
This example was created using:
- an ordered list
- the grid and alternate classes
- list items containing a single paragraph of text
| HTML code snippet |
|---|
<ol class="grid alternate"> |
A gallery of images
This example was created using:
- an unordered list
- the grid class
- list items containing a line of bold text and a single image
- text and images are aligned to centre
| HTML code snippet |
|---|
<ul class="grid"> |
Content previews
This example was created using:
- an unordered list
- the grid class
- list items containing a single image, a paragraph of text, and a link to content
| HTML code snippet |
|---|
<ul class="grid"> |
Sectional navigation
This example was created using:
- an unordered list
- the grid and zero classes
- list items containing an image and an h4 heading
- text and images are aligned to centre
- text and images are hyperlinked
| HTML code snippet |
|---|
<ul class="grid zero"> |
Grid appearance
Responsive display
Grid displays are responsive, and the size and placement of squares will adapt to certain elements:
Device screen (viewport) or browser window
If a grid is viewed on a smaller device or narrow browser window with a width of 600 pixels or less, the display will change to stacked panels.
Below is an example of how a previous example showing a series of steps in a process would be displayed on a tablet:
The presence of sidebars and/or vertical menus
Three columns will be displayed if:
- There are no other elements on the page
- There is a vertical menu, but there are no blocks in the sidebar
- There are blocks in the sidebar, but there is no vertical menu
Two columns will be displayed if:
- There are blocks in the sidebar, AND there is a vertical menu
Content in list items
List items (which appear as squares) will have the same height across the same row. This means that the height of the square with the longest or most content will be inherited by all the other squares in that row.
Best practices and tips
Use with three or more list items
Use the grid class if there are three or more items in your list, otherwise just use column templates. There can be an exception for lists with two list items that appear on pages with a vertical menu AND a sidebar with blocks.
Use Source view in the WYSIWYG editor
The WYSIWYG editor can be used to create the initial list, as well as for minor formatting tasks such as alignment, or bolding, or italicizing text. However, once the grid class is applied, it is advisable to edit the HTML source.
Nested lists
Just as with normal lists, list items in a grid can contain nested lists.
<ol class="grid enhance">
<li>Download a copy of the request form <a href="https://mcgill.ca/somelink">here</a>.</li>
<li>Inform your direct supervisor that you intend to make a request.</li>
<li>Prepare the following requirements:
<ol>
<li>McGill ID</li>
<li>Record of Employment</li>
<li>Completed request form</li>
<li>Letter of support from supervisor</li>
</ol>
</li>
<li>Schedule an appointment to deliver your request along with the requirements.</li>
</ol>The code above will yield the following grid:
Grids cannot be placed inside list items or sidebar blocks
While lists can be nested within list items, if the grid class were applied, the list would not be displayed.
Similarly, while lists can be placed in sidebar blocks, they would not be displayed if the grid class were applied.
Enter/Return key
Pressing the Enter or Return key when the cursor is inside a list item will create a new list item.
- Use line breaks to create space by either:
- Adding a <br> tag in Source view
- Pressing Shift+Enter in WYSIWYG view
- Go into the Source view to add paragraph tags
Backspace/Delete key
Pressing the Backspace or Delete key when the cursor is inside a list item will delete that list item.
