Responsive Medium.com Inspired Gallery & Layout In Vanilla JavaScript

Preview:

Description:

This is a fully responsive, user-friendly, navigatable gallery & layout inspired by Medium.com. Built on top of HTML, CSS/CSS3 and vanilla JavaScript.

How to use it:

Load the necessary stylesheet ‘style.css’ and JavaScript ‘main.js’ in the html file.

<link rel="stylesheet" href="/css/style.css">
<script src="js/main.js"></script>

Create the html for the medium gallery.

<section class="section for-you grid-section">
  <header class="section-header">
    <div class="section-header--title">
      <h4>For you</h4>
    </div>
    <div class="section-header--action"> <a href="#" id="slide-left"> <img src="/img/for-you/back.png" alt="Back"> </a> <a href="#" id="slide-right"> <img src="/img/for-you/next.png" alt="Next"> </a> </div>
  </header>
  <div class="separator"> <span></span> </div>
  <div class="grid-wrapper">
    <div class="grid" id="grid">
      <div class="grid-column">
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/1.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/2.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-column">
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/3.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/4.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-column">
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/3.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/4.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-column">
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/5.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/6.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-column">
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/7.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="grid--item">
          <div class="grid--item-image"> <span data-image-url="/img/for-you/8.jpg"></span> </div>
          <div class="grid--item-content">
            <div class="grid--item-content-top">
              <div class="grid--item-content-title"> Why should you care about Progressive Web Apps(PWAs) </div>
              <div class="grid--item-content-body"> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Mollitia perferendis ab laboriosam facilis unde praesentium
                molestiae error accusamus ea, ullam sint sunt necessitatibus
                repellat odio, dicta enim minima saepe possimus? </div>
            </div>
            <div class="grid--item-content-bottom">
              <div class="grid--item-content-author"> <img src="/img/for-you/author.jpg" alt="Author">
                <div class="details">
                  <div class="name">Arfat Salman</div>
                  <div class="meta"> <span class="date">Feb 21</span> <span class="read-time">6 min read</span> </div>
                </div>
              </div>
              <div class="grid--item-content-action" id="share-wrapper"> <a class="share" href="#" id="share"> <img src="/img/for-you/share.png" alt="Share" /> </a>
                <div class="share-options">
                  <ul>
                    <li> <a href="#">Facebook</a> </li>
                    <li> <a href="#">Twitter</a> </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Initialize the medium gallery with settings.

new Section(document.querySelector('.for-you'), {
    // how many items per column
    columnPerPage: 2,
    // how many items per column on small screen
    smallColumnPerPage: 1,
    // max body length
    maxBodyLength: 250,
    // right margin in pixels
    marginRight: 20,
    // right margin on small screen
    marginSmallRight: 0
    
})