kyoto uikit
UIKit for rapid development
Requirements
kyotopage- configured SSA
- basic knowledge of
kyoto - (twui only) configured tailwindcss
Installation
Git submodule
The easiest way to install for now, because it handles templates as well
- Add repo as git submodule to your app:
git submodule add https://github.com/kyoto-framework/uikit.git uikit - (twui only) Add replace directive to your
go.modfile:github.com/kyoto-framework/uikit/twui => ./uikit/twui - (twui only) Add twui path to tailwind config file for JIT mode
Go package + templates
<kit> - component library you want to use
- Install Go package into your project with
go get github.com/kyoto-framework/uikit/<kit> - Manually copy all
<kit>/*.htmlfiles to your templates directory
Example
Simple example using tailwind ui stats component
package main
import (
"github.com/kyoto-framework/kyoto"
"github.com/kyoto-framework/uikit/twui"
)
type PageExample struct {
Stats kyoto.Component
}
func (p *PageExample) Template() *template.Template {
return template.Must(template.New("page.example.html").Funcs(kyoto.TFuncMap()).ParseGlob("templates/*.html"))
}
func (p *PageExample) Init() {
p.Stats = kyoto.RegC(p, &twui.AppUIDataStats{
Items: []twui.AppUIDataStatsItem{
{
Image: `
<div class="p-2 bg-indigo-500 text-white rounded-lg">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
</div>
`,
Title: "Total Subscribers",
Value: 71897,
Change: 122,
},
{
Title: "Avg. Open Rate",
Value: 58.16,
ValueSymbol: "%",
Change: 5.4,
ChangeSymbol: "%",
},
{
Title: "Avg. Click Rate",
Value: 24.57,
ValueSymbol: "%",
Change: -3.2,
ChangeSymbol: "%",
},
},
})
}
Documentation
Sorry, but not ready yet
We are working on this
Features
- Provides high-level blocks instead of primitives like buttons and labels
- Configurable enough for using in different situations
- Adaptive out of the box
- Don't like component UI? It's very easy to customize it!
References
uikitproject: https://github.com/kyoto-framework/uikitkyotoproject: https://github.com/kyoto-framework/kyoto- Documentation: not ready yet
🤷♂️ - Demo project: not ready yet
🤷♂️
Contribution
Development setup is not ready yet, but feel free to use test files for testing components. Just check how existing components are used in tests.
Support
Or directly with Bitcoin: bc1qgxe4u799f8pdyzk65sqpq28xj0yc6g05ckhvkk
.png)
