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