parent
3ab3103e84
commit
01fcb964be
@ -0,0 +1,154 @@ |
||||
<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> |
||||
Reference in new issue