Skip to content

Commit

Permalink
Added a more complete example page
Browse files Browse the repository at this point in the history
  • Loading branch information
Egor Kloos committed Jan 9, 2024
1 parent da6f814 commit a0922af
Show file tree
Hide file tree
Showing 9 changed files with 502 additions and 322 deletions.
286 changes: 286 additions & 0 deletions example.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,286 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>system.css</title>
<meta name="description" content="A classless CSS base stylesheet to write modern websites using only HTML." />
<meta name="keywords" content="system, css, framework,classless css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h3>system.css</h3>
<nav>
<a href="index.html">Home</a>
<a href="example.html" aria-current="page">Example</a>
<a href="forms.html">Forms</a>
<a href="style-api.html">Style API</a>
<a href="openprops.html">Themed</a>
</nav>
</header>
<main>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

<h2>Paragraph</h2>
<p>
Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. In id risus quis purus mollis
lobortis vel ac tellus. Nam pharetra lorem quis dui commodo dapibus. Curabitur aliquet sapien vitae
ligula pretium sollicitudin. Sed sed magna eu risus placerat gravida non sit amet augue. Morbi volutpat
lobortis imperdiet. Sed elit purus, commodo a mi in, condimentum sagittis urna. Etiam condimentum
pharetra cursus. Aliquam erat volutpat. In vel diam nulla. Praesent faucibus augue quis dui vehicula, a
consequat est fringilla. Sed nec nisi fermentum, maximus nunc ac, hendrerit lorem. Proin mollis metus in
erat dictum egestas. Proin nec ipsum viverra, scelerisque nisi in, faucibus nulla.
</p>
<aside>Just a random block of text inside an aside element!</aside>
<p>
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="300" fill="var(--system-surface-color)"></rect>
<text
x="50%"
y="50%"
dominant-baseline="middle"
text-anchor="middle"
font-family="system-ui"
font-size="2em"
fill="var(--system-gray-text)"
>
Aspect Ratio 4:3
</text></svg
>If you want the image to float place it inside a <code>&lt;p&gt;</code>, <code>&lt;li&gt;</code>,
<code>&lt;dd&gt;</code>, or a <code>&lt;td&gt;</code>.
</p>
<p>
Nunc accumsan molestie nisl non malesuada. In egestas tellus lectus, nec venenatis tellus pulvinar vel.
Fusce consectetur sodales ante, sed vehicula mauris pulvinar non. Cras tempor ante nec nibh iaculis
aliquet. In quis velit non dui dapibus tempus quis sed velit. Morbi a ornare sem. Maecenas ornare
molestie ex, sed maximus lorem viverra at. In tincidunt vel purus et suscipit. Aenean aliquam neque et
ipsum volutpat, eu laoreet justo vestibulum. Maecenas quam turpis, convallis id nibh efficitur, interdum
volutpat elit. Suspendisse potenti. Nulla in vulputate massa.
</p>
<p>
Normal, <abbr title="Abbreviations">abbr</abbr>, <del>del</del>, <dfn>dfn</dfn>, <em>em</em>,
<ins>ins</ins>, <mark>mark</mark>, <s>strike through</s>, <small>small</small>, <strong>strong</strong>,
<sub>sub</sub>, <sup>sup</sup>, <u>u</u>
</p>

<h2>Links</h2>
<p>
These are links:
<a href="?2017-06-2703%3A30%3A17" onclick="return false;"
>never visited link (just don't click or it will becomes visited)</a
>, <a href="https://sarajoy.dev">visited link</a>. Mouse hover to see effects.
</p>

<h2>Lists</h2>
<h3>Unordered list</h3>
<ul>
<li>List item</li>
<li>
List item
<ul>
<li>List item</li>
<li>List item</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam
inventore voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut
commodi odit quae ipsa quaerat enim.
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
</ul>
<h3>Ordered list</h3>
<ol>
<li>List item with a much longer description or more content.</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam inventore
voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut commodi odit quae ipsa
quaerat enim.
</li>
<li>
List item
<ol>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
<h3>Mixed</h3>
<ul>
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>
List item
<ol>
<li>Nested list item</li>
<li>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel nemo deleniti, ipsam
inventore voluptate, tempora quae obcaecati aut voluptatum non? Dignissimos numquam aut
commodi odit quae ipsa quaerat enim.
</li>
<li>Nested list item</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<h3>Definition list</h3>
<dl>
<dt>Definition list</dt>
<dd>
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</dd>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</dd>
</dl>
<h3>Details &amp; Summary</h3>
<details>
<summary>Question 1</summary>
<p>
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat
eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum
sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
<a href="#" onclick="return false;">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.
</p>
<details>
<summary>Related documents</summary>
<p>
Yes, this works. But in general be careful with nesting the
<code>&lt;details&gt;</code> element.
</p>
<ul>
<li>
<a href="#" onclick="return false;"
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
>
</li>
<li><a href="#" onclick="return false;">Aliquam tincidunt mauris eu risus.</a></li>
<li>
<a href="#" onclick="return false;"
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a
>
</li>
<li><a href="#" onclick="return false;">Aliquam tincidunt mauris eu risus.</a></li>
</ul>
</details>
</details>
<details>
<summary>Question 2</summary>
<p>
Duis consequat metus et eros rutrum, interdum facilisis urna interdum. Etiam facilisis diam in
libero varius ultricies id id est. Sed lacinia pellentesque sem vel sagittis.
</p>
</details>

<h2>Blockquote</h2>
<blockquote>
Those people who think they know everything are a great annoyance to those of us who do. -
<cite>Isaac Asimov</cite>
</blockquote>

<h2>Code</h2>
<p>
This is inline code <code>&lt;div&gt;div element&lt;/div&gt;</code>. This is sample output
<samp>sample</samp> And below is block code.
</p>
<pre>
&#x3C;!DOCTYPE html&#x3E;
&#x3C;html&#x3E;
&#x3C;head&#x3E;
&#x3C;title&#x3E;Hello World&#x3C;/title&#x3E;
&#x3C;/head&#x3E;
&#x3C;body&#x3E;
&#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x3C;/p&#x3E;
&#x3C;/body&#x3E;
&#x3C;/html&#x3E;</pre
>
<p>
The input keyboard <kbd>Ctrl</kbd>+<kbd>S</kbd>. This is variable: <var>y</var> = <var>m</var
><var>x</var> + <var>b</var>
</p>

<h2>Table</h2>
<table>
<thead>
<tr>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table footer</th>
<th>Table footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table data</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td>Table data</td>
<td>Table data</td>
</tr>
<tr>
<td>Table data</td>
<td>Table data</td>
</tr>
<tr>
<td>Table data</td>
<td>Table data</td>
</tr>
</tbody>
</table>

<h2>Figure</h2>

<figure>
<svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg">
<rect width="800" height="450" fill="var(--system-surface-color)"></rect>
<text
x="50%"
y="50%"
dominant-baseline="middle"
text-anchor="middle"
font-family="system-ui"
font-size="72px"
fill="var(--system-gray-text)"
>
Aspect Ratio 16:9
</text>
</svg>
<figcaption>This is a figcaption</figcaption>
</figure>
</main>
<footer></footer>
</body>
</html>
7 changes: 6 additions & 1 deletion forms.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@
<h3>system.css</h3>
<nav>
<a href="index.html">Home</a>
<a href="example.html">Example</a>
<a href="forms.html" aria-current="page">Forms</a>
<a href="openprops.html">Themed</a>
<a href="style-api.html">Style API</a>
<a href="openprops.html">Themed</a>
</nav>
</header>
<main>
Expand Down Expand Up @@ -80,6 +81,10 @@ <h1>A form with opinionated style and user validation</h1>
</div>
</fieldset>
<fieldset>
<div>
<label for="file">Upload (optional)</label>
<input id="file" type="file" />
</div>
<div>
<label for="textarea">Comments (optional)</label>
<textarea id="textarea"></textarea>
Expand Down
Loading

0 comments on commit a0922af

Please sign in to comment.