<commit_before><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>
      Clearfix / Layout / Docs / TACHYONS
    </title>
    <meta name="author" content="@mrmrs">
    <meta name="description" content="CSS">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/tachyons.css">
  </head>
  <body class="w-100 sans-serif">
    <header class="bg-dark-gray white pbl">
      <div class="bb b--mid-gray phm phl-ns pvl">
        <h1 class="f4 ttu mtn heavy tracked"><a class="white link dim" href="/">Tachyons</a></h1>
        <h2 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/">Docs</a></h2>
        <span class="thin white-40">/</span>
        <h3 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/#layout">Layout</a></h3>
        <span class="thin white-40">/</span>
        <h4 class="f4 mvn semibold dib">Clearfix</h4>
        <div class="mtl">
          <dl class="white-60 prm light dib mrm">
            <dt class="db">Version</dt>
            <dd class="f2 f1-ns b db pln mln"><%= moduleVersion %></dd>
          </dl>
          <dl class="white-60 light dib mrm">
            <dt class="db">Filesize</dt>
            <dd class="f2 f1-ns b db pln mln"><%= moduleSize %></dd>
          </dl>
          <div class="cf">
            <dl class="white-60 dib mrm mtn">
              <dt class="db">Declarations </dt>
              <dd class="db pln mln f2 f1-ns b"><%= moduleObj.declarations.total %></span></dd>
            </dl>
            <dl class="white-60 dib mrm">
              <dt class="db prs">Selectors </dt>
              <dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.total %></dd>
            </dl>
            <dl class="white-60 dib mrm">
              <dt class="db prs">Max. Specificity Score </dt>
              <dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.specificity.max %></dd>
            </dl>
            <dl class="white-60 dib mrm">
              <dt class="db prs">Size of Avg. Rule </dt>
              <dd class="db pln mln f2 f1-ns b"><%= moduleObj.rules.size.average %></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="phm phl-ns pvm">
        <p class="measure f3 lh-copy">
          When floats are used for layouts - they need a clearfix solution. This helps prevent
          layout problems caused by the elements being removed from the block context of the
          surrounding elements.
        </p>
      </div>
    </header>
    <main class="">
<div class="phm phl-ns ptl pbxl">
  <h2 class="f3 bold">Examples</h2>
  <h3 class="f4">Cleared Floats</h3>
  <p>
    This example shows two floated elements wrapped in an element with a 4px solid red border.
    In the top version where the floats are cleared, the red element wraps around the elements.
    In the second example - the parent element is collapsed and the two floated elements sit outside of it.
    It should be noted you don't have to clear floated elements that are inside another floated element.
  </p>
  <div class="cf" style="outline: 8px solid red;">
    <div class="fl w-50 pvl" style="background: rgba(0,20,120,.6)"></div>
    <div class="fl w-50 pvl" style="background: rgba(0,50,80,.6)"></div>
  </div>
  <h3 class="f4">UnCleared Floats</h3>
  <div style="outline: 8px solid red;">
    <div class="fl w-50 pvl" style="background: rgba(0,20,120,.6)"></div>
    <div class="fl w-50 pvl" style="background: rgba(0,50,80,.6)"></div>
  </div>

  <div class="mtxl cf">
    <div class="dib mrl">
      <h1 class="f4 ttu tracked semibold">Previous</h1>
      <a href="/docs/layout/floats/" class="link semibold blue dim">Floats</a>
    </div>
    <div class="dib">
      <h1 class="f4 ttu tracked semibold">Next</h1>
      <a href="/docs/layout/display/" class="link semibold blue dim">Display</a>
    </div>
  </div>
  <div class="mtxl">
    <h1 class="f4 ttu tracked semibold">Reference</h1>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clears" class="link semibold blue dim">MDN - Clears</a>
  </div>
</div>
      <section class="bg-dark-gray white ptl pbxl">
<header class="phm phl-ns ptl">
        <kbd class="yellow">src/_clearfix.css</kbd>
</header>
<pre class="phm phl-ns">
<code class="small">
<%= srcCSS  %>
</code>
</pre>
      </section>
      <%= navDocs %>
    </main>
<commit_msg>Add site footer to templates.<commit_after><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>
      Clearfix / Layout / Docs / TACHYONS
    </title>
    <meta name="author" content="@mrmrs">
    <meta name="description" content="CSS">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/tachyons.css">
  </head>
  <body class="w-100 sans-serif">
    <header class="bg-dark-gray white pbl">
      <div class="bb b--mid-gray phm phl-ns pvl">
        <h1 class="f4 ttu mtn heavy tracked"><a class="white link dim" href="/">Tachyons</a></h1>
        <h2 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/">Docs</a></h2>
        <span class="thin white-40">/</span>
        <h3 class="f4 mvn semibold dib prxs"><a class="lightest-blue link dim" href="/docs/#layout">Layout</a></h3>
        <span class="thin white-40">/</span>
        <h4 class="f4 mvn semibold dib">Clearfix</h4>
        <div class="mtl">
          <dl class="white-60 prm light dib mrm">
            <dt class="db">Version</dt>
            <dd class="f2 f1-ns b db pln mln"><%= moduleVersion %></dd>
          </dl>
          <dl class="white-60 light dib mrm">
            <dt class="db">Filesize</dt>
            <dd class="f2 f1-ns b db pln mln"><%= moduleSize %></dd>
          </dl>
          <div class="cf">
            <dl class="white-60 dib mrm mtn">
              <dt class="db">Declarations </dt>
              <dd class="db pln mln f2 f1-ns b"><%= moduleObj.declarations.total %></span></dd>
            </dl>
            <dl class="white-60 dib mrm">
              <dt class="db prs">Selectors </dt>
              <dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.total %></dd>
            </dl>
            <dl class="white-60 dib mrm">
              <dt class="db prs">Max. Specificity Score </dt>
              <dd class="db pln mln f2 f1-ns b"><%= moduleObj.selectors.specificity.max %></dd>
            </dl>
            <dl class="white-60 dib mrm">
              <dt class="db prs">Size of Avg. Rule </dt>
              <dd class="db pln mln f2 f1-ns b"><%= moduleObj.rules.size.average %></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="phm phl-ns pvm">
        <p class="measure f3 lh-copy">
          When floats are used for layouts - they need a clearfix solution. This helps prevent
          layout problems caused by the elements being removed from the block context of the
          surrounding elements.
        </p>
      </div>
    </header>
    <main class="">
<div class="phm phl-ns ptl pbxl">
  <h2 class="f3 bold">Examples</h2>
  <h3 class="f4">Cleared Floats</h3>
  <p>
    This example shows two floated elements wrapped in an element with a 4px solid red border.
    In the top version where the floats are cleared, the red element wraps around the elements.
    In the second example - the parent element is collapsed and the two floated elements sit outside of it.
    It should be noted you don't have to clear floated elements that are inside another floated element.
  </p>
  <div class="cf" style="outline: 8px solid red;">
    <div class="fl w-50 pvl" style="background: rgba(0,20,120,.6)"></div>
    <div class="fl w-50 pvl" style="background: rgba(0,50,80,.6)"></div>
  </div>
  <h3 class="f4">UnCleared Floats</h3>
  <div style="outline: 8px solid red;">
    <div class="fl w-50 pvl" style="background: rgba(0,20,120,.6)"></div>
    <div class="fl w-50 pvl" style="background: rgba(0,50,80,.6)"></div>
  </div>

  <div class="mtxl cf">
    <div class="dib mrl">
      <h1 class="f4 ttu tracked semibold">Previous</h1>
      <a href="/docs/layout/floats/" class="link semibold blue dim">Floats</a>
    </div>
    <div class="dib">
      <h1 class="f4 ttu tracked semibold">Next</h1>
      <a href="/docs/layout/display/" class="link semibold blue dim">Display</a>
    </div>
  </div>
  <div class="mtxl">
    <h1 class="f4 ttu tracked semibold">Reference</h1>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clears" class="link semibold blue dim">MDN - Clears</a>
  </div>
</div>
      <section class="bg-dark-gray white ptl pbxl">
<header class="phm phl-ns ptl">
        <kbd class="yellow">src/_clearfix.css</kbd>
</header>
<pre class="phm phl-ns">
<code class="small">
<%= srcCSS  %>
</code>
</pre>
      </section>
      <%= navDocs %>
    </main>
      <%= siteFooter %>

{'fraction_non_alphanumeric': 0.16936736958934517, 'fraction_numerical': 0.02241953385127636, 'mean_word_length': 2.571541815299247, 'pattern_counts': {'":': 0, '<': 288, '<?xml version=': 0, '>': 288, 'https://': 2, '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': '109255', 'n_tokens_mistral': 3266, 'n_tokens_neox': 3086, 'n_words': 881}