501a-designs / tsuika

Tsuika : A classless CSS framework powered with web components to enhance the UI / UX of your next project.

Tsuika

A classless CSS framework powered with web components to enhance the UI / UX of your next project.

Visit the site here A live demo of it can be seen here

Getting Started

Anybody can get started with Tsuika by inserting the following above the </head> tag.

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

// Theme stylesheet
<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/tsuika/public/themes/[NAME OF THEME].css"
  rel="stylesheet"
/>

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

Using Web Components

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

// 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>

Tsuika media kit available here