You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
3.4 KiB
154 lines
3.4 KiB
<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>
|
|
|