LukeParke/skeleton
1
0
Fork 0
mirror of https://github.com/LukeHagar/skeleton.git synced 2025-12-09 20:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation for SvelteKit only, remove Vite and Astro onboarding

Browse Source
This commit is contained in:
endigo9740
2022-12-17 15:33:00 -06:00
parent 6ae5de195a
commit ba87938c4e
13 changed files with 155 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -7,7 +7,7 @@
# 💀 Skeleton # 💀 Skeleton
A fully featured Svelte UI toolkit for Svelte + Tailwind. Skeleton allows you to build fast and reactive web interfaces using the power of [Svelte](https://svelte.dev/) + [Tailwind CSS](https://tailwindcss.com/). Including official support for [SvelteKit](https://kit.svelte.dev/), [Vite](https://vitejs.dev/), and [Astro](https://astro.build/). A fully featured Svelte UI toolkit for Svelte + Tailwind. Skeleton allows you to build fast and reactive web interfaces using the power of [Svelte](https://svelte.dev/) + [Tailwind CSS](https://tailwindcss.com/). Including official support for [SvelteKit](https://kit.svelte.dev/).
## 🔗 Useful Links ## 🔗 Useful Links

68
src/app.html
View File

@@ -1,42 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="dark"> <html lang="en" class="dark">
<head>
<title>Skeleton — UI Toolkit for Svelte + Tailwind</title>
<!-- Meta Tags --> <head>
<meta charset="utf-8" /> <title>Skeleton — UI Toolkit for Svelte + Tailwind</title>
<meta
name="description"
content="Skeleton is a fully featured Svelte UI component library that allows you to build fast and reactive web UI using Svelte + Tailwind."
/>
<meta name="keywords" content="svelte, components, svelte components, ui components, sveltekit, vite, astro, framework" />
<meta name="theme-color" content="#22c55e" />
<!-- Open Graph - https://ogp.me/ --> <!-- Meta Tags -->
<meta content="Skeleton" property="og:site_name" /> <meta charset="utf-8" />
<meta content="website" property="og:type" /> <meta name="description"
<meta content="Skeleton is a fully featured Svelte UI component library that allows you to build fast and reactive web UI using Svelte + Tailwind." />
name="og:description" <meta name="keywords" content="svelte, components, svelte components, ui components, sveltekit." />
content="Skeleton is a fully featured Svelte UI component library that allows you to build fast and reactive web UI using Svelte + Tailwind." <meta name="theme-color" content="#22c55e" />
/>
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <!-- Open Graph - https://ogp.me/ -->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta content="Skeleton" property="og:site_name" />
%sveltekit.head% <meta content="website" property="og:type" />
</head> <meta name="og:description"
content="Skeleton is a fully featured Svelte UI component library that allows you to build fast and reactive web UI using Svelte + Tailwind." />
<body data-theme="skeleton"> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<div class="h-full overflow-hidden">%sveltekit.body%</div> <meta name="viewport" content="width=device-width, initial-scale=1" />
</body> %sveltekit.head%
</head>
<!-- Google tag (gtag.js) --> <body data-theme="skeleton">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DXDKKB8FHC"></script> <div class="h-full overflow-hidden">%sveltekit.body%</div>
<script> </body>
window.dataLayer = window.dataLayer || [];
function gtag() { <!-- Google tag (gtag.js) -->
dataLayer.push(arguments); <script async src="https://www.googletagmanager.com/gtag/js?id=G-DXDKKB8FHC"></script>
} <script>
gtag('js', new Date()); window.dataLayer = window.dataLayer || [];
gtag('config', 'G-DXDKKB8FHC'); function gtag() {
</script> dataLayer.push(arguments);
</html> }
gtag('js', new Date());
gtag('config', 'G-DXDKKB8FHC');
</script>
</html>

3
src/docs/DocsNavigation/links.ts
View File

@@ -26,7 +26,8 @@ export const menuNavLinks: any = [
{ href: '/guides/tailwind', label: 'Tailwind CSS' }, { href: '/guides/tailwind', label: 'Tailwind CSS' },
{ href: '/guides/themes', label: 'Themes' }, { href: '/guides/themes', label: 'Themes' },
{ href: '/guides/styling', label: 'Styling' }, { href: '/guides/styling', label: 'Styling' },
{ href: '/guides/frameworks', label: 'Frameworks' } // { href: '/guides/frameworks', label: 'Frameworks' }
{ href: '/guides/frameworks/sveltekit', label: 'Quickstart Guide' }
] ]
}, },

14
src/routes/(inner)/docs/faqs/+page.svelte
View File

@@ -50,10 +50,11 @@
</section> </section>
<section class="space-y-4"> <section class="space-y-4">
<h2>Where can I learn Svelte?</h2> <h2>Where can I learn Svelte and SvelteKit?</h2>
<p> <p>
We recommend the official <a href="https://svelte.dev/docs" target="_blank" rel="noreferrer">documentation</a> and We recommend the official <a href="https://svelte.dev/docs" target="_blank" rel="noreferrer">documentation</a> and
<a href="https://svelte.dev/tutorial/basics" target="_blank" rel="noreferrer">tutorial</a>. <a href="https://svelte.dev/tutorial/basics" target="_blank" rel="noreferrer">tutorial</a> for Svelte. As well as the official
<a href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">documentation</a> for SvelteKit.
</p> </p>
</section> </section>
@@ -65,15 +66,6 @@
</p> </p>
</section> </section>
<section class="space-y-4">
<h2>Where can I learn SvelteKit, Vite, or Astro?</h2>
<p>
We recommend the official documentation for <a href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">SvelteKit</a>,
<a href="https://vitejs.dev/" target="_blank" rel="noreferrer">Vite</a>, and
<a href="https://astro.build/" target="_blank" rel="noreferrer">Astro</a>.
</p>
</section>
<hr /> <hr />
<section class="text-center space-y-4"> <section class="text-center space-y-4">

5
src/routes/(inner)/guides/frameworks/+page.svelte
View File

@@ -1,3 +1,8 @@
<!--
NOTE FROM CHRIS:
I'm keeping but setting it to hidden in the navigation. The CLI kind of replaces the
need for most of this. We might also consider making the SvelteKit guide a blog post.
-->
<script lang="ts"> <script lang="ts">
// import { storeFramework } from '$docs/stores'; // import { storeFramework } from '$docs/stores';
import SvgIcon from '$lib/components/SvgIcon/SvgIcon.svelte'; import SvgIcon from '$lib/components/SvgIcon/SvgIcon.svelte';

37
src/routes/(inner)/guides/frameworks/sveltekit/+page.svelte
View File

@@ -1,49 +1,32 @@
<script lang="ts"> <script lang="ts">
import Breadcrumb from '$lib/components/Breadcrumb/Breadcrumb.svelte';
import Crumb from '$lib/components/Breadcrumb/Crumb.svelte';
import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte'; import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
</script> </script>
<div class="page-container"> <div class="page-container">
<!-- Breadcrumbs -->
<Breadcrumb>
<Crumb href="/guides/frameworks">Frameworks</Crumb>
<Crumb>SvelteKit</Crumb>
</Breadcrumb>
<!-- Header --> <!-- Header -->
<header> <header class="space-y-4">
<div class="grid grid-cols-[1fr_auto] gap-4"> <h1>Quickstart Guide</h1>
<div class="space-y-2"> <p>This following guide will walk you through the process of creating a basic Skeleton app using SvelteKit.</p>
<h1>SvelteKit</h1>
<p>This guide will help you create a basic Skeleton app within SvelteKit.</p>
</div>
<div class="place-self-end">
<a class="btn btn-filled-primary" href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">Documentation</a>
</div>
</div>
</header> </header>
<hr /> <hr />
<!-- Prereqs --> <!-- Prereqs -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Getting Started</h2> <h2>Get Started</h2>
<p>To begin, let's scaffold our project using the Skeleton CLI. We've listed the required settings.</p> <p>To begin, let's scaffold our project using the Skeleton CLI. Note that we've listed a couple required options for this guide.</p>
<CodeBlock <CodeBlock
language="console" language="console"
code={` code={`
npm create skeleton-app@latest my-skeleton-app npm create skeleton-app@latest my-skeleton-app
- Enable SvelteKit's Typescript syntax - Enable SvelteKit's Typescript syntax
- Select the "Skeleton Welcome" template - Select the "Welcome" template
cd my-skeleton-app cd my-skeleton-app
npm run dev npm run dev
`} `}
/> />
<p> <p>
By selecting the "Skeleton Welcome" template the project will come preconfigured with both the <a href="/components/app-shell" By selecting the "Welcome" template the project will come preconfigured with both an <a href="/components/app-shell">App Shell</a>
>App Shell</a
>
and <a href="/components/app-bar">App Bar</a> components in <code>/src/routes/+layout.svelte</code>. and <a href="/components/app-bar">App Bar</a> components in <code>/src/routes/+layout.svelte</code>.
</p> </p>
</section> </section>
@@ -53,13 +36,13 @@ npm run dev
<section class="space-y-4"> <section class="space-y-4">
<h2>Add Sidebar Navigation</h2> <h2>Add Sidebar Navigation</h2>
<p> <p>
Let's customize our App Shell's sidebar slot to make it stand out a bit more. Open <code>/src/routes/+layout.svelte</code> and add the Let's customize our App Shell's sidebar slot. Open <code>/src/routes/+layout.svelte</code> and add the following Tailwind utility
following Tailwind utility classes to App Shell component's <code>slotSidebarLeft</code> prop. classes to the AppShell <code>slotSidebarLeft</code> prop.
</p> </p>
<CodeBlock language="html" code={`<AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">`} /> <CodeBlock language="html" code={`<AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">`} />
<p> <p>
Next, let's implement a <a href="/elements/lists">navigation list</a> within the App Shell's left sidebar slot. Append this slot Next, let's implement a <a href="/elements/lists">navigation list</a> within the App Shell's left sidebar slot. Append this slot
fragement anywhere within <code>AppShell</code>. fragement alongside any other fragment within the <code>AppShell</code>.
</p> </p>
<CodeBlock <CodeBlock
language="html" language="html"

98
src/routes/(inner)/guides/install/+page.svelte
View File

@@ -1,7 +1,14 @@
<script lang="ts"> <script lang="ts">
import { storeFramework } from '$docs/stores'; import { storeFramework } from '$docs/stores';
import { TabGroup, Tab } from '@skeletonlabs/skeleton'; import { TabGroup, Tab, Alert } from '@skeletonlabs/skeleton';
import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte'; import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
// ******** TEMPORARY FIX ********
// TODO: Remove this after this has run in production for a few weeks
// Added December 17, 2022 by Chris
if (!['cli', 'manual'].includes($storeFramework)) {
storeFramework.set('cli');
}
</script> </script>
<div class="page-container"> <div class="page-container">
@@ -9,10 +16,9 @@
<h1>Installation</h1> <h1>Installation</h1>
<!-- prettier-ignore --> <!-- prettier-ignore -->
<p> <p>
Let's set up our project and install Skeleton. For best results, we recommend you have at least moderate experience Let's scaffold a new Skeleton project. For best results, we recommend you have at least moderate experience
with <a href="https://svelte.dev/tutorial/basics" target="_blank" rel="noreferrer">Svelte</a>, with <a href="https://svelte.dev/tutorial/basics" target="_blank" rel="noreferrer">Svelte and SvelteKit</a> and
<a href="https://tailwindcss.com/docs/utility-first" target="_blank" rel="noreferrer">Tailwind CSS</a>, and any <a href="https://tailwindcss.com/docs/utility-first" target="_blank" rel="noreferrer">Tailwind CSS</a>. If you have questions or encounter issues please refer to our <a href="/docs/faqs">FAQ</a>.
supported frameworks listed below. If you encounter issues, please refer to our <a href="/docs/faqs">frequently asked questions</a> section.
</p> </p>
</header> </header>
@@ -20,94 +26,56 @@
<section class="space-y-4"> <section class="space-y-4">
<!-- Tabs --> <!-- Tabs -->
<TabGroup selected={storeFramework}> <TabGroup selected={storeFramework}>
<Tab value="sveltekit">SvelteKit</Tab> <Tab value="cli">Skeleton CLI</Tab>
<Tab value="vite">Vite (Svelte)</Tab> <Tab value="manual">Manual Install</Tab>
<Tab value="astro">Astro</Tab>
</TabGroup> </TabGroup>
<!-- Framework: SvelteKit --> {#if $storeFramework === 'cli'}
{#if $storeFramework === 'sveltekit'} <p>
<p>We provide an interactive CLI app to scaffold SvelteKit and automatically configure Skeleton. PNPM and Yarn are also supported.</p> We provide an interactive CLI app to scaffold a new SvelteKit project and automatically configure Skeleton. Note that PNPM and Yarn
are supported.
</p>
<CodeBlock <CodeBlock
language="console" language="console"
code={` code={`
npm create skeleton-app@latest my-skeleton-app npm create skeleton-app@latest my-skeleton-app
- Enable SvelteKit's Typescript syntax - Enable SvelteKit's Typescript syntax (recommended)
cd my-skeleton-app cd my-skeleton-app
npm run dev npm run dev -- --open
`} `}
/> />
<p> <p>
The CLI is a great starting point, however, we encourage you to read through the the additional guides to learn more about how Please continue through the additional guide sections to learn how the CLI has configures your app, how to set a custom theme, and
Skeleton is configured. how to style elements.
</p> </p>
<ul class="list-disc list-inside space-y-1"> {:else if $storeFramework === 'manual'}
<li>Review the Tailwind configuration and optionally install Tailwind Plugins.</li> <!-- prettier-ignore -->
<li>Learn more about Skeleton themes, as well as how to implement a custom theme.</li>
<li>See how stylesheets are imported, and how to customize components and other features.</li>
<li>Finally, we've provided an optional guide for creating a basic demo app.</li>
</ul>
<!-- Framework: Vite (Svelte) -->
{:else if $storeFramework === 'vite'}
<p> <p>
View the <a href="https://vitejs.dev/guide/#scaffolding-your-first-vite-project" target="_blank" rel="noreferrer" If you're migrating from an existing SvelteKit project please refer to the <a href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">official documentation</a> for creating a new SvelteKit project.
>official documentation</a
> for the latest instructions.
</p> </p>
<CodeBlock <CodeBlock
language="console" language="console"
code={` code={`
npm create vite@latest my-skeleton-app -- --template svelte-ts npm create svelte@latest my-skeleton-app
cd my-skeleton-app cd my-skeleton-app
npm install npm install
npm run dev -- --open
`} `}
/> />
<!-- Framework: Astro --> <!-- Install Skeleton -->
{:else if $storeFramework === 'astro'}
<p>
View the <a href="https://docs.astro.build/en/install/auto/" target="_blank" rel="noreferrer">official documentation</a> for the latest
instructions.
</p>
<CodeBlock
language="console"
code={`
npm create astro@latest my-skeleton-app
- Create an empty project
- Install all dependencies
- Use 'Typescript: Strict'
cd my-skeleton-app
`}
/>
<!-- Svelte -->
<h2>Install Svelte</h2>
<p>
Add Svelte integration via <a href="https://docs.astro.build/en/guides/integrations-guide/svelte/" target="_blank" rel="noreferrer"
>@astrojs/svelte</a
>
</p>
<CodeBlock language="console" code={`npx astro add svelte`} />
{/if}
</section>
<!-- Install Skeleton -->
{#if $storeFramework !== 'sveltekit'}
<section class="space-y-4">
<h2>Install Skeleton</h2> <h2>Install Skeleton</h2>
<!-- prettier-ignore -->
<p> <p>
Install the core Skeleton package from <a Install the core <a href="https://www.npmjs.com/package/@skeletonlabs/skeleton" target="_blank" rel="noreferrer">Skeleton package</a>.
href="https://www.npmjs.com/package/@skeletonlabs/skeleton"
target="_blank"
rel="noreferrer">NPM</a
>.
</p> </p>
<CodeBlock language="console" code={`npm i @skeletonlabs/skeleton --save-dev`} /> <CodeBlock language="console" code={`npm i @skeletonlabs/skeleton --save-dev`} />
</section> {/if}
{/if} </section>
<hr /> <hr />
<!-- Next Steps --> <!-- Next Steps -->
<div class="card p-4 !flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4"> <div class="card p-4 !flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
<p>Next, let's configure Tailwind for use with Skeleton.</p> <p>Next, let's review configuration options Skeleton and Tailwind.</p>
<a class="btn btn-filled-primary" href="/guides/tailwind"> <a class="btn btn-filled-primary" href="/guides/tailwind">
<span>Tailwind</span> <span>Tailwind</span>
<span>&rarr;</span> <span>&rarr;</span>

91
src/routes/(inner)/guides/styling/+page.svelte
View File

@@ -161,27 +161,14 @@
<!-- Stylesheets --> <!-- Stylesheets -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Skeleton Stylesheets</h2> <h2>Skeleton Stylesheets</h2>
<p>
Skeleton provides a set of stylesheets for elements and components. Import these in your app's root layout per your preferred
framework.
</p>
<TabGroup selected={storeFramework}> <TabGroup selected={storeFramework}>
<Tab value="sveltekit">SvelteKit</Tab> <Tab value="cli">Skeleton CLI</Tab>
<Tab value="vite">Vite (Svelte)</Tab> <Tab value="manual">Manual Install</Tab>
<Tab value="astro">Astro</Tab>
</TabGroup> </TabGroup>
<!-- Framework: SvelteKit --> {#if $storeFramework === 'cli'}
{#if $storeFramework === 'sveltekit'}
<p>The CLI will automatically import <code>all.css</code> into <code>src/routes/+layout.svelte</code>.</p> <p>The CLI will automatically import <code>all.css</code> into <code>src/routes/+layout.svelte</code>.</p>
<!-- Framework: Vite (Svelte) --> {:else if $storeFramework === 'manual'}
{:else if $storeFramework === 'vite'} <p>For most users we recommend importing <code>all.css</code> into <code>src/routes/+layout.svelte</code>.</p>
<p>Import stylesheets in <code>/src/main.js</code>.</p>
<!-- Framework: Astro -->
{:else if $storeFramework === 'astro'}
<p>
Astro does not provide a layout by default, but we recommend <code>/src/layouts/LayoutRoot.astro</code>. See our
<a href="/guides/frameworks/astro">See our Astro walkthrough</a> for assistance.
</p>
{/if} {/if}
<CodeBlock <CodeBlock
language="typescript" language="typescript"
@@ -224,44 +211,36 @@ import '@skeletonlabs/skeleton/styles/${$storeStylesheets === 'recommended' ? 'a
<!-- Global Styles --> <!-- Global Styles -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Global Stylesheet</h2> <h2>Global Stylesheet</h2>
<p>The location of your app's global stylesheet differs per framework.</p>
<TabGroup selected={storeFramework}> <TabGroup selected={storeFramework}>
<Tab value="sveltekit">SvelteKit</Tab> <Tab value="cli">Skeleton CLI</Tab>
<Tab value="vite">Vite (Svelte)</Tab> <Tab value="manual">Manual Install</Tab>
<Tab value="astro">Astro</Tab>
</TabGroup> </TabGroup>
{#if $storeFramework === 'sveltekit'} {#if $storeFramework === 'cli'}
<p> <p>
Your global stylesheet is located in <code>/src/app.postcss</code>. The CLI will automatically purge SvelteKit's global stylesheet is located in <code>/src/app.postcss</code>. The CLI will automatically purge
<a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank" rel="noreferrer">@tailwind directives</a> from Svelte-Add <a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank" rel="noreferrer">@tailwind directives</a> from Svelte-Add
and add any required styles. and add required styles.
</p> </p>
{:else if $storeFramework === 'vite'} {:else if $storeFramework === 'manual'}
<p>Your global stylesheet is located in <code>/src/app.css</code>.</p>
<Alert> <Alert>
<svelte:fragment slot="lead"><span class="text-xl">⚠️</span></svelte:fragment> <svelte:fragment slot="lead"><span class="text-xl">⚠️</span></svelte:fragment>
The following step is required. This will ensures all styles display properly. The following step is <strong>REQUIRED</strong> to ensure your styles display properly in your application.
</Alert> </Alert>
<!-- Directives -->
<p> <p>
<strong>Svelte-Add</strong> automatically includes SvelteKit's global stylesheet is located in <code>/src/app.postcss</code>. <strong>Svelte-Add</strong> automatically includes
<a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank" rel="noreferrer">@tailwind directives</a> in your global <a href="https://tailwindcss.com/docs/functions-and-directives" target="_blank" rel="noreferrer">@tailwind directives</a> in your
stylesheet. However, Skeleton handles this for you, so please remove the following: global stylesheet. However, Skeleton imports these for you via <code>all.css</code>. Including these twice can cause issues, so
please remove the following from your global stylesheet.
</p> </p>
<CodeBlock <CodeBlock
language="css" language="css"
code={` code={`
/* NOTE: If present, remove any @tailwind directives: */\n /* NOTE: If present, remove the following @tailwind directives: */\n
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
`} `}
/> />
{:else if $storeFramework === 'astro'}
<p>
Astro does not create this by default, but we recommend <code>/src/styles/global.css</code>.
<a href="/guides/frameworks/astro">See our Astro walkthrough</a> for assistance.
</p>
{/if} {/if}
</section> </section>
@@ -270,18 +249,15 @@ import '@skeletonlabs/skeleton/styles/${$storeStylesheets === 'recommended' ? 'a
<!-- Required Order --> <!-- Required Order -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Import Order</h2> <h2>Import Order</h2>
<p> <p>Skeleton has strict requirements for stylesheet import order. We've explained the purpose of each stylesheet below.</p>
Skeleton has strict requirements for stylesheet import order. Please ensure your imports conform to the following order before you
continue.
</p>
<Table source={tableStylesheetOrder} /> <Table source={tableStylesheetOrder} />
<p>We've provided an example below for reference.</p> <p>See the reference below. Please ensure your imports conform to the following order before you continue.</p>
<CodeBlock <CodeBlock
language="ts" language="ts"
code={` code={`
import '@skeletonlabs/skeleton/themes/theme-skeleton.css'; import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
import '@skeletonlabs/skeleton/styles/all.css'; import '@skeletonlabs/skeleton/styles/all.css';
import '../app.postcss'; // Substitute with your framework's global stylesheet import '../app.postcss';
`} `}
/> />
</section> </section>
@@ -363,11 +339,24 @@ import '../app.postcss'; // Substitute with your framework's global stylesheet
<hr /> <hr />
<!-- Next Steps --> <!-- Next Steps -->
<div class="card p-4 !flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4"> <section class="space-y-4">
<p>View the <u>optional walkthroughs</u> for creating an example app using Skeleton.</p> <h2>What's Next?</h2>
<a class="btn btn-filled-primary" href="/guides/frameworks"> <p>Choose your own adventure. We recommend you review each section listed below.</p>
<span>Framework Guides</span> <div class="card p-4 card-glass-accent space-y-4">
<span>&rarr;</span> <div class="!flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
</a> <p>Learn more about Skeleton's Tailwind features.</p>
</div> <a class="btn btn-ghost-surface" href="/elements/tokens">Tailwind Features &rarr;</a>
</div>
<hr class="opacity-30" />
<div class="!flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
<p>Learn more about Skeleton's Svelte features.</p>
<a class="btn btn-ghost-surface" href="/actions/clipboard">Svelte Features &rarr;</a>
</div>
<hr class="opacity-30" />
<div class="!flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
<p>Learn more about Skeleton's utility features.</p>
<a class="btn btn-ghost-surface" href="/utilities/codeblocks">Utility Features &rarr;</a>
</div>
</div>
</section>
</div> </div>

41
src/routes/(inner)/guides/tailwind/+page.svelte
View File

@@ -14,35 +14,27 @@
Skeleton features tight integration with <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer">Tailwind CSS</a>. Let's Skeleton features tight integration with <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer">Tailwind CSS</a>. Let's
install Tailwind and configure all required settings. install Tailwind and configure all required settings.
</p> </p>
</header>
<!-- Tailwind Install -->
<section class="space-y-8">
<TabGroup selected={storeFramework}> <TabGroup selected={storeFramework}>
<Tab value="sveltekit">SvelteKit</Tab> <Tab value="cli">Skeleton CLI</Tab>
<Tab value="vite">Vite (Svelte)</Tab> <Tab value="manual">Manual Install</Tab>
<Tab value="astro">Astro</Tab>
</TabGroup> </TabGroup>
{#if $storeFramework === 'sveltekit'} {#if $storeFramework === 'cli'}
<p> <p>
The CLI will automatically run <a href="https://github.com/svelte-add/tailwindcss" target="_blank" rel="noreferrer">Svelte-Add</a>, The CLI will automatically run <a href="https://github.com/svelte-add/tailwindcss" target="_blank" rel="noreferrer">Svelte-Add</a>,
which will install and configure Tailwind in your SvelteKit project. which will install and configure Tailwind in your SvelteKit project.
</p> </p>
{:else if $storeFramework === 'vite'} {:else if $storeFramework === 'manual'}
<p> <p>
<a href="https://github.com/svelte-add/tailwindcss" target="_blank" rel="noreferrer">Svelte-Add</a> makes it trivial to install and setup <a href="https://github.com/svelte-add/tailwindcss" target="_blank" rel="noreferrer">Svelte-Add</a> makes it trivial to install and setup
Tailwind. They provide options for including some Tailwind Plugins. Tailwind. Run the following command in your terminal.
</p> </p>
<CodeBlock language="console" code={`npx svelte-add@latest tailwindcss\nnpm install`} /> <CodeBlock language="console" code={`npx svelte-add@latest tailwindcss\nnpm install`} />
{:else if $storeFramework === 'astro'}
<p>
Add Tailwind integration via <a
href="https://docs.astro.build/en/guides/integrations-guide/tailwind/"
target="_blank"
rel="noreferrer">@astrojs/tailwind</a
>
</p>
<CodeBlock language="console" code={`npx astro add tailwind`} />
{/if} {/if}
</header> </section>
<hr />
<!-- Usage --> <!-- Usage -->
<section class="space-y-8"> <section class="space-y-8">
@@ -53,11 +45,6 @@
directory. directory.
</p> </p>
</div> </div>
<TabGroup selected={storeFramework}>
<Tab value="sveltekit">SvelteKit</Tab>
<Tab value="vite">Vite (Svelte)</Tab>
<Tab value="astro">Astro</Tab>
</TabGroup>
<div class="space-y-4"> <div class="space-y-4">
<h3>Enabled Dark Mode Support</h3> <h3>Enabled Dark Mode Support</h3>
<p> <p>
@@ -68,7 +55,7 @@
<CodeBlock <CodeBlock
language="js" language="js"
code={` code={`
${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = { const config = {
darkMode: 'class', darkMode: 'class',
// ... // ...
} }
@@ -84,7 +71,7 @@ ${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
<CodeBlock <CodeBlock
language="js" language="js"
code={` code={`
${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = { const config = {
// ... // ...
content: [ content: [
// Keep existing values and append the following: // Keep existing values and append the following:
@@ -104,7 +91,7 @@ ${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
<CodeBlock <CodeBlock
language="js" language="js"
code={` code={`
${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = { const config = {
// ... // ...
plugins: [ plugins: [
// Keep any existing plugins present and append the following: // Keep any existing plugins present and append the following:
@@ -157,7 +144,7 @@ ${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
<!-- Next Steps --> <!-- Next Steps -->
<div class="card p-4 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4"> <div class="card p-4 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0 md:space-x-4">
<p>Next, let's implement a Skeleton theme.</p> <p>Next, review our options for implementing Skeleton themes.</p>
<a class="btn btn-filled-primary" href="/guides/themes">Themes &rarr;</a> <a class="btn btn-filled-primary" href="/guides/themes">Themes &rarr;</a>
</div> </div>
</div> </div>

27
src/routes/(inner)/guides/themes/+page.svelte
View File

@@ -98,32 +98,21 @@
</div> </div>
<!-- Implement --> <!-- Implement -->
<TabGroup selected={storeFramework}> <TabGroup selected={storeFramework}>
<Tab value="sveltekit">SvelteKit</Tab> <Tab value="cli">Skeleton CLI</Tab>
<Tab value="vite">Vite (Svelte)</Tab> <Tab value="manual">Manual Install</Tab>
<Tab value="astro">Astro</Tab>
</TabGroup> </TabGroup>
<!-- Framework: SvelteKit --> {#if $storeFramework === 'cli'}
{#if $storeFramework === 'sveltekit'}
<p> <p>
The CLI will automatically import your selected theme into <code>src/routes/+layout.svelte</code> before your global stylesheet. You The CLI will automatically import your selected theme into <code>src/routes/+layout.svelte</code> before your global stylesheet. You
may change this at any time. may change this at any time.
</p> </p>
<CodeBlock {:else if $storeFramework === 'manual'}
language="typescript"
code={`import '@skeletonlabs/skeleton/themes/theme-skeleton.css'; // <--\nimport '../app.postcss';\n`}
/>
<!-- Framework: Vite (Svelte) -->
{:else if $storeFramework === 'vite'}
<p>Import your desired preset into <code>/src/main.js</code> before your global stylesheet.</p> <p>Import your desired preset into <code>/src/main.js</code> before your global stylesheet.</p>
<CodeBlock language="typescript" code={`import '@skeletonlabs/skeleton/themes/theme-{name}.css'; // <--\nimport '../app.css';\n`} />
<!-- Framework: Astro -->
{:else if $storeFramework === 'astro'}
<p>
Astro does not provide a root layout by default, but we recommend creating <code>/src/layouts/LayoutRoot.astro</code>. See our
<a href="/guides/frameworks/astro">See our Astro walkthrough</a> for assistance.
</p>
<CodeBlock language="typescript" code={`import '@skeletonlabs/skeleton/themes/theme-{name}.css'; // <--`} />
{/if} {/if}
<CodeBlock
language="typescript"
code={`import '@skeletonlabs/skeleton/themes/theme-skeleton.css'; // <--\nimport '../app.postcss';\n`}
/>
</div> </div>
<hr /> <hr />

27
src/routes/(inner)/guides/themes/generator/+page.svelte
View File

@@ -34,28 +34,11 @@
<!-- Instructions --> <!-- Instructions -->
<section class="space-y-4"> <section class="space-y-4">
<h2>Importing Your Theme</h2> <h2>Importing Your Theme</h2>
<TabGroup selected={storeFramework}> <p>
<Tab value="sveltekit">SvelteKit</Tab> Copy and paste your theme CSS into <code>/src/theme.postcss</code>, then in<code>/src/routes/+layout.svelte</code> remove any preset theme,
<Tab value="vite">Vite (Svelte)</Tab> then replace with your custom theme.
<Tab value="astro">Astro</Tab> </p>
</TabGroup> <CodeBlock language="typescript" code={`import '../theme.postcss'; // <--\nimport '../app.postcss';\n`} />
{#if $storeFramework === 'sveltekit'}
<p>
Copy and paste your theme CSS into <code>/src/theme.postcss</code>, then in<code>/src/routes/+layout.svelte</code> remove any preset
theme and replace with your theme.
</p>
<CodeBlock language="typescript" code={`import '../theme.postcss';`} />
{:else if $storeFramework === 'vite'}
<p>Copy and paste your theme CSS into <code>/src/theme.css</code>, then import it in <code>/src/main.js</code>:</p>
<CodeBlock language="typescript" code={`import '../theme.css';`} />
{:else if $storeFramework === 'astro'}
<p>
Copy and paste your theme CSS into <code>/src/styles/theme.css</code>, then import it in
<code>/src/layouts/LayoutBasic.astro</code>.
</p>
<CodeBlock language="typescript" code={`import '../styles/theme.css';`} />
{/if}
<p>Import this <u>before</u> your global stylesheet.</p>
</section> </section>
<hr /> <hr />

10
src/routes/+layout.svelte
View File

@@ -8,7 +8,6 @@
// SvelteKit Imports // SvelteKit Imports
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { onMount } from 'svelte';
import { afterNavigate } from '$app/navigation'; import { afterNavigate } from '$app/navigation';
// Stores // Stores
@@ -58,15 +57,6 @@
document.body.setAttribute('data-theme', $storePreview ? 'generator' : $storeTheme); document.body.setAttribute('data-theme', $storePreview ? 'generator' : $storeTheme);
} }
// Lifecycle Events
onMount(() => {
// TEMPORARY FIX FOR: https://github.com/skeletonlabs/skeleton/issues/489
const lsTailwindPallete = window.localStorage.getItem('storeTailwindPalette');
if (lsTailwindPallete?.includes('ternary')) {
console.log('TEMP FIX: LocalStorage Values Cleared. This should only ever run once!');
window.localStorage.clear();
}
});
afterNavigate((params: any) => { afterNavigate((params: any) => {
// Store current page route URL // Store current page route URL
storeCurrentUrl.set($page.url.pathname); storeCurrentUrl.set($page.url.pathname);

6
src/routes/+page.svelte
View File

@@ -67,11 +67,7 @@
</div> </div>
<h4>Svelte Integration</h4> <h4>Svelte Integration</h4>
<p> <p>
Tightly coupled with Svelte, including full support for <a href="https://kit.svelte.dev/" target="_blank" rel="noreferrer" Tightly coupled support for Svelte using the <a href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">SvelteKit</a> app framework.
>SvelteKit</a
>,
<a href="https://vitejs.dev/" target="_blank" rel="noreferrer">Vite</a>, and
<a href="https://astro.build/" target="_blank" rel="noreferrer">Astro</a>.
</p> </p>
</div> </div>
<div class="card card-glass-accent p-4 text-center space-y-4"> <div class="card card-glass-accent p-4 text-center space-y-4">