webkin - variables.css and then: one file one component

Webkin User Interface Kit - Web Components For Rapid User Interface Development

Why Does This Exist?

To eliminate bloated web components that do more than they should.

These components accept minimal configuration only and only through component properties.

<offcanvas-panel open id="sidebar">
  <p>Content inside the offcanvas.</p>
</offcanvas-panel>

<!-- Toggle button -->
<button data-offcanvas-toggle data-offcanvas-target="#sidebar">Toggle Sidebar</button>

Why is it better?

• Everything comes with a prompt so you can re-build your own version.
• Each component lives in its own file, no imports, no code sharing, no dependencies, delete/replace any one file nothing breaks
• optionan variables.css serves as the configuration and the theme, designed with themeing in mind