I made Tsuika, a classless CSS framework that is enhanced with the power of web components

After learning about the simplicity of a classless CSS framework called new.css, I was inspired to create something similar that could be even more versatile with the power of web components.

A link to the new.css site:
https://newcss.net/

When I started programming one of the first projects I worked on was a web component library called "Trim Design Tools". This idea was great in the sense that developers could easily implement modals and popup menus with a single HTML elements. However it didn't really sit well as it was not really framework friendly nor was it customizable to suit a variety of aesthetics.

While thinking of developing my own version of a classless CSS framework, I thought that it would just be easy to build on top of what I already previously made, as it would combine both the ease of and consistent design of a classless css framework, while still offering developers with a set of versatile components.

Through building this new version, I needed a new name. The name "Tsuika" derives from the Japanese word "追加", which means to add on to something. I thought this name would be suitable as I personally saw Tsuika as an extension of vanilla HTML. Tsuika wouldn't be suitable for a serious CRUD app, but it would surely do the job for a simple portfolio site of documentation page.

The Tsuika website made with Tsuika:
https://tsuika.netlify.app/

The link to the Tsuika GitHub repository:
https://github.com/501A-Designs/tsuika

Getting started with Tsuika

Tsuika is nothing more than just a CDN.
You can get started easily without the need of module bundlers or npm. Just create a an index.html file and attach the following onto the head tag of your HTML file.

You are required to have 3 types of CDN's in order to get started using Tsuika:

// Global stylesheet
<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/global.css"
  rel="stylesheet"
/>

// Tsuika's default theme CDN
<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/themes/tsuika.css"
  rel="stylesheet"
/>

// Import all web components
<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/index.js" defer></script>

Although the web components are what makes Tsuika unique, you can get started without using them (Just remove the CDN that imports all the web components). Optionally if you just want to use one web component you can use the CDN below to import just one:

// Import by component
<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/components/[NAME OF COMPONENT].js" defer></script>

// Example
<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/components/card-normal.js" defer></script>

If you are interested or you like the idea of Tsuika, feel free to star ⭐️ the repo!