<commit_before><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>
      Position / 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">Position</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">2.0.0</dd>
          </dl>
          <dl class="white-60 light dib mrm">
            <dt class="db">Filesize</dt> 
            <dd class="f2 f1-ns b db pln mln">460 B</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">88</span></dd>
            </dl>
            <dl class="white-60 dib mrm">
              <dt class="db prs">Selectors </dt>
              <dd class="db pln mln f2 f1-ns b">89</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">10</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">1</dd>
            </dl>
          </div>
        </div>

      </div>
      <div class="phm phl-ns pvm">
        <p class="measure f3 lh-copy">
          Elements default to a position of static. Tachyons provides utilities for setting position to be relative or absolute. Absolute elements are absolutely positioned inside of a relative element. You can use absolute positioning to stretch elements making sure they fill the width and height of a relative container. Relatively positioned elements offer the ability to offset the position of an element without affecting the position of any elements around it. This module should be used in conjunction with the coordinates module which is used to give working examples on this page.
        </p>
        <p class="measure f4 lh-copy">
          CSS also provides fixed and sticky options for position but as I
          don't find them useful from a design standpoint I have not included
          them here. If you do find them useful you could easily extend the
          position module to include these options. It should be noted that
          sticky is not well supported at the moment. If the provided coordinates don't suit your needs the module is easy to extend to add any values you might need. I don't provide negative values - but those can be used in both relative and absolutely positioned elements. 
        </p>
      </div>
    </header>
    <main class="">
<div class="phm phl-ns ptl pbxl">
  <h2 class="f3 bold">Examples</h2>
  <h3 class="f5 book ptl caps">Position Static</h3><commit_msg>Update docs for position module.<commit_after><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>
      Position / 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">Position</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">3.0.0</dd>
          </dl>
          <dl class="white-60 light dib mrm">
            <dt class="db">Filesize</dt> 
            <dd class="f2 f1-ns b db pln mln">156 B</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">12</span></dd>
            </dl>
            <dl class="white-60 dib mrm">
              <dt class="db prs">Selectors </dt>
              <dd class="db pln mln f2 f1-ns b">12</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">10</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">1</dd>
            </dl>
          </div>
        </div>

      </div>
      <div class="phm phl-ns pvm">
        <p class="measure f3 lh-copy">
          Elements default to a position of static. Tachyons provides utilities for setting position to be relative or absolute. Absolute elements are absolutely positioned inside of a relative element. You can use absolute positioning to stretch elements making sure they fill the width and height of a relative container. Relatively positioned elements offer the ability to offset the position of an element without affecting the position of any elements around it. This module should be used in conjunction with the coordinates module which is used to give working examples on this page.
        </p>
        <p class="measure f4 lh-copy">
          CSS also provides fixed and sticky options for position but as I
          don't find them useful from a design standpoint I have not included
          them here. If you do find them useful you could easily extend the
          position module to include these options. It should be noted that
          sticky is not well supported at the moment. If the provided coordinates don't suit your needs the module is easy to extend to add any values you might need. I don't provide negative values - but those can be used in both relative and absolutely positioned elements. 
        </p>
      </div>
    </header>
    <main class="">
<div class="phm phl-ns ptl pbxl">
  <h2 class="f3 bold">Examples</h2>
  <h3 class="f5 book ptl caps">Position Static</h3>
{'fraction_non_alphanumeric': 0.12460502816320923, 'fraction_numerical': 0.018134359115263086, 'mean_word_length': 2.379758588672238, 'pattern_counts': {'":': 0, '<': 179, '<?xml version=': 0, '>': 179, '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': '6414893', 'n_tokens_mistral': 2289, 'n_tokens_neox': 2175, 'n_words': 821}