Elr-scss-comment NPM

Comments

a library of sass mixins

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-comment --save

yarn add elr-scss-comment

Implementation

Scss

@import "elr-scss-comment/src/main";

.comments {
  @include elr-comments;
}

HTML

<div class="comments">
  <div class="comment">
    <div class="comment-content">
      <div class="comment-heading">
        <figure class="comment-avatar">
          <img src="https://placekitten.com/200/200" />
        </figure>
        <div>
          <h3 class="comment-author">Joe</h3>
          <p class="comment-timestamp">10 minutes ago</p>
        </div>
      </div>
      <div class="comment-body">
        <p>This article is so interesting!</p>
        <button class="comment-reply">Reply</button>
      </div>
    </div>
    <div class="comment comment-nested">
      <div class="comment-content">
        <div class="comment-heading">
          <figure class="comment-avatar">
            <img src="https://placekitten.com/300/200" />
          </figure>
          <div>
            <h3 class="comment-author">Kate Brewster</h3>
            <p class="comment-timestamp">Just Now</p>
          </div>
        </div>
        <div class="comment-body">
          <p>Yes! this site always has the best articles.</p>
          <button class="comment-reply">Reply</button>
        </div>
      </div>
    </div>
  </div>
</div>