Franken UI
Difficulties installing franken-ui in a GoLang + Templ project #12
-
|
Hello everyone :) I am trying to install franken-ui for a project in GoLang+Templ to serve basic frontend, where I would love to use franken-ui for the styling and components. I have tried to follow the install docs for both CDN & NPM installation, and end up with no themeing being apllied. The following is placed in my html head tag when trying the CDN install method: <link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/css/slate.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>I do the following to try the NPM install method: bun install postcss franken-ui
npx franken-ui init -pI then update the tailwind config with the following (note the templ extension): import franken from 'franken-ui/shadcn-ui/preset-quick';
/** @type {import('tailwindcss').Config} */
export default {
presets: [franken({ theme: "slate" })],
content: [
"./**/*.{html,js,templ}",
],
safelist: [
{
pattern: /^uk-/
}
],
theme: {
extend: {}
},
plugins: []
};And run the following to generate the final .css: npx tailwindcss -i ./input.css -o ./assets/css/styles.css --minifyBoth install methods, no matter what theme I pick, results in the default look: I am a bit of a rookie when it comes to npm, so I might just be doing something obviously wrong. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Your setup looks correct. But I think you forgot to send your HTML markup. Your button looks correct. So my hunch is there's some missing modifier? Anyway, try this gist I made. I use this for testing. |
Beta Was this translation helpful? Give feedback.
-
|
Arh sorry, here is a full html markup example. package views
templ Layout() {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="/assets/css/styles.css" rel="stylesheet"/> (this is the "compiled" css file from the commands)
<link href="/assets/css/fontawesome.css" rel="stylesheet"/>
<script src="/assets/js/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<title>Magi</title>
</head>
<body>
<a class="uk-button uk-button-default" href=""></a>
<button class="uk-button uk-button-default"></button>
<button class="uk-button uk-button-default" disabled></button>
</body>
</html>
}I'll give your example a try later today when I get the time, |
Beta Was this translation helpful? Give feedback.
-
|
Using your example as a guideline worked. The following is my code, in case someone else will be doing something similar (i just need to update it to not use the CDN's): package views
templ Layout(content templ.Component) {
<!DOCTYPE html>
<html lang="en" data-theme="dim">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="/assets/css/styles.css" rel="stylesheet"/>
<script src="/assets/js/htmx.min.js"></script>
<style>
:root {
font-family: Inter, sans-serif;
font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
:root {
font-family: InterVariable, sans-serif;
}
}
</style>
<script>
if (
localStorage.getItem("color-theme") === "dark" ||
(!("color-theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/js/wc.iife.js"></script>
<title>Magi</title>
</head>
<body class="bg-background text-foreground">
@navbar()
<div id="content" class="content uk-container uk-mx-auto mt-6">
@content
</div>
<script>
var themeToggleBtn = document.getElementById("theme-toggle");
themeToggleBtn?.addEventListener("click", function () {
// if set via local storage previously
if (localStorage.getItem("color-theme")) {
if (localStorage.getItem("color-theme") === "light") {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains("dark")) {
document.documentElement.classList.remove("dark");
localStorage.setItem("color-theme", "light");
} else {
document.documentElement.classList.add("dark");
localStorage.setItem("color-theme", "dark");
}
}
});
</script>
</body>
</html>
}
Thanks for the help! And what an awesome project 👍🏻 😄 |
Beta Was this translation helpful? Give feedback.
Your setup looks correct. But I think you forgot to send your HTML markup. Your button looks correct. So my hunch is there's some missing modifier? Anyway, try this gist I made. I use this for testing.
kitchen-sink.zip