<commit_before><article id="tables">
  <header>
    <h2 class="font-xl">Tables</h2>
  </header>
  <p>The @mixin responsive-table() has a variety of options to help build the perfect responsive table for your needs. When the table converts to a mobile-view, you can either display the headers as blocks (default) or inline with the cell value (and change the width of the header). You can also choose to hide the first row header and convert the cell value to header styles (default) or show the header.</p>
  <div class="explainer-text">
  <header>
    <h3 class="font-m">For optimal use, you may need to include the following attributes in your table HTML:</h3>
  </header>
    <ul class="carat">
      <li>.highlight: Add to &lt;th&gt; or &lt;td&gt; to highlight a row or cell value</li>
      <li>data-title="Header Name":  Add to &lt;td&gt; to designate the "Header Name" text that will appear on mobile views.</li>
      <li>class="table-prose": Add to &lt;th&gt; or &lt;td&gt; to ensure text aligns left</li>
      <li>class="table-number": Add to &lt;th&gt; or &lt;td&gt; to ensure numbers align right</li>
    </ul>
  </div>
  <p>We've included four classes with the primary table settings, which you can preview below. Here's a more thorough description of the @mixin's variables and default settings:</p>
  <div class="explainer-text">
  <header>
    <h3 class="font-base"><span class="paragraph-header">$bp-table:</span> Breakpoint to switch to mobile styles</h3>
  </header>
  <ul class="carat">
    <li>Accepts = media query</li>
    <li>Default value = $default-mobile</li>
  </ul>
  <header>
    <h3 class="font-base"><span class="paragraph-header">$hide-first-th:</span> Hides data-title/header info for the first &lt;td&gt; and converts cell value to header styles</h3>
  </header>
  <ul class="carat">
    <li>Accepts = Boolean</li>
    <li>Default = True</li>
  </ul>
  <header>
    <h3 class="font-base"><span class="paragraph-header">$mobile-header-type:</span> Display data-titles inline-block or block</h3>
  </header>
  <ul class="carat">
    <li>Accepts = inline-block or block</li>
    <li>Default = block</li>
  </ul>
  <header>
    <h3 class="font-base"><span class="paragraph-header">$mobile-header-width:</span> For inline-block data-titles, you can change the width of the header</h3>
  </header>
  <ul class="carat">
    <li>Accepts = Number/Percent for width attribute</li>
    <li>Default = 30%</li>
  </ul>
  </div>
  <article class="table-example">
    <header>
      <h3 class="font-l">.reponsive</h3>
    </header>
    <table class="responsive">
      <thead>
        <tr><commit_msg>Responsive typo<commit_after><article id="tables">
  <header>
    <h2 class="font-xl">Tables</h2>
  </header>
  <p>The @mixin responsive-table() has a variety of options to help build the perfect responsive table for your needs. When the table converts to a mobile-view, you can either display the headers as blocks (default) or inline with the cell value (and change the width of the header). You can also choose to hide the first row header and convert the cell value to header styles (default) or show the header.</p>
  <div class="explainer-text">
  <header>
    <h3 class="font-m">For optimal use, you may need to include the following attributes in your table HTML:</h3>
  </header>
    <ul class="carat">
      <li>.highlight: Add to &lt;th&gt; or &lt;td&gt; to highlight a row or cell value</li>
      <li>data-title="Header Name":  Add to &lt;td&gt; to designate the "Header Name" text that will appear on mobile views.</li>
      <li>class="table-prose": Add to &lt;th&gt; or &lt;td&gt; to ensure text aligns left</li>
      <li>class="table-number": Add to &lt;th&gt; or &lt;td&gt; to ensure numbers align right</li>
    </ul>
  </div>
  <p>We've included four classes with the primary table settings, which you can preview below. Here's a more thorough description of the @mixin's variables and default settings:</p>
  <div class="explainer-text">
  <header>
    <h3 class="font-base"><span class="paragraph-header">$bp-table:</span> Breakpoint to switch to mobile styles</h3>
  </header>
  <ul class="carat">
    <li>Accepts = media query</li>
    <li>Default value = $default-mobile</li>
  </ul>
  <header>
    <h3 class="font-base"><span class="paragraph-header">$hide-first-th:</span> Hides data-title/header info for the first &lt;td&gt; and converts cell value to header styles</h3>
  </header>
  <ul class="carat">
    <li>Accepts = Boolean</li>
    <li>Default = True</li>
  </ul>
  <header>
    <h3 class="font-base"><span class="paragraph-header">$mobile-header-type:</span> Display data-titles inline-block or block</h3>
  </header>
  <ul class="carat">
    <li>Accepts = inline-block or block</li>
    <li>Default = block</li>
  </ul>
  <header>
    <h3 class="font-base"><span class="paragraph-header">$mobile-header-width:</span> For inline-block data-titles, you can change the width of the header</h3>
  </header>
  <ul class="carat">
    <li>Accepts = Number/Percent for width attribute</li>
    <li>Default = 30%</li>
  </ul>
  </div>
  <article class="table-example">
    <header>
      <h3 class="font-l">.responsive</h3>
    </header>
    <table class="responsive">
      <thead>
        <tr>
{'fraction_non_alphanumeric': 0.15132456641890604, 'fraction_numerical': 0.006098723079855155, 'mean_word_length': 3.8058608058608057, 'pattern_counts': {'":': 6, '<': 169, '<?xml version=': 0, '>': 169, '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': '1191852', 'n_tokens_mistral': 1725, 'n_tokens_neox': 1697, 'n_words': 564}