<commit_before><!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plone Mockup(s)</title>
  <link href="jam/SyntaxHighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
  <link href="less/shThemeGitHub.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet/less" type="text/css" href="less/mockup.less" />
  <script src="jam/less/dist/less-1.3.3.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/XRegExp.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/shCore.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/shBrushBash.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/shBrushXml.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
</head>

<body>

  <header>
    <div class="container">
      <div id="portal-logo">
        <span class="plone-logo">
          <span class="plone-logo-circle">
            <span class="plone-circle-inner">
              <span class="plone-dot-1"></span>
              <span class="plone-dot-2"></span>
              <span class="plone-dot-3"></span>
            </span>
          </span>
          <span class="plone-text">Plone</span>
        </span>
        Mockup(s)
      </div>
    </div>
  </header>

  <div class="container">
    <div id="content" data-panel="content">
      <h1>Plone mockup</h1>
      <p>
        Plone Mockup is an attempt to separate
        <a href="http://plone.org" title="Plone">Plone</a>, the user interface,
        from Plone, the server.
        It leverages <a href="#patterns" title="Patterns">Patterns</a>
        to create a library of rich interaction patterns
        triggered by CSS classes
        and configured via HTML5 <em>data attributes</em>.
      </p>
      <p>
        The mockup is a fully functional prototype of Plone and its bundles.
        As it is realised entirely in HTML5 and Javascript,
        it can be run in a browser
        without the need for a full Plone installation;
        therefore making it easy to showcase Plone's UI
        or developing a new theme.
        Using <a href="http://diazo.org/" title="Diazo">diazo</a>
        it is possible to integrate other backends alongside
        (or instead of)
        Plone.
      </p>

      <div class="row">
        <div class="span8">
          <h2>See it in action!</h2>
          <p>
            Here are all the interactions we have,
            listed in alphabetical order:
          </p>

          <div class="row">
            <div class="span4">
              <h2><a href="patterns.html#autotoc">AutoToc</a></h2>
              <p>
                Generates a <abbr title="Table of contents">TOC</abbr>
                by parsing the HTML of the page and identifying sections
                (via <code>h[123456]</code> tags).
              </p>
              <a href="patterns.html#autotoc"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
            <div class="span4">
              <h2><a href="patterns.html#datetime">DateTime</a></h2>
              <p>
                Allows the user to select a date (with or without time)
                through a calendar.
              </p>
              <a href="patterns.html#datetime"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
          </div>
          <div class="row">
            <div class="span4">
              <h2><a href="patterns.html#expose">Expose</a></h2>
              <p>
                Exposes the focused element
                by darkening everything else on the page.
                Useful to focus the user attention on a particular area.
              </p>
              <a href="patterns.html#expose"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
            <div class="span4">
              <h2><a href="patterns.html#modal">Modal</a></h2>
              <p>
                Creates a modal dialog (also called <em>overlay</em>).
              </p>
              <a href="patterns.html#modal"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
          </div>
          <div class="row">
            <div class="span4">
              <h2><a href="patterns.html#select2">Select2</a></h2>
              <p>
                An advanced selection widget,
                useful for tags, autocompletes,
                multiple or single selections
                from any kind of data source (with search!).
              </p>
              <a href="patterns.html#select2"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
            <div class="span4">
              <h2><a href="patterns.html#toggle">Toggle</a></h2>
              <p>
                Allows to change some DOM elements attributes
                when a certain event happens (a click by default).
                Useful to implement show/hide toggles,
                dropdown menus, and the like.
              </p>
              <a href="patterns.html#toggle"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
          </div>
          <!-- TODO: This seems to be broken or missing
          <div class="row">
            <div class="span4">
              <h2><a href="patterns.html#backdrop">Backdrop</a></h2>
              <p>Hides content of selected DOM element.</p>
              <a href="patterns.html#backdrop"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
          </div>
          -->
        </div>
        <div class="span4">
          <div class="well">
            <h2>Use it now!</h2>
            <p>
              The only requirements to bootstrap <em>Plone mockup</em>
              are <a href="http://git-scm.org/" title="git">git</a><commit_msg>Removed patterns with no demo from the demo section.<commit_after><!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Plone Mockup(s)</title>
  <link href="jam/SyntaxHighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
  <link href="less/shThemeGitHub.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet/less" type="text/css" href="less/mockup.less" />
  <script src="jam/less/dist/less-1.3.3.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/XRegExp.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/shCore.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/shBrushBash.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/shBrushXml.js"></script>
  <script src="jam/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
</head>

<body>

  <header>
    <div class="container">
      <div id="portal-logo">
        <span class="plone-logo">
          <span class="plone-logo-circle">
            <span class="plone-circle-inner">
              <span class="plone-dot-1"></span>
              <span class="plone-dot-2"></span>
              <span class="plone-dot-3"></span>
            </span>
          </span>
          <span class="plone-text">Plone</span>
        </span>
        Mockup(s)
      </div>
    </div>
  </header>

  <div class="container">
    <div id="content" data-panel="content">
      <h1>Plone mockup</h1>
      <p>
        Plone Mockup is an attempt to separate
        <a href="http://plone.org" title="Plone">Plone</a>, the user interface,
        from Plone, the server.
        It leverages <a href="#patterns" title="Patterns">Patterns</a>
        to create a library of rich interaction patterns
        triggered by CSS classes
        and configured via HTML5 <em>data attributes</em>.
      </p>
      <p>
        The mockup is a fully functional prototype of Plone and its bundles.
        As it is realised entirely in HTML5 and Javascript,
        it can be run in a browser
        without the need for a full Plone installation;
        therefore making it easy to showcase Plone's UI
        or developing a new theme.
        Using <a href="http://diazo.org/" title="Diazo">diazo</a>
        it is possible to integrate other backends alongside
        (or instead of)
        Plone.
      </p>

      <div class="row">
        <div class="span8">
          <h2>See it in action!</h2>
          <p>
            Here are all the interactions we have,
            listed in alphabetical order:
          </p>

          <div class="row">
            <div class="span4">
              <h2><a href="patterns.html#autotoc">AutoToc</a></h2>
              <p>
                Generates a <abbr title="Table of contents">TOC</abbr>
                by parsing the HTML of the page and identifying sections
                (via <code>h[123456]</code> tags).
              </p>
              <a href="patterns.html#autotoc"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
            <div class="span4">
              <h2><a href="patterns.html#datetime">DateTime</a></h2>
              <p>
                Allows the user to select a date (with or without time)
                through a calendar.
              </p>
              <a href="patterns.html#datetime"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
          </div>
          <div class="row">
            <div class="span4">
              <h2><a href="patterns.html#expose">Expose</a></h2>
              <p>
                Exposes the focused element
                by darkening everything else on the page.
                Useful to focus the user attention on a particular area.
              </p>
              <a href="patterns.html#expose"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
            <div class="span4">
              <h2><a href="patterns.html#modal">Modal</a></h2>
              <p>
                Creates a modal dialog (also called <em>overlay</em>).
              </p>
              <a href="patterns.html#modal"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
          </div>
          <div class="row">
            <div class="span4">
              <h2><a href="patterns.html#select2">Select2</a></h2>
              <p>
                An advanced selection widget,
                useful for tags, autocompletes,
                multiple or single selections
                from any kind of data source (with search!).
              </p>
              <a href="patterns.html#select2"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
            <!-- TODO: This seems to be missing from the patterns page
            <div class="span4">
              <h2><a href="patterns.html#toggle">Toggle</a></h2>
              <p>
                Allows to change some DOM elements attributes
                when a certain event happens (a click by default).
                Useful to implement show/hide toggles,
                dropdown menus, and the like.
              </p>
              <a href="patterns.html#toggle"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
            -->
          </div>
          <!-- TODO: This seems to be missing from the patterns page
          <div class="row">
            <div class="span4">
              <h2><a href="patterns.html#backdrop">Backdrop</a></h2>
              <p>Hides content of selected DOM element.</p>
              <a href="patterns.html#backdrop"
                 class="btn btn-primary pull-right">Demo</a>
            </div>
          </div>
          -->
        </div>
        <div class="span4">
          <div class="well">
            <h2>Use it now!</h2>
            <p>
              The only requirements to bootstrap <em>Plone mockup</em>
              are <a href="http://git-scm.org/" title="git">git</a>
{'fraction_non_alphanumeric': 0.14476296355117924, 'fraction_numerical': 0.009529103470181847, 'mean_word_length': 1.7654808959156785, 'pattern_counts': {'":': 0, '<': 354, '<?xml version=': 0, '>': 352, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5466095', 'n_tokens_mistral': 3838, 'n_tokens_neox': 3697, 'n_words': 959}