Say It With a List

In modern web design lists are used to group related pieces of information so they are clearly associated with each other and easy to read. Lists are considered workhorse elements as they are frequently used for navigation as well as general content.

In composition, a list is a series of images, details, or facts and may be referred to as a catalog or an inventory. Lists are often used in works of fiction and creative nonfiction to evoke a sense of place or character and are commonly used in business and technical writing to convey factual information succinctly.

 

In modern web design lists are used to group related pieces of information so they are clearly associated with each other which make them easy to read. Lists are considered workhorse elements in HTML as they are frequently used for navigation as well as general content. Their style can be enhanced by applying CSS and semantically correct lists help visitors read content.

 

List Types

There are three common list styles in HTML:

Unordered List
Used to group a set of related items in no particular order and may be created from the editor menu toolbar.
Ordered List
Used to group a set of related items in a specific order and may be created from the editor menu toolbar.
Description List
Used to display one or more terms with associated descriptions and are created using a template.
Custom List
One of the above lists customized in some manner.

 

Walk-through

1. Unordered List

Example:
Organize Exercise Room
  • Equipment
    • Fan
      • Donate
        • Goodwill
          • Frankford Street Location
    • Yoga & sit-up mats
      • Clean
    • Weights and push-up bars
      • Repair
  • Supplies

In the above example what is important is the hierarchy. Whether the equipment or the supplies are organized first is not important.

 

Following a create first style last approach, create your unordered list as a single column of entries and then highlight and press the unordered list toolbar button. To indent a list item, place the cursor at the beginning of the item and press the “tab” key. To un-indent, do the same as indent except use the “shift-tab” key combo. Apply styling as desired.

 

2. Ordered List

Example:
Patient Appointment Procedure
  1. Observation
  2. Awareness
  3. Examination
    1. Turn observations into questions
      1. Where are the pain points
        1. What is the pain level
          1. 1 = slight
          2. 10 = severe
        2. Duration
      2. How does it limit you
      3. What is the problem that needs solving
    2. Wrap up questions
      1. What else
      2. Tell me more
        1. Repeat as required
  4. Notes

In the above example order is important. The medical practitioner must observe the patient and become aware of the symptoms before beginning the examination.

 

In the event the list counter needs to start at a number other than 1, add (style=”–start:×”) where “×” is the starting number to the “ol” tag.

 

For example to start the list at the number five would look as follows:

<ol style="--start:5;">

 

Following the same approach as above, create your ordered list as a single column of entries and then highlight and press the ordered list toolbar button. To indent a list item, place the cursor at the beginning of the item and press the “tab” key. To un-indent, do the same as indent except use the “shift-tab” key combo. Apply styling as desired.

 

3. Description List

Example:
Blog Post Excerpts
Start Here
The goal of the Xidipity WordPress theme is to blend a tasteful design with an appropriate balance of flexibility and ease of use. Xidipity uses advanced web technologies to ensure …
Font Awesome Icons
The primary reason for using icons is they share a common visual language which effectively bridges language gaps. They’re instantaneously recognizable and remove open interpretation. This makes them perfect for …
Image Slider
In those circumstances where the need arises to present a strong visual experience but a video is too much, a visual slider is the answer. The Xidipity solution is quick …

​ 

This list must be created from the template but once the template is applied, final modifications to style and content may be applied in the editor.

 

The template does not default the description detail to Italic. I did that by highlighting the text and pressing the “Italic” toolbar button.

 

Template

½×

GitHub Gist

template07.html

 

Design Notes

Tags include the following:

  • dl – DL Container
  • dt – DL Title
  • dd – DL Detail

 

The title and detail tags are optional. For example, a list may contain titles and no details, or details and no titles, or a mix of both. It’s a little crazy, but it opens the door to some really creative design solutions.

 

Where as the ordered and unordered lists will allow the addition or subtraction of items on the fly, the description list does not. It is recommended the title and description elements be identified first so that the template can be edited to reflect these changes prior to inserting into the content. This can be accomplished in the embed tool or the sandbox editor.  Modifications to the content or style may be applied after the template has been embedded.

 

4. Custom List

In the circumstance when the above choices will not meet your needs, there is the font awesome list. Simply stated a font awesome list is an unordered list with the bullets replaced with font awesome icons.

For example:
  • List icons can
  • be used to
  • replace bullets
  • in lists

 

Template

½×

GitHub Gist

template05.html

 

Design Notes

The “fa-ul” class must be added to the <ul> tag to turn off traditional bullets and aid in the formatting of the font awesome icon. Optionally, include the “dbl-spaced” class to add additional spacing to the list items.

 

 Installation

  1. Highlight template and copy to clipboard
  2. Place cursor where list will be inserted
  3. Click the embed ( save_alt ) toolbar button
  4. Paste clipboard into textbox
  5. Add or delete list item lines as needed
    Hint: List items begin with <li>, end with </li> tag
  6. Click OK button
  7. Open Font Awesome in a new window/tab
  8. Search for desired icon
  9. Copy the icon tag to the clipboard
    Hint: Click “<i class=”fas fa-fingerprint”></i>”
  10. Place the cursor between the styling dots (•×•)
  11. Click the embed ( save_alt ) toolbar button
  12. Paste the icon tag into textbox
  13. Optionally, add the spacing code “&#x200B;” between tags
    Hint: “<i class=”fas fa-fingerprint”>&#x200B;</i>”
  14. Click the Ok button
  15. Repeat for each list item
  16. To style the icon
    1. highlight icon & styling dots
    2. apply style (ie. color / size)
  17. Delete styling dots

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *