Note before using: Tsuika is still in development so many breaking changes may come in the near future. Please do not use Tsuika for any production or important applications.

Tsuika

GitHub | Features

What is Tsuika?

“Simplicity is the ultimate sophistication.” — Leonardo da Vinci.

Tsuika is a web component and classless CSS framework that enables developers to create HTML websites quickly and easily. This project was originally intented to create only webcomponents however the growth of new.css had inspired many and enabled development of Tsuika to be something more than just a web component library. Tsuika aims to go above and beyond standard classless CSS frameworks by utilizing the power of web components.

The name "Tsuika" also derives from the Japanese word "追加" which means to add. Tsuika aims to add a set of original and powerful styles and web components on top of your standard HTML.

Demonstration

So what do you mean by "powered by web components?". Well its easier to understand by looking under the hood. The quote label you just saw for instance was made with a single component. (so is the code block component below as well!)

Like this you don't to style anything because Tsuika does that all for you. And unlike a standard classless CSS framework, Tsuika allows you to add a variety of styles to your static webpages. In otherwords, you can do the thing you meant to do which was focusing on the content.

Features

Fast & performant

Because Tsuika is importing components seperately as modules it only uses the JavaScript files that you need! This treeshakable architecture makes it quick and performant.

Stronger with web components

In addition to styling by tags, Tsuika offers a multiple array of web components that makes it easy to add and remove powerful features on to your website like bar graphs and carousels!

King of simplicity

Tsuika is without a doubt simple. No module bundlers and no need to use a package manager. All of its rich features can be accessible through its CDN!

Docs for Web Components

Because Tsuika are importing components seperately as modules it only uses the JavaScript files that you need! This treeshakable architecture makes it quick and performant.

Component Description Properties Property Values
card-normal A card component (Your newdiv) borderType boxShadowborder
card-p A card component specifically made for text type bannerquote
card-glance A card component to display long piece of information. btnStartbtnStart The name of the button (String value)
card-carousel Insert multiple components to activate a scrollable container. N/A N/A
container-split Insert multiple components to have them line up side by side. (display a 2 x ∞ grid) N/A N/A
graph-bar A component to display a horizontal bar graph. % Integer as string
code-block A component to display a your code. Clicking the component enables visitors to copy its content. code String value

Using Tsuika

Installation

All necessary information is available in the README file on the Tsuika Github repository. View README.md

Steps

  1. Choose a theme to use. As of now Tsuika supports 3 types of themes, however you can copy the contents of the theme css file and change it accordingly to create your own themes!
  2. To get started simply go to the GitHub repository where you can find further information about the CDN on the README.md file.
  3. You should have three types of CDN links that specifies the following: The theme, global.css file, and finally the component JavaScript files (which should be in the /components/directory.) *If you are using the code-block component, be sure to add the shiki CDN to the head of your html file.
  4. Your ready! Go ahead and start working on you website and enhance it with Tsuikas' versetile web components.
    5.

Themes

You can select a theme and use that to customize the looks of your website.

View All Themes