Meet Kanso.css

A classless CSS template for simple forms and web pages.

I've always wanted a minimal CSS template that I can customize for each project, as opposed to starting from a blank CSS file.

Which is why I created Kanso.css.

In Japanese, Kanso translates to simplicity, 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.

Features

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

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

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

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

Comes with a dark theme by default.

Switch Theme

Installation

1. Serve Locally

The recommended way to install Kanso.css is to save it locally.

This method allows you to customize and tailor Kanso.css.

2. jsDeliver CDN

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

Theming and Customization

The font and colors are changable as global root variables.

Kanso.css uses 4 colors:
--fg1 for text color,
--fg2 for outlines,
--bg1 for background color,
--bg2 for background color of buttons and text input.

Below is the color scheme example for the dark mode theme:

:root { --fg1: #eee; --fg2: #555; --bg1: #181818; --bg2: #282828; }

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

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

Demo Forms

XOR Mask

Binary Input 1:

Binary Input 2:

XOR Mask

Binary Output: