twitter-for-coders/pages/examples/sample.html

<main class="!p-4">
<h1>Sample Components</h1>
<p>This is a list of components I've made for making websites quicker. They're just pre-styled things you commonly need to do HTML first layouts and designs.</p>

<h2>Shapes</h2>

<shape class="xs">
  I'm a placeholder.
</shape>

<h2>Grids</h2>

<grid class="grid-cols-2">
<shape class="xxs">0,0</shape>
<shape class="xxs">1,0</shape>
<shape class="xxs">0,1</shape>
<shape class="xxs">1,1</shape>
</grid>

<h2>Blocks & Bars</h2>

<block>
  <p>Use a block to automatically flex content vertically.</p>
  <p>Like these two lines are done.</p>
  <bar class="rounded-lg border-1 border-gray-300">
    <shape class="xxs">Image</shape>
    <p>Use a bar to flex things horizontally.</p>
  </bar>

  <bar class="flex-end rounded-lg border-1 border-gray-300">
    <shape class="xxs">Image</shape>
    <block>
      <span>You can also combine them in arbitrary ways to layout your content.</span>
    </block>
    <grid class="grid-cols-2">
      <shape class="tiny">1</shape>
      <shape class="tiny">2</shape>
      <shape class="tiny">3</shape>
    </grid>
  </bar>
</block>

<h2>Stack</h2>

<p>A stack lets you place multiple elements on top of eachother, like with layers in nearly every single layout composition system in existence for the last 500 years.</p>

<stack>
<shape class="xs">I'm on bottom</shape>
<h1 class="text-red-500">Hello</h1>
<h2 class="text-orange-500">There</h2>
</stack>

<h2>Code</h2>

<pre><code>if(var != 'string') {
  console.log("test");
}
</code></pre>

<p>You should type <code>ls -l</code> to list the directory.</p>

<code>if(var != 'string')</code>

<h2>Highlight/Marking</h2>

<aside>
  <mark>Default</mark>
  <span>This is an aside. You use it to call out something specific.</span>
</aside>

<aside>
  <mark class="info">Info</mark>
  <span>This is an aside. You use it to call out something specific.</span>
</aside>

<aside>
  <mark class="warning">Warning</mark>
  <span>A warning aside.</span>
</aside>

<aside>
  <mark class="alert">Alert</mark>
  <span>An alert aside.</span>
</aside>

<p>This is some <mark>marked</mark> text.</p>

<h2>Details</h2>

<details aria-label="Sample">
  <summary>Details Test</summary>
  A test of the details thing.
</details>

<h2>Forms</h2>

<form>
  <card>
  <top>Test Form</top>

  <middle>
    <label for="fruit">What Fruit?</label>
    <select id="fruit">
      <option>Apples</option>
      <option>Oranges</option>
    </select>

    <label for="name">Name</label>
    <input id="name" placeholder="Your Name?" />
  </middle>

  <bottom>
      <button>Submit</button>
  </bottom>
  </card>
</form>


<h2>Cards</h2>

<p>Cards organize information vertically.</p>

<card>
  <top><shape class="video">Image</shape></top>
  <middle>This shows a top large image with
  some text in the middle.</middle>
  <bottom><button type="button">An Action</button></bottom>
</card>

<h2>Header/Nav</h2>

<p>If you put nav inside header it "just works".</p>

<header>
  <nav>
    <a id="home" href="/">
      <svg xmlns="http://www.w3.org/2000/svg"
        width="2rem"
        height="2rem"
        viewBox="0 0 2rem 2rem">
        <use href="/icons/home.svg#home" />
      </svg>
    </a>
    <a id="live" href="#">Live</a>
    <a id="stream" href="#">Streams</a>
    <a id="game" href="#">Games</a>
    <a id="register" href="#">Register</a>
    <a id="login" href="#">Login</a>
  </nav>
</header>

<p>That's an example of a header with a nav bar in it.</p>

</main>