tinkiet

Is not ready for production. Do not use this library until you've been invited to do it or if you like things that changed ;)

See all components in action : https://tinkiet.educ.cloud

installation

# npm i tinkiet

or you can use the umd bundle :

<script src="https://unpkg.com/tinkiet/umd/tinkiet.min.js"></script>

What you shoud know about tinkiet

tk-theme

tk-theme provide a set of Custom CSS variables to provide "theme", you can define primary, onPrimary, accent, onAccent, foreground and background colors in HEX format and tk-theme create a set of lighter,light,dark,darker variants. You can inverted the created palette to have a night "mode". tk-theme style is not global, it's apply to inner webcomponents.

<tk-theme ?inverted=${this.inverted} primary="#044488" background="#F7F7F7" foreground="#454545">
    <main-app></main-app>
<tk-theme>

tk-box

almost everything is a tk-box !! and that means you gonna like it as your css will get smaller. tk-box is a container that provides a set of inline styling.

<tk-box padding="medium" radius="large" elevation="small" color="primary">Hello World</tk-box>

<tk-box direction="row" align-items="center"></tk-box>

tk-icon is a tk-box so you can apply margin, padding, ... using tk-box attributes :

<tk-icon padding="small" radius="circle" color="on-primary" background="primary" size="xxlarge" path="${mdiAirBalloonOutline}"></tk-icon>