---
title: Shuffle layout
tags: special-layouts
type: noTags
keywords:
summary:
---
{% include linkrefs.html %}

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.

{% if site.print == true %}
{{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.  {{end}}
{% endif %}

{% unless site.print == true %}
<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="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-danger">
               <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}}">{{page.title}}</a></li>
                {% endif %}
                {% endfor %}
                {% endfor %} 
                  </ul>
               </div>
            </div>
    
    </div>
   

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



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

                <div class="panel panel-danger">
               <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>
                    <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "formatting" %}
                  <li><a href="{{page.url}}">{{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:
               <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "single-sourcing" %}
                  <li><a href="{{page.url}}">{{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-primary">
               <div class="panel-heading">Publishing</div>
               <div class="panel-body">
                   <ul>
                {% for page in site.pages %}
                {% for tag in page.tags %}
                {% if tag == "publishing" %}
                  <li><a href="{{page.url}}">{{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-warning">
               <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}}">{{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.print == true %}
{% include initialize_shuffle.html %}
{% endunless %}

{{note}} This was mostly an experiment to see if there was a better way to document a long JSON code example. I haven't actually used this approach in my own documentation.{{end}}