🚀 Introduction

Welcome to the documentation for Klik Grid! This documentation is designed to help you get started with Klik Grid and understand how to use it.

Klik Grid is a collection of UI components, colors, fonts, animations, strings, scripts and variables that are designed to speed up developement. It is built for developers who want a consistent and easy to use structure for developing desktop apps with Wails or any other desktop frameworks of their choice.

In order to use Klik Grid, you need to include the following folder in your project:

📁 klik_grid

After that, you need to include the following dependencies in your project:

your_html.html

If you would like to, you can remove the documentation folder from your project, but it is recommended to keep it for reference, as it contains a lot of useful information.

Now that you have Klik Grid in your project, you can start using it!

🕹️ Controls

Here is a list of all the controls that are available in Klik Grid:

Standard Controls

In order to create following types of controls, it is required to include this dependency to your html file:

your_html.html

As well as this dependency:

your_html.html

And this for logic:

your_js.html

Button

Standard Buttons

Flat Buttons

Icon Buttons

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The button can hold these following properties:

flat, type-info, type-warning, type-error, type-success, data-button-value

The button group can hold these following properties:

vertical, horizontal

The programmatical creation of buttons can hold these following properties:

Button Name, Button Data Value, Button Group Parent, Button Type, Button Group Orientation, Button Icon, Button Icon Location

Button Group Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Button Type can accept flat, type-info, type-warning, type-error and type-success. If nothing is specified, it defaults to standard, no style button type.

Button Group Orientation can accept horizontal or vertical property. If nothing is specified, it defaults to horizontal.

Button Icon Location can accept before or after property. If nothing is specified, it defaults to before.

Toggleable Button Group

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this:

your_javascript.js

The button can hold these following properties:

flat, type-info, type-warning, type-error, type-success, data-button-value

The toggle button group can hold these following properties:

vertical, horizontal

The programmatical creation of toggle buttons can hold these following properties:

Toggle Button Name, Toggle Button Data Value, Toggle Button Group Parent, Toggle Button Group Class, Toggle Button Type, Toggle Button Group Orientation, Toggle Button Icon, Toggle Button Icon Location, Activated Toggle Button

Toggle Button Group Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Toggle Button Type can accept flat, type-info, type-warning, type-error and type-success. If nothing is specified, it defaults to standard, no style button type.

Toggle Button Group Orientation can accept horizontal or vertical property. If nothing is specified, it defaults to horizontal.

Toggle Button Icon Location can accept before or after property. If nothing is specified, it defaults to before.

Activated Toggle Button can accept -1 for not toggling anything or 0 to greater number (1, 2, 3, ...) for toggling specific buttons. If nothing is specified, it defaults to -1.

Radio Button Group

Option 1 Option 2 Option 3

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The radio button can hold these following properties:

data-radio-value

The radio button group can hold these following properties:

vertical, horizontal

The programmatical creation of radio buttons can hold these following properties:

Radio Button Label, Radio Button Data Value, Radio Button Group Parent, Radio Button Group Class, Radio Button Class, Radio Button Group Orientation, Radio Button Name, Activated Radio Button

Radio Button Group Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Radio Button Group Orientation can accept horizontal or vertical property. If nothing is specified, it defaults to horizontal.

Activated Radio Button can accept -1 for not toggling anything or 0 to greater number (1, 2, 3, ...) for toggling specific buttons. If nothing is specified, it defaults to -1.

Checkbox Group

Option 1 Option 2 Option 3

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The checkbox button can hold these following properties:

data-checkbox-value

The checkbox button group can hold these following properties:

vertical, horizontal

The programmatical creation of checkbox buttons can hold these following properties:

Checkbox Button Label, Checkbox Button Data Value, Checkbox Button Group Parent, Checkbox Button Group Class, Checkbox Button Class, Checkbox Button Group Orientation, Activated Checkbox Button

Checkbox Button Group Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Checkbox Button Group Orientation can accept horizontal or vertical property. If nothing is specified, it defaults to horizontal.

Activated Checkbox Button can accept -1 for not toggling anything or 0 to greater number (1, 2, 3, ...) for toggling specific buttons. If nothing is specified, it defaults to -1.

Dropdown

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The dropdown can hold these following properties:

flat, type-neutral, type-warning, type-error, type-success, data-button-value

The programmatical creation of dropdown can hold these following properties:

Dropdown Button Label, Dropdown Button Data Value, Dropdown Container Parent, Dropdown List, Dropdown Container Class, Dropdown Button Class

Dropdown Container Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Slider

Sample Slider

Filled Slider

100

Empty Slider

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The slider group can hold these following properties:

vertical, horizontal

The programmatical creation of slider can hold these following properties:

Slider Label, Slider Minimum Value, Slider Maximum Value, Slider Current Value, Slider Group Parent, Slider Group Class, Slider Class, Slider Group Orientation

Slider Group Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Slider Group Orientation can accept horizontal or vertical property. If nothing is specified, it defaults to vertical.

Text Input

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The text input group can hold these following properties:

vertical, horizontal

The programmatical creation of slider can hold these following properties:

Text Input Text, Text Input Placeholder, Text Input Group Parent, Text Input Group Class, Text Input Class, Text Input Group Orientation, Text Input Character Limit

Text Input Group Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Text Input Group Orientation can accept horizontal or vertical property. If nothing is specified, it defaults to vertical.

Tab

Tab 1

Tab 2

Tab 3

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The programmatical creation of tab can hold these following properties:

Tab Text, Tab Data Value, Tab Group Parent, Tab Group Class, Tab Class, Activated Tab

Tab Group Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Separator

Top Left

Some Extra

Text to Fill

Top Center

Some Extra

Text to Fill

Top Right

Some Extra

Text to Fill

Bottom Left

Some Extra

Text to Fill

Bottom Right

Some Extra

Text to Fill

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The programmatical creation of separator can hold these following properties:

Separator Container Parent, Separator Configuration, Separator Container Data Value, Separator Container Class

Separator Container Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Socket

Item 1

Item 2

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The programmatical creation of socket can hold these following properties:

Socket Container Parent, Socket Container Class, Socket Class

Socket Container Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Collapsible Menu

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The programmatical creation of collapsible menu can hold these following properties:

Collapsible Menu Container Parent, Collapsible Menu Header Text, Collapsible Menu Container Class, Collapsible Menu Content Class, Collapsible Menu Open State

Collapsible Menu Container Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Collapsible Menu Open State can accept true or false property. If nothing is specified, it defaults to false.

Context Menu

Right-Click Me

Option 1
Option 2
- Suboption 2.1
- Suboption 2.2
  - Deep 2.2.1
  - Deep 2.2.2
- Suboption 2.3
Option 3

Option 4

In order to create it, you need to write this code:

your_html.js

and this:

your_javascript.js

and this for logic:

your_javascript.js

The programmatical creation of context menu can hold these following properties:

Context Menu Parent, Context Menu Data Value, Context Menu List, Context Menu Parent Class

Context Menu Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Message Box

In order to create it, you need to write this code:

your_html.js

and this:

your_javascript.js

and this for logic:

your_javascript.js

Notification

In order to create it, you need to write this code:

your_javascript.js

and this:

your_javascript.js

Drawing Controls

In order to create following types of controls, it is required to include this dependency to your html file:

your_html.html

As well as this dependency:

your_html.html

And this for logic:

your_js.html

Color Picker

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The programmatical creation of color picker can hold these following properties:

Color Picker Parent, Color Picker Data Value, Color Picker Class

Color Picker Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Curve Editor

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The programmatical creation of curve editor can hold these following properties:

Curve Editor Parent, Curve Editor Data Value, Curve Editor Class

Curve Editor Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

Data Controls

In order to create following types of controls, it is required to include this dependency to your html file:

your_html.html

As well as this dependency:

your_html.html

And this for logic:

your_js.html

Code Snippet

Sample Header

Sample Code

In order to create it, you need to write this code:

your_html.html

Instead of using a text document path to add text to the code area, you can also directly write in the code tag

The Code Snippet is only for documentation and is not intended for usage

Property

Sample Property

In order to create it, you need to write this code:

your_html.html

The Property is only for documentation and is not intended for usage

Action History

In order to create it, you need to write this code:

your_html.html

or this, programmatically:

your_html.html

and this for logic:

your_javascript.js

The programmatical creation of action history can hold these following properties:

Action History Parent, Action History Class

Action History Parent can accept id with # or a class with . selectors. If nothing is specified, it defaults to <body> element.

🎨 Colors

Here is a list of all the colors that are available in Klik Grid:

Neutral Palette

--color-neutral-50

--color-neutral-100

--color-neutral-200

--color-neutral-300

--color-neutral-400

--color-neutral-500

--color-neutral-600

--color-neutral-700

--color-neutral-800

--color-neutral-900

--color-neutral-950

Red Palette

--color-red-50

--color-red-100

--color-red-200

--color-red-300

--color-red-400

--color-red-500

--color-red-600

--color-red-700

--color-red-800

--color-red-900

--color-red-950

Purple Palette

--color-purple-50

--color-purple-100

--color-purple-200

--color-purple-300

--color-purple-400

--color-purple-500

--color-purple-600

--color-purple-700

--color-purple-800

--color-purple-900

--color-purple-950

Blue Palette

--color-blue-50

--color-blue-100

--color-blue-200

--color-blue-300

--color-blue-400

--color-blue-500

--color-blue-600

--color-blue-700

--color-blue-800

--color-blue-900

--color-blue-950

Cyan Palette

--color-cyan-50

--color-cyan-100

--color-cyan-200

--color-cyan-300

--color-cyan-400

--color-cyan-500

--color-cyan-600

--color-cyan-700

--color-cyan-800

--color-cyan-900

--color-cyan-950

Green Palette

--color-green-50

--color-green-100

--color-green-200

--color-green-300

--color-green-400

--color-green-500

--color-green-600

--color-green-700

--color-green-800

--color-green-900

--color-green-950

Yellow Palette

--color-yellow-50

--color-yellow-100

--color-yellow-200

--color-yellow-300

--color-yellow-400

--color-yellow-500

--color-yellow-600

--color-yellow-700

--color-yellow-800

--color-yellow-900

--color-yellow-950

Orange Palette

--color-orange-50

--color-orange-100

--color-orange-200

--color-orange-300

--color-orange-400

--color-orange-500

--color-orange-600

--color-orange-700

--color-orange-800

--color-orange-900

--color-orange-950

✒️ Fonts

Here is a list of all the fonts that are available in Klik Grid:

Font Names

Recursive-Thin
Recursive-Regular
Recursive-Bold

Noto-Sans-Thin
Noto-Sans-Regular
Noto-Sans-Bold

💫 Animations

Here is a list of all the animations that are available in Klik Grid:

Box Samples

--grow

--grow-to-normal

--grow-big

--grow-big-to-normal

--shrink

--shrink-to-normal

--shrink-big

--shrink-big-to-normal

--grow-to-shrink

--grow-to-shrink-big

--fade-in-slide

--fade-out-slide

--spin-clockwise

--spin-counterclockwise

📄 Strings

Here is a list of all the strings that are available in Klik Grid:

String Content

String Variables

--ok
--yes
--no
--cancel
--start
--stop
--exit
--error
--save
--delete
--retry
--help
--menu
--next
--back
--skip
--update
--upload
--download
--settings
--login
--logout

📜 Utilities

Here is a list of all the utilities that are available in Klik Grid:

Injector Script

In order to use this script, it is required to include this dependency to your html file:

your_html.html

and this:

your_html.html

Variable Grabber Script

Press the button to make its text --ok string

In order to use this script, it is required to include this dependency to your html file:

your_html.html

and this:

your_html.html

💡 Variables

Here is a list of all the variables that are available in Klik Grid:

Border Radius

--radius-none: 0px;
--radius-small: 4px;
--radius-medium: 8px;
--radius-large: 12px;
--radius-xlarge: 50px;
--radius-xxlarge: 100px;
--radius-circle: 50%;
--radius-full: 100%;

Border

--border-none: 0px;
--border-small: 1px;
--border-medium: 2px;
--border-large: 4px;
--border-xlarge: 8px;
--border-xxlarge: 12px;

Font Size

--font-size-small: 0.625rem;
--font-size-medium: 0.75rem;
--font-size-large: 0.875rem;
--font-size-xlarge: 1rem;
--font-size-xxlarge: 1.25rem;

Gap

--gap-small: 2px;
--gap-medium: 4px;
--gap-large: 8px;
--gap-xlarge: 12px;
--gap-xxlarge: 16px;

Icon Size

--icon-small: 12px;
--icon-medium: 16px;
--icon-large: 20px;
--icon-xlarge: 24px;
--icon-xxlarge: 32px;

Margin

--margin-none: 0px;
--margin-small: 2px;
--margin-medium: 4px;
--margin-large: 6px;
--margin-xlarge: 8px;
--margin-xxlarge: 12px;

Outline

--outline-none: 0;
--outline-small: 1px;
--outline-medium: 2px;
--outline-large: 4px;
--outline-xlarge: 8px;
--outline-xxlarge: 10px;

Padding

--padding-none: 0px;
--padding-small: 2px;
--padding-medium: 4px;
--padding-large: 6px;
--padding-xlarge: 8px;
--padding-xxlarge: 12px;

Shadow

--shadow-top-hard: 0px -2px var(--color-neutral-800);
--shadow-bottom-hard: 0px 2px var(--color-neutral-800);
--shadow-left-hard: 2px 0px var(--color-neutral-800);
--shadow-right-hard: -2px 0px var(--color-neutral-800);

--shadow-small: 0px 0px 3px var(--color-neutral-950);
--shadow-medium: 0px 0px 6px var(--color-neutral-950);
--shadow-large: 0px 0px 9px var(--color-neutral-950);

Stroke

--stroke-small: 1px;
--stroke-medium: 2px;
--stroke-large: 4px;
--stroke-xlarge: 5px;
--stroke-xxlarge: 8px;

Transition

--transition-fast: 100ms;
--transition-medium: 300ms;
--transition-slow: 500ms;
--transition-xslow: 1000ms;
--transition-xxslow: 2000ms;

Z-Index

--z-index-below: -1;
--z-index-low: 10;
--z-index-medium: 50;
--z-index-high: 100;
--z-index-overlay: 999;

⚙ Settings

Here is a list of all the settings that are available in Klik Grid:

Language Switcher

In order to switch language, you need to write this code:

your_html.html

Theme Switcher

your_html.html