Skip to content

Commit

Permalink
Added page for style api.
Browse files Browse the repository at this point in the history
  • Loading branch information
@dutchcelt
dutchcelt committed Jan 8, 2024
1 parent 7b3abde commit 8370e2a
Show file tree
Hide file tree
Showing 6 changed files with 298 additions and 188 deletions.
111 changes: 111 additions & 0 deletions forms.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!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="forms.html" aria-current="page">Forms</a>
<a href="openprops.html">Themed</a>
<a href="style-api.html">Style API</a>
</nav>
</header>
<main>
<h1>A form with opinionated style and user validation</h1>
<p>Todo</p>

<form id="form" action="/">
<fieldset title="Full Name">
<div>
<label for="firstname">First name</label>
<input id="firstname" type="text" placeholder="First name" name="firstname" required="true" />
</div>
<div>
<label for="lastname">Last name</label>
<input id="lastname" type="text" placeholder="Last name" name="lastname" required="true" />
</div>
</fieldset>
<fieldset>
<legend>Gender (optional)</legend>
<fieldset>
<input type="radio" name="gender" id="gender_male" value="Male" />
<label for="gender_male">Male</label>
<input type="radio" name="gender" id="gender_female" value="Female" />
<label for="gender_female">Female</label>
<input type="radio" name="gender" id="gender_other" value="other-none-na" />
<label for="gender_other">Non-binary</label>
<input type="radio" name="gender" id="gender_unknown" value="unknown" />
<label for="gender_unknown">None of your business</label>
</fieldset>
</fieldset>
<fieldset title="Contact information">
<div>
<label for="email">E-mail</label>
<input type="email" id="email" required />
</div>
<div>
<label for="tel">Phone number</label>
<input type="tel" id="tel" required />
</div>
<div>
<label for="select">Country</label>
<select id="select" required="required">
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Indonesia</option>
<option>Brazil</option>
</select>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">password</label>
<input
type="password"
id="password"
pattern=".{8,24}"
required="required"
autocomplete="current-password"
title="This must be a valid password. Minimum of 8 characters with a max of 24."
/>
</div>
</fieldset>
<fieldset>
<div>
<label for="textarea">Comments (optional)</label>
<textarea id="textarea"></textarea>
</div>
</fieldset>
<fieldset>
<div>
<input type="checkbox" name="terms" id="terms" required />
<label for="terms">
I agree to the
<a href="https://dutchcelt.github.io/system.css/">terms and conditions</a></label
>
</div>
</fieldset>
<div>
<button disabled="disabled">Disabled</button>
<button type="button">Cancel</button>
<button type="submit">Submit</button>
</div>
<p>
<small
><em><strong>Note</strong>: Try to avoid the use of disabled items.</em></small
>
</p>
</form>
</main>
<footer></footer>
</body>
</html>
99 changes: 11 additions & 88 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,17 @@
<body>
<header>
<h3>system.css</h3>
<nav><a href="index.html" aria-current="page">Home</a> <a href="openprops.html">Open props theme</a></nav>
<nav>
<a href="index.html" aria-current="page">Home</a>
<a href="forms.html">Forms</a>
<a href="openprops.html">Themed</a>
<a href="style-api.html">Style API</a>
</nav>
</header>
<main>
<h1>The quick brown fox jumps over the lazy dog</h1>
<h1>Browsers have a mini design system</h1>
<p>With this base stylesheet we can utilise a browsers system color and css keywords implementation.</p>
<h2>Let's build on top of that</h2>
<p>
This paragraph text is using
<a href="https://github.com/dutchcelt/system.css/blob/main/system.css">system.css</a>. Lorem ipsum dolor
Expand Down Expand Up @@ -56,8 +63,8 @@ <h6>Heading 6</h6>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <code>Hic culpa, nobis doloremque</code> veniam
non, nihil cupiditate odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
debitis eveniet totam minima vel.
non, nihil cupiditate odit repellat est <kbd>ALT&nbsp;+&nbsp;F4</kbd> expedita facilis. Fuga aspernatur,
alias debitis eveniet totam minima vel.
</p>

<ul>
Expand Down Expand Up @@ -177,90 +184,6 @@ <h6>Heading 6</h6>

<hr />

<form id="form" action="/">
<fieldset title="Full Name">
<div>
<label for="firstname">First name</label>
<input id="firstname" type="text" placeholder="First name" name="firstname" required="true" />
</div>
<div>
<label for="lastname">Last name</label>
<input id="lastname" type="text" placeholder="Last name" name="lastname" required="true" />
</div>
</fieldset>
<fieldset>
<legend>Gender (optional)</legend>
<fieldset>
<input type="radio" name="gender" id="gender_male" value="Male" />
<label for="gender_male">Male</label>
<input type="radio" name="gender" id="gender_female" value="Female" />
<label for="gender_female">Female</label>
<input type="radio" name="gender" id="gender_other" value="other-none-na" />
<label for="gender_other">Non-binary</label>
<input type="radio" name="gender" id="gender_unknown" value="unknown" />
<label for="gender_unknown">None of your business</label>
</fieldset>
</fieldset>
<fieldset title="Contact information">
<div>
<label for="email">E-mail</label>
<input type="email" id="email" required />
</div>
<div>
<label for="tel">Phone number</label>
<input type="tel" id="tel" required />
</div>
<div>
<label for="select">Country</label>
<select id="select" required="required">
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Indonesia</option>
<option>Brazil</option>
</select>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">password</label>
<input
type="password"
id="password"
pattern=".{8,24}"
required="required"
autocomplete="current-password"
title="This must be a valid password. Minimum of 8 characters with a max of 24."
/>
</div>
</fieldset>
<fieldset>
<div>
<label for="textarea">Comments (optional)</label>
<textarea id="textarea"></textarea>
</div>
</fieldset>
<fieldset>
<div>
<input type="checkbox" name="terms" id="terms" required />
<label for="terms">
I agree to the
<a href="https://dutchcelt.github.io/system.css/">terms and conditions</a></label
>
</div>
</fieldset>
<div>
<button disabled="disabled">Disabled</button>
<button type="button">Cancel</button>
<button type="submit">Submit form</button>
</div>
<p>
<small
><em><strong>Note</strong>: Try to avoid the use of disabled items.</em></small
>
</p>
</form>
<hr />
<details>
<summary>This is the details summary text</summary>
<h4>Heading 5</h4>
Expand Down
102 changes: 11 additions & 91 deletions openprops.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,18 @@
<body>
<header>
<h3>system.css</h3>
<nav><a href="index.html">Home</a> <a href="openprops.html" aria-current="page">Open props theme</a></nav>
<nav>
<a href="index.html">Home</a> <a href="forms.html">Forms</a
><a href="openprops.html" aria-current="page">Themed</a>
<a href="style-api.html">Style API</a>
</nav>
</header>
<main>
<h1>The quick brown fox jumps over the lazy dog</h1>
<h1>Theme system.css with your own props</h1>
<p>
This paragraph text is using
<a href="https://github.com/dutchcelt/system.css/blob/main/system.css">system.css</a>. Lorem ipsum dolor
sit amet consectetur adipisicing elit.
This page has been style with
<a href="https://open-props.style">Open props</a>. This is a styling solution that works well with
system.css. Both focus on the use of CSS Custom Properties.
</p>
<p>
This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequatur
Expand Down Expand Up @@ -56,8 +60,8 @@ <h6>Heading 6</h6>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <code>Hic culpa, nobis doloremque</code> veniam
non, nihil cupiditate odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
debitis eveniet totam minima vel.
non, nihil cupiditate odit repellat est <kbd>ALT&nbsp;+&nbsp;F4</kbd> expedita facilis. Fuga aspernatur,
alias debitis eveniet totam minima vel.
</p>

<ul>
Expand Down Expand Up @@ -177,90 +181,6 @@ <h6>Heading 6</h6>

<hr />

<form id="form" action="/">
<fieldset title="Full Name">
<div>
<label for="firstname">First name</label>
<input id="firstname" type="text" placeholder="First name" name="firstname" required="true" />
</div>
<div>
<label for="lastname">Last name</label>
<input id="lastname" type="text" placeholder="Last name" name="lastname" required="true" />
</div>
</fieldset>
<fieldset>
<legend>Gender (optional)</legend>
<fieldset>
<input type="radio" name="gender" id="gender_male" value="Male" />
<label for="gender_male">Male</label>
<input type="radio" name="gender" id="gender_female" value="Female" />
<label for="gender_female">Female</label>
<input type="radio" name="gender" id="gender_other" value="other-none-na" />
<label for="gender_other">Non-binary</label>
<input type="radio" name="gender" id="gender_unknown" value="unknown" />
<label for="gender_unknown">None of your business</label>
</fieldset>
</fieldset>
<fieldset title="Contact information">
<div>
<label for="email">E-mail</label>
<input type="email" id="email" required />
</div>
<div>
<label for="tel">Phone number</label>
<input type="tel" id="tel" required />
</div>
<div>
<label for="select">Country</label>
<select id="select" required="required">
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Indonesia</option>
<option>Brazil</option>
</select>
</div>
</fieldset>
<fieldset>
<div>
<label for="password">password</label>
<input
type="password"
id="password"
pattern=".{8,24}"
required="required"
autocomplete="current-password"
title="This must be a valid password. Minimum of 8 characters with a max of 24."
/>
</div>
</fieldset>
<fieldset>
<div>
<label for="textarea">Comments (optional)</label>
<textarea id="textarea"></textarea>
</div>
</fieldset>
<fieldset>
<div>
<input type="checkbox" name="terms" id="terms" required />
<label for="terms">
I agree to the
<a href="https://dutchcelt.github.io/system.css/">terms and conditions</a></label
>
</div>
</fieldset>
<div>
<button disabled="disabled">Disabled</button>
<button type="button">Cancel</button>
<button type="submit">Submit form</button>
</div>
<p>
<small
><em><strong>Note</strong>: Try to avoid the use of disabled items.</em></small
>
</p>
</form>
<hr />
<details>
<summary>This is the details summary text</summary>
<h4>Heading 5</h4>
Expand Down
2 changes: 2 additions & 0 deletions src/system-selectors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,7 @@
}

pre {
margin-block: var(--system-spacing-main);
padding: var(--system-spacing-main);
max-width: 100%;
overflow: auto;
Expand Down Expand Up @@ -245,6 +246,7 @@
}

details {
margin-block: var(--system-spacing-main);
border: var(--system-stroke-thin) solid var(--system-stroke-color);
border-radius: var(--system-radius);
cursor: text;
Expand Down
Loading

0 comments on commit 8370e2a

Please sign in to comment.