---
title: Shuffle layout
tags: [special_layouts]
last_updated: November 30, 2015
keywords: shuffle, card layout, dynamic grid, doc portal, support portal
summary: "This layout shows an example of a knowledge-base style navigation system, where there is no hierarchy, just groups of pages that have certain tags."
permalink: mydoc_shuffle.html
sidebar: mydoc_sidebar
folder: mydoc
---



{% if site.output == "pdf" %}
{{site.data.alerts.note}} The content on this page doesn't display well on PDF, but I included it anyway so you could see the problems this layout poses if you're including it in PDF.  {{site.data.alerts.end}}
{% endif %}

{% unless site.output == "pdf" %}
<script src="js/jquery.shuffle.min.js"></script>
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
{% endunless %}

      <div class="filter-options">
      <button class="btn btn-primary" data-group="all">All</button>
      <button class="btn btn-primary" data-group="getting_started">Getting Started</button>
      <button class="btn btn-primary" data-group="formatting">Formatting</button>
      <button class="btn btn-primary" data-group="publishing">Publishing</button>
      <button class="btn btn-primary" data-group="content-types">Content types</button>
          <button class="btn btn-primary" data-group="single_sourcing">Single Sourcing</button>
      <button class="btn btn-primary" data-group="special_layouts">Special Layouts</button>
    </div>      

<div id="grid" class="row">


    <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["getting_started"]'>

               <div class="panel panel-default">
               <div class="panel-heading">Getting started</div>
               <div class="panel-body">
                  If you're getting started with Jekyll, see the links in this section. It will take you from the beginning level to comfortable. 
                  <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "getting_started" %}
                  <li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %} 
                  </ul>
               </div>
            </div>
    
    </div>
   

    <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["content-types"]'>

        <div class="panel panel-default">
            <div class="panel-heading">Content types</div>
            <div class="panel-body">
                This section lists different content types and how to work with them.
                <ul>
                    {% for page in site.pages %}
                    {% for tag in page.tags %}
                    {% if tag == "content-types" %}
                    <li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
                    {% endif %}
                    {% endfor %}
                    {% endfor %}
                </ul>
            </div>
        </div>
        
    </div>



    <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["formatting"]'>

                <div class="panel panel-default">
               <div class="panel-heading">Formatting</div>
               <div class="panel-body">
                  These topics get into formatting syntax, such as images and tables, that you'll use on each of your pages: 
                  <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "formatting" %}
                  <li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %}
                  </ul>
               </div>
            </div>

    </div>

    <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["single_sourcing"]'>
         
      <div class="panel panel-default">
               <div class="panel-heading">Single Sourcing</div>
               <div class="panel-body">These topics cover strategies for single_sourcing. Single sourcing refers to strategies for re-using the same source in different outputs for different audiences or purposes.
               <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "single_sourcing" %}
                  <li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %} 
               </ul>
            </div>
         </div>

    </div>

       <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["publishing"]'>

           <div class="panel panel-default">
               <div class="panel-heading">Publishing</div>
               <div class="panel-body">When you're building, publishing, and deploying your Jekyll site, you might find these topics helpful.
                   <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "publishing" %}
                  <li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %}
                   </ul>
               </div>
            </div>

    </div>

        <div class="col-xs-6 col-sm-4 col-md-4" data-groups='["special_layouts"]'>

             <div class="panel panel-default">
               <div class="panel-heading">Special Layouts</div>
               <div class="panel-body">
                  These pages highlight special layouts outside of the conventional page and TOC hierarchy.
                  <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "special_layouts" %}
                     <li><a href="{{page.url | remove: '/'}}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %} 
                  </ul>
               </div>
            </div>

    </div>
          <!-- sizer -->
      <div class="col-xs-6 col-sm-4 col-md-1 shuffle_sizer"></div>          


    </div><!-- /#grid -->

{% unless site.output == "pdf" %}
{% include initialize_shuffle.html %}
{% endunless %}

{{site.data.alerts.note}} This was mostly an experiment to see if I could break away from the hierarchical TOC and provide a different way of arranging the content. However, this layout is somewhat problematic because it doesn't allow you to browse other navigation options on the side while viewing a topic.{{site.data.alerts.end}}