comments.md

layout	page
title	Comments Pattern
parent	Design Patterns
nav_order	10
redirect_from	/front_end_coding/patterns/comments

Comments Pattern

{: .no_toc }

Comments group together information about the commenter, information about the item the comment refers to, the comment itself, and actions pertaining to the comment.

The comment style is declared in 15-group-comments.css. Comment is part of the group supertype

Table of contents

{: .text-delta } * TOC {:toc}

Rules

An individual comment is always a li contained within an ol. These comment lists, or threads, may be nested. Comments are given the class even or odd.

Quick reference

[...]

always included

{...}

sometimes included

[ol thread]
  [li odd comment group]
    [byline heading] {a} [span datetime] [/heading]
    [div icon] {a} {img} {/a} [/div]
    [blockquote userstuff]
    {p datetime}
    {landmark heading}
    {ul actions}
  [/li]
[/ol]

HTML diagrams

Single comment

1. <li class="odd comment group user-123" id="comment_456">
   1. <h4 class="byline heading">
      1. <a>
      2. <span class="posted datetime">
   2. <div class="icon">
      1. <a>
         1. <img class="icon">
   3. <blockquote class="userstuff">
   4. <p class="edited datetime">
   5. <h5 class="landmark heading">
   6. <ul class="actions">

Threads

To illustrate the HTML for threads, we'll diagram the following example. Each li with the comment class contains the HTML diagramed in the previous section.

1. <ol class="thread">
   1. <li class="odd comment group">
   2. <li class="even comment group">
   3. <li>
      1. <ol class="thread">
         1. <li class="even comment group"...
         2. <li class="odd comment group"...
         3. <li>
            1. <ol class="thread">
               1. <li class="even comment group"...