guides.html

---
layout: default
title: Guides
id: guides
permalink: /guides/
---

<div class="hero hero--blue">
  <div class="wrapper">
    <div class="hero__content" data-animate-in="fade" data-animate-in-delay="110">
      <h1 class="h1 mb-3">Guides</h1>
      <p class="p-lg">Guides discuss major topics at the intersection of MERL and open source, data science, or human-centered design.</p>
    </div>
  </div>

  <figure class="hero__pattern" data-animate-in="fade" data-animate-in-delay="150">
    <img width="718" height="490" src="{{ '/assets/img/direction/merl-pattern-blue.svg' | relative_url }}" alt="pattern" />
  </figure>
</div>



<div class="wrapper my-6">

  <hr class="hr-thin" />

  <h2 class="h6 mt-4 mb-5">Explore our work</h2>

  <div class="btn btn--outline btn--static js-filter-toggle d-lg-none col-12 mb-4">
    <span>Filters</span>
    {% octicon filter height:16 %}
  </div>

  <div class="filters">
    <div class="filters__inner">
      <div class="filter">
        <div class="d-flex mb-3">
          <p>MERL Technology Workflow:</p>
          <div class="tooltip-wrap">
            {% octicon info height:16 %}
            <div class="tooltip">
              <p>Read more about these categories  <a href="https://merlcenter.org/guides/open-source-merl-workflows">in this post</a>. Selecting multiple checkboxes will return content that fits into at least one of the selections.</p>
            </div>
          </div>
        </div>

        <div class="checkboxes" id="workflow-filters">
          {% for tag in site.data.tags %}
          <div class="checkbox">
            <input id="{{ tag.tag | slugify }}" name="{{ tag.tag | slugify }}" value="{{ tag.tag | slugify }}" type="checkbox" />
            <label for="{{ tag.tag | slugify }}">{{ tag.tag }}</label>
          </div>
          {% endfor %}
        </div>
      </div>
      <a class="reset-desk js-reset-filters" href="">Reset Filters</a>
      <div class="filter__close js-filter-toggle">{% octicon x height:16 %}</div>
    </div>
    <div class="screen js-filter-toggle"></div>
  </div>

  <hr />

  <ul class="post-preview-list js-filtered-list">
    {% for post in site.guides reversed %}
    <li>
      {% include post-preview.html %}
    </li>
    {% endfor %}
  </ul>
</div>