Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@nightmono
nightmono committed Nov 17, 2024
1 parent a7554c3 commit 74f1418
Show file tree
Hide file tree
Showing 2 changed files with 315 additions and 0 deletions.
225 changes: 225 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meet Kanso.css</title>
<link rel="stylesheet" type="text/css" href="kanso.css">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<style>
:root {
--font: Inter, sans-serif;
}

* {
transition: color .2s, background-color .2s;
}
</style>
</head>

<body>

<header>
<nav>
<a href="#install"><button type="submit">Install</button></a>
<a href="#theming"><button>Theming</button></a>
<a href="#demo"><button>Demo</button></a>
<a href="https://github.com/nightmono/kanso.css" target="_blank" rel="noopener noreferrer">
<button>GitHub &UpperRightArrow;</button>
</a>
</nav>
</header>

<main>

<h1>Meet Kanso.css</h1>

<p>A classless CSS template for simple forms and web pages.</p>

<p>
I&apos;ve always wanted a minimal CSS template that I can customize for each project, as opposed to starting
from a blank CSS file.
</p>

<p>Which is why I created Kanso.css.</p>

<p>
In Japanese, Kanso translates to simplicity or purity, advocating for the elimination of the unnecessary. I
wanted a template that reflected this philosophy, offering a clean, minimal, and distraction-free
experience that can be added onto.
</p>

<h2>Features</h2>

<p>
Sticking to its core principles, Kanso.css minimizes its number of declarations, whilst being responsive
and easily customizable.
</p>

<p>At less than 100 lines, Kanso.css is a tiny 1.3 KB in size.</p>

<p>Works as a standalone classless CSS framework, but can be added onto and tailored for specific projects.</p>

<p>Font and colors are stored as global variables, making it easy to theme Kanso.css.</p>

<p>Comes with a dark theme by default.</p>

<p><button type="submit" onclick="switchTheme()">Switch Theme</button></p>

<script>
function switchTheme() {
const root = document.documentElement;

if (getComputedStyle(root).getPropertyValue('--fg1').trim() === '#222') {
root.style.setProperty('--fg1', '#eee');
root.style.setProperty('--fg2', '#888');
root.style.setProperty('--bg1', '#181818');
root.style.setProperty('--bg2', '#282828');
} else {
root.style.setProperty('--fg1', '#222');
root.style.setProperty('--fg2', '#555');
root.style.setProperty('--bg1', '#f8f8f8');
root.style.setProperty('--bg2', '#eee');
}
}
</script>

<h2 id="install">Installation</h2>

<h3>1. Serve Locally</h3>

<p>The recommended way to install Kanso.css is to save it locally.</p>

<p>This method allows you to customize and tailor Kanso.css.</p>

<a href="https://github.com/nightmono/kanso.css/releases" target="_blank" rel="noopener noreferrer">
<button type="submit">GitHub Release Page &UpperRightArrow;</button>
</a>

<h3>2. jsDeliver CDN</h3>

<p>You can apply the default Kanso.css to your site by adding the following link tag within your head tag.</p>

<code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nightmono/kanso.css@main/kanso.css"&gt;</code>

<h2 id="theming">Theming and Customization</h2>

<p>The font and colors are changable as global root variables.</p>

<p>
Kanso.css uses 4 colors:<br>
<code>--fg1</code> for text color,<br>
<code>--fg2</code> for outlines,<br>
<code>--bg1</code> for background color,<br>
<code>--bg2</code> for background color of buttons and text input.
</p>

<p>Below is the color scheme example for the dark mode theme:</p>

<p><code>:root { --fg1: #eee; --fg2: #555; --bg1: #181818; --bg2: #282828; }</code></p>

<p>Because the size of Kanso.css is so small, you can add any custom CSS directly onto the file itself.</p>

<p>
Alternatively, you can load your own stylesheet after Kanso.css, overriding any conflicting declarations
Kanso.css has with yours.
</p>

<h2 id="demo">Demo Forms</h2>

<h3>XOR Mask</h3>
<p>
<label>Binary Input 1:</label>
<textarea id="input1" rows="2"></textarea>
</p>
<p>
<label>Binary Input 2:</label>
<textarea id="input2" rows="2"></textarea>
</p>
<p>
<button type="submit" onclick="xorMask()">XOR Mask</button>
</p>
<p>
<label>Binary Output:</label>
<textarea id="output" rows="2"></textarea>
</p>

<script>
function xorMask() {
const input1 = document.getElementById('input1').value;
const input2 = document.getElementById('input2').value;

let result = '';
for (let i = 0; i < input1.length; i++) {
result += input1[i] ^ input2[i];
}

document.getElementById('output').value = result;
}
</script>

<form>
<h3>Message</h3>
<p>
<label>What language is Kanso from?</label>
<select name="language">
<option value="1" selected>Language</option>
<option value="2">Spanish</option>
<option value="3">Japanese</option>
<option value="4">Arabic</option>
</select>
</p>
<p>
<label>First name *</label>
<input type="text" name="firstName" required>
</p>
<p>
<label>Surname</label>
<input type="text" name="surname">
</p>
<p>
<label>Email *</label>
<input type="email" name="email" required>
</p>
<p>
<label>Web Tech:</label>
<label><input checked name="type" type="radio" value="html"> HTML</label>
<label><input name="type" type="radio" value="css"> CSS</label>
<label><input name="type" type="radio" value="js"> JavaScript</label>
</p>
<p>
<label>Message</label>
<textarea rows="3"></textarea>
</p>
<p>
<label>
<input type="checkbox" id="checkbox" value="terms">
I agree to the <a href="#">terms and conditions</a>
</label>
</p>

<button type="submit">Send</button>
<button type="reset">Reset</button>
<button disabled="disabled">Disabled</button>
</form>

</main>

<footer>
<br><br>
<hr />
<br>
<p>
Kanso.css was made by
<a href="https://github.com/nightmono" target="_blank" rel="noopener noreferrer">
nightmono &UpperRightArrow;
</a>
and is licensed under the MIT license.
</p>
<br>
</footer>

</body>

</html>
90 changes: 90 additions & 0 deletions kanso.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
:root {
--font: sans-serif;
--fg1: #222;
--fg2: #888;
--bg1: #f8f8f8;
--bg2: #eee;
}

@media (prefers-color-scheme: dark) {
:root {
--fg1: #eee;
--fg2: #555;
--bg1: #181818;
--bg2: #282828;
}
}

* {
box-sizing: border-box;
scroll-behavior: smooth;
}

body {
color: var(--fg1);
background-color: var(--bg1);
font-family: var(--font);
line-height: 1.5;
margin: 0 auto;
max-width: 500px;
padding: 2rem 1rem 1rem;
box-sizing: content-box;
}

a {
color: var(--fg1);
font-weight: 600;
}

small {
font: inherit;
color: var(--fg2);
}

label {
display: block;
margin-bottom: 0.5rem;
}

textarea,
input,
select,
button {
font: inherit;
color: var(--fg1);
padding: 0.25rem 0.5rem;
background-color: var(--bg2);
border: 1px solid var(--fg2);
border-radius: 4px;
}

textarea,
input[type="text"],
input[type="email"] {
width: 100%;
max-width: 100%;
}

button {
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 8px;
transition: all .2s;
}

button[type="submit"] {
color: var(--bg1);
background-color: var(--fg1);
border-color: var(--fg1);
}

button:disabled {
color: var(--fg2);
background-color: var(--bg2);
border: var(--bg2);
cursor: not-allowed;
}

button:hover {
opacity: .8;
}

0 comments on commit 74f1418

Please sign in to comment.