tsuika.netlify.app

Overview

Tsuika is a classless CSS framework enhanced with web components that lets developers create HTML websites quickly and easily. The name “Tsuika” derives from the Japanese word “追加” which means “to add.” True to its name, Tsuika aims to add a set of original and powerful styles and web components on top of standard HTML - letting developers focus on content rather than styling.

The project was originally intended to be just a web component library, but the growth of projects like new.css inspired a broader vision. Tsuika goes above and beyond standard classless CSS frameworks by utilizing the power of web components to bring interactive, styled elements to static HTML without any build tools.

Branding

I created two variants of the Tsuika logo. An outline and filled version. The ”+” symbol in the logo depicts the idea of “adding” styles and components to plain HTML, while the ”!” represents the excitement and joy Tsuika adds to an otherwise plain web page. The logo is designed to be simple and recognizable, reflecting the project’s focus on simplicity and ease of use.

Development Process

Building Tsuika meant designing a system that worked seamlessly across two layers: the classless CSS that styles bare HTML tags, and the web components that extend HTML with new capabilities.

The CSS layer was designed to be minimal and themeable. Instead of requiring users to learn a set of utility classes, Tsuika applies sensible defaults directly to semantic HTML elements. The theme system lets users swap entire visual identities by changing a single CSS file.

The web component layer was built using the native Custom Elements API. Because of this, each component is self-contained in its own JavaScript module, allowing users to only need to include the components they actually use, keeping pages fast and lightweight.