<commit_before><html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="lib/dist/materialize.min.css" rel="stylesheet">
    <link href="dist/f-layout.min.css" rel="stylesheet">
    <style>
      .page {
          width:90%;
          max-width: 800px;
          margin: 30px auto;
      }

      .f-row span, .f-column span {
        background-color: rgba(0,0,0, 0.1);
      }

      .f-grow {
        background-color: rgba(0,0,0, 0.3) !important;
      }

      .example-container > div {
        background-color: rgba(0,0,0, 0.1);
        height: 60px;
        font-size: 20px;
      }

      .example-container2 > div {
        background-color: rgba(0,0,0, 0.1);
        width: 100px;
        height: 200px;
        font-size: 20px;
      }

      .example-container3 > div {
        border: 1px solid black;
        background-color: white;
        height: 400px;
        font-size: 20px;
      }

      .example-container4 > div {
        background-color: rgba(0,0,0, 0.1);
        height: 200px;
        font-size: 20px;
      }

      .example-container5 > div {
        background-color: rgba(0,0,0, 0.1);
        width: 450px;
        font-size: 20px;
      }

      .example-container3 .f-grow {
        background-color: transparent !important;
      }

    </style>
  </head>
  <body>
    <div class="page">

      <h1>f-layout guide</h1>
      <p>f-layout is an easy to use alternative to grid layouts.
      A family of composable CSS classes designed to quickly enable
      responsive flexbox-based layout on IE 11+, Edge, Chrome, Firefox
      and Safari browsers.</p>
      <p>Using CSS for laying out pages has always been tricky and before CSS3
      was done mainly by misusing CSS features in order to get the job done.
      The idea behind f-layout is use modern CSS (now well supported
      in browsers) to create a small set of easily learned classes
      to enable web designers to build layouts quickly.</p>
      <p>It uses the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox CSS model</a>
      but tries to avoid complexity by surfacing only its most useful features
      and to have sensible defaults to make layout building as simple as possible.
      </p>
      <p>In f-layout, all layout is either in a row or a column or
      a nested combination. Flow is from left to right, top to bottom.
      For element alignment, it follows CSS conventions of using terms like "left", "right", "top" and "bottom".
      It also uses the term "center" to denote horizontal centering as opposed
      to "middle" for vertical centering.</p>
      <p>Elements can be hidden or shown and reordered. All of the features of
      f-layout can be applied responsively so as to deal with different
      device screen widths.</p>
      <p>All classes can be suffixed with s, m or l and these suffixes
      correspond to screen width break points:</p>
      <p>
        <table>
          <tr><td>suffix</td><td>meaning</td><td>break point</td></tr>
          <tr><td>s</td><td>small</td><td>less than 600px</td></tr>
          <tr><td>m</td><td>medium</td><td>601px to 992px</td></tr>
          <tr><td>l</td><td>large</td><td>more than 992px</td></tr>
        </table>
      </p>

      <h3>Row layout</h3>
      <p>Alignment defaults: f-space-between, f-middle</p>

      <h5>Left</h5>
      <div class="example example-container">
        <div class="f-row f-left">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Center</h5>
      <div class="example example-container">
        <div class="f-row">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Right</h5>
      <div class="example example-container">
        <div class="f-row f-right">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Space between (default)</h5>
      <div class="example example-container">
        <div class="f-row f-space-between">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Space around</h5>
      <div class="example example-container">
        <div class="f-row f-space-around">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>




      <h5>Top</h5>
      <div class="example example-container">
        <div class="f-row f-top">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Middle (default)</h5>
      <div class="example example-container">
        <div class="f-row">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Bottom</h5>
      <div class="example example-container">
        <div class="f-row f-bottom">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>

      <h5>Stretch (default)</h5>
      <div class="example example-container">
        <div class="f-row f-stretch">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Baseline</h5>
      <div class="example example-container">
        <div class="f-row f-baseline">
          <span>b</span>
          <span>i</span>
          <span>g</span>
        </div><commit_msg>git pull origin gh-pagesgit pull origin gh-pages<commit_after><html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="lib/dist/materialize.min.css" rel="stylesheet">
    <link href="dist/f-layout.min.css" rel="stylesheet">
    <style>
      .page {
          width:90%;
          max-width: 800px;
          margin: 30px auto;
      }

      .f-row span, .f-column span {
        background-color: rgba(0,0,0, 0.1);
      }

      .f-grow {
        background-color: rgba(0,0,0, 0.3) !important;
      }

      .example-container > div {
        background-color: rgba(0,0,0, 0.1);
        height: 60px;
        font-size: 20px;
      }

      .example-container2 > div {
        background-color: rgba(0,0,0, 0.1);
        width: 100px;
        height: 200px;
        font-size: 20px;
      }

      .example-container3 > div {
        border: 1px solid black;
        background-color: white;
        height: 400px;
        font-size: 20px;
      }

      .example-container4 > div {
        background-color: rgba(0,0,0, 0.1);
        height: 200px;
        font-size: 20px;
      }

      .example-container5 > div {
        background-color: rgba(0,0,0, 0.1);
        width: 450px;
        font-size: 20px;
      }

      .example-container3 .f-grow {
        background-color: transparent !important;
      }

    </style>
  </head>
  <body>
    <div class="page">

      <h1>f-layout guide</h1>
      <p>f-layout is an easy to use alternative to grid layouts.
      A family of composable CSS classes designed to quickly enable
      responsive flexbox-based layout on IE 11+, Edge, Chrome, Firefox
      and Safari browsers.</p>
      <p>Using CSS for laying out pages has always been tricky and before CSS3
      was done mainly by misusing CSS features in order to get the job done.
      The idea behind f-layout is use modern CSS (now well supported
      in browsers) to create a small set of easily learned classes
      to enable web designers to build layouts quickly.</p>
      <p>It uses the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexbox CSS model</a>
      but tries to avoid complexity by surfacing only its most useful features
      and to have sensible defaults to make layout building as simple as possible.
      </p>
      <p>In f-layout, all layout is either in a row or a column or
      a nested combination. Flow is from left to right, top to bottom.
      For element alignment, it follows CSS conventions of using terms like "left", "right", "top" and "bottom".
      It also uses the term "center" to denote horizontal centering as opposed
      to "middle" for vertical centering.</p>
      <p>Elements can be hidden or shown and reordered. All of the features of
      f-layout can be applied responsively so as to deal with different
      device screen widths.</p>
      <p>All classes can be suffixed with s, m or l and these suffixes
      correspond to screen width break points:</p>
      <p>
        <table>
          <tr><td>suffix</td><td>meaning</td><td>break point</td></tr>
          <tr><td>s</td><td>small</td><td>less than 600px</td></tr>
          <tr><td>m</td><td>medium</td><td>601px to 992px</td></tr>
          <tr><td>l</td><td>large</td><td>more than 992px</td></tr>
        </table>
      </p>

      <h3>Row layout</h3>
      <p>Alignment defaults: f-space-between, f-middle</p>

      <h5>Left</h5>
      <div class="example example-container">
        <div class="f-row f-left">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Center</h5>
      <div class="example example-container">
        <div class="f-row">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Right</h5>
      <div class="example example-container">
        <div class="f-row f-right">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Space between (default)</h5>
      <div class="example example-container">
        <div class="f-row f-space-between">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Space around</h5>
      <div class="example example-container">
        <div class="f-row f-space-around">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>




      <h5>Top</h5>
      <div class="example example-container">
        <div class="f-row f-top">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Middle (default)</h5>
      <div class="example example-container">
        <div class="f-row">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>
      <h5>Bottom</h5>
      <div class="example example-container">
        <div class="f-row f-bottom">
          <span>1</span>
          <span>2</span>
          <span>3</span>
        </div>
      </div>

      <h5>Stretch (default)</h5>
      <div class="example example-container">
        <div class="f-row f-stretch">
          <span>1</span>
          <span>2</span>
          <span>3</span> 
        </div>
      </div>
      <h5>Baseline</h5>
      <div class="example example-container">
        <div class="f-row f-baseline">
          <span>b</span>
          <span>i</span>
          <span>g</span>
        </div>
{'fraction_non_alphanumeric': 0.14544466582140916, 'fraction_numerical': 0.02463321861981525, 'mean_word_length': 1.9121835443037976, 'pattern_counts': {'":': 0, '<': 373, '<?xml version=': 0, '>': 383, 'https://': 4, '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': '7500974', 'n_tokens_mistral': 3738, 'n_tokens_neox': 3532, 'n_words': 929}