mirror of
https://github.com/LukeHagar/skeleton.git
synced 2025-12-09 20:57:45 +00:00
Update documentation for SvelteKit only, remove Vite and Astro onboarding
This commit is contained in:
endigo9740
@@ -7,7 +7,7 @@
|
||||
|
||||
# 💀 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
|
||||
|
||||
|
||||
32
src/app.html
32
src/app.html
@@ -1,42 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<title>Skeleton — UI Toolkit for Svelte + Tailwind</title>
|
||||
|
||||
<!-- Meta Tags -->
|
||||
<meta charset="utf-8" />
|
||||
<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="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." />
|
||||
<meta name="theme-color" content="#22c55e" />
|
||||
|
||||
<!-- Open Graph - https://ogp.me/ -->
|
||||
<meta content="Skeleton" property="og:site_name" />
|
||||
<meta content="website" property="og:type" />
|
||||
<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."
|
||||
/>
|
||||
<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." />
|
||||
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body data-theme="skeleton">
|
||||
<body data-theme="skeleton">
|
||||
<div class="h-full overflow-hidden">%sveltekit.body%</div>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DXDKKB8FHC"></script>
|
||||
<script>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DXDKKB8FHC"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-DXDKKB8FHC');
|
||||
</script>
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -26,7 +26,8 @@ export const menuNavLinks: any = [
|
||||
{ href: '/guides/tailwind', label: 'Tailwind CSS' },
|
||||
{ href: '/guides/themes', label: 'Themes' },
|
||||
{ href: '/guides/styling', label: 'Styling' },
|
||||
{ href: '/guides/frameworks', label: 'Frameworks' }
|
||||
// { href: '/guides/frameworks', label: 'Frameworks' }
|
||||
{ href: '/guides/frameworks/sveltekit', label: 'Quickstart Guide' }
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
@@ -50,10 +50,11 @@
|
||||
</section>
|
||||
|
||||
<section class="space-y-4">
|
||||
<h2>Where can I learn Svelte?</h2>
|
||||
<h2>Where can I learn Svelte and SvelteKit?</h2>
|
||||
<p>
|
||||
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>
|
||||
</section>
|
||||
|
||||
@@ -65,15 +66,6 @@
|
||||
</p>
|
||||
</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 />
|
||||
|
||||
<section class="text-center space-y-4">
|
||||
|
||||
@@ -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">
|
||||
// import { storeFramework } from '$docs/stores';
|
||||
import SvgIcon from '$lib/components/SvgIcon/SvgIcon.svelte';
|
||||
|
||||
@@ -1,49 +1,32 @@
|
||||
<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';
|
||||
</script>
|
||||
|
||||
<div class="page-container">
|
||||
<!-- Breadcrumbs -->
|
||||
<Breadcrumb>
|
||||
<Crumb href="/guides/frameworks">Frameworks</Crumb>
|
||||
<Crumb>SvelteKit</Crumb>
|
||||
</Breadcrumb>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="grid grid-cols-[1fr_auto] gap-4">
|
||||
<div class="space-y-2">
|
||||
<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 class="space-y-4">
|
||||
<h1>Quickstart Guide</h1>
|
||||
<p>This following guide will walk you through the process of creating a basic Skeleton app using SvelteKit.</p>
|
||||
</header>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Prereqs -->
|
||||
<section class="space-y-4">
|
||||
<h2>Getting Started</h2>
|
||||
<p>To begin, let's scaffold our project using the Skeleton CLI. We've listed the required settings.</p>
|
||||
<h2>Get Started</h2>
|
||||
<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
|
||||
language="console"
|
||||
code={`
|
||||
npm create skeleton-app@latest my-skeleton-app
|
||||
- Enable SvelteKit's Typescript syntax
|
||||
- Select the "Skeleton Welcome" template
|
||||
- Select the "Welcome" template
|
||||
cd my-skeleton-app
|
||||
npm run dev
|
||||
`}
|
||||
/>
|
||||
<p>
|
||||
By selecting the "Skeleton Welcome" template the project will come preconfigured with both the <a href="/components/app-shell"
|
||||
>App Shell</a
|
||||
>
|
||||
By selecting the "Welcome" template the project will come preconfigured with both an <a href="/components/app-shell">App Shell</a>
|
||||
and <a href="/components/app-bar">App Bar</a> components in <code>/src/routes/+layout.svelte</code>.
|
||||
</p>
|
||||
</section>
|
||||
@@ -53,13 +36,13 @@ npm run dev
|
||||
<section class="space-y-4">
|
||||
<h2>Add Sidebar Navigation</h2>
|
||||
<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
|
||||
following Tailwind utility classes to App Shell component's <code>slotSidebarLeft</code> prop.
|
||||
Let's customize our App Shell's sidebar slot. Open <code>/src/routes/+layout.svelte</code> and add the following Tailwind utility
|
||||
classes to the AppShell <code>slotSidebarLeft</code> prop.
|
||||
</p>
|
||||
<CodeBlock language="html" code={`<AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">`} />
|
||||
<p>
|
||||
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>
|
||||
<CodeBlock
|
||||
language="html"
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
<script lang="ts">
|
||||
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';
|
||||
|
||||
// ******** 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>
|
||||
|
||||
<div class="page-container">
|
||||
@@ -9,10 +16,9 @@
|
||||
<h1>Installation</h1>
|
||||
<!-- prettier-ignore -->
|
||||
<p>
|
||||
Let's set up our project and install Skeleton. 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>,
|
||||
<a href="https://tailwindcss.com/docs/utility-first" target="_blank" rel="noreferrer">Tailwind CSS</a>, and any
|
||||
supported frameworks listed below. If you encounter issues, please refer to our <a href="/docs/faqs">frequently asked questions</a> section.
|
||||
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 and SvelteKit</a> and
|
||||
<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>.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
@@ -20,94 +26,56 @@
|
||||
<section class="space-y-4">
|
||||
<!-- Tabs -->
|
||||
<TabGroup selected={storeFramework}>
|
||||
<Tab value="sveltekit">SvelteKit</Tab>
|
||||
<Tab value="vite">Vite (Svelte)</Tab>
|
||||
<Tab value="astro">Astro</Tab>
|
||||
<Tab value="cli">Skeleton CLI</Tab>
|
||||
<Tab value="manual">Manual Install</Tab>
|
||||
</TabGroup>
|
||||
<!-- Framework: SvelteKit -->
|
||||
{#if $storeFramework === 'sveltekit'}
|
||||
<p>We provide an interactive CLI app to scaffold SvelteKit and automatically configure Skeleton. PNPM and Yarn are also supported.</p>
|
||||
{#if $storeFramework === 'cli'}
|
||||
<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
|
||||
language="console"
|
||||
code={`
|
||||
npm create skeleton-app@latest my-skeleton-app
|
||||
- Enable SvelteKit's Typescript syntax
|
||||
- Enable SvelteKit's Typescript syntax (recommended)
|
||||
cd my-skeleton-app
|
||||
npm run dev
|
||||
npm run dev -- --open
|
||||
`}
|
||||
/>
|
||||
<p>
|
||||
The CLI is a great starting point, however, we encourage you to read through the the additional guides to learn more about how
|
||||
Skeleton is configured.
|
||||
Please continue through the additional guide sections to learn how the CLI has configures your app, how to set a custom theme, and
|
||||
how to style elements.
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<li>Review the Tailwind configuration and optionally install Tailwind Plugins.</li>
|
||||
<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'}
|
||||
{:else if $storeFramework === 'manual'}
|
||||
<!-- prettier-ignore -->
|
||||
<p>
|
||||
View the <a href="https://vitejs.dev/guide/#scaffolding-your-first-vite-project" target="_blank" rel="noreferrer"
|
||||
>official documentation</a
|
||||
> for the latest instructions.
|
||||
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.
|
||||
</p>
|
||||
<CodeBlock
|
||||
language="console"
|
||||
code={`
|
||||
npm create vite@latest my-skeleton-app -- --template svelte-ts
|
||||
npm create svelte@latest my-skeleton-app
|
||||
cd my-skeleton-app
|
||||
npm install
|
||||
npm run dev -- --open
|
||||
`}
|
||||
/>
|
||||
<!-- Framework: Astro -->
|
||||
{: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>
|
||||
<!-- prettier-ignore -->
|
||||
<p>
|
||||
Install the core Skeleton package from <a
|
||||
href="https://www.npmjs.com/package/@skeletonlabs/skeleton"
|
||||
target="_blank"
|
||||
rel="noreferrer">NPM</a
|
||||
>.
|
||||
Install the core <a href="https://www.npmjs.com/package/@skeletonlabs/skeleton" target="_blank" rel="noreferrer">Skeleton package</a>.
|
||||
</p>
|
||||
<CodeBlock language="console" code={`npm i @skeletonlabs/skeleton --save-dev`} />
|
||||
</section>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- 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">
|
||||
<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">
|
||||
<span>Tailwind</span>
|
||||
<span>→</span>
|
||||
|
||||
@@ -161,27 +161,14 @@
|
||||
<!-- Stylesheets -->
|
||||
<section class="space-y-4">
|
||||
<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}>
|
||||
<Tab value="sveltekit">SvelteKit</Tab>
|
||||
<Tab value="vite">Vite (Svelte)</Tab>
|
||||
<Tab value="astro">Astro</Tab>
|
||||
<Tab value="cli">Skeleton CLI</Tab>
|
||||
<Tab value="manual">Manual Install</Tab>
|
||||
</TabGroup>
|
||||
<!-- Framework: SvelteKit -->
|
||||
{#if $storeFramework === 'sveltekit'}
|
||||
{#if $storeFramework === 'cli'}
|
||||
<p>The CLI will automatically import <code>all.css</code> into <code>src/routes/+layout.svelte</code>.</p>
|
||||
<!-- Framework: Vite (Svelte) -->
|
||||
{:else if $storeFramework === 'vite'}
|
||||
<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>
|
||||
{:else if $storeFramework === 'manual'}
|
||||
<p>For most users we recommend importing <code>all.css</code> into <code>src/routes/+layout.svelte</code>.</p>
|
||||
{/if}
|
||||
<CodeBlock
|
||||
language="typescript"
|
||||
@@ -224,44 +211,36 @@ import '@skeletonlabs/skeleton/styles/${$storeStylesheets === 'recommended' ? 'a
|
||||
<!-- Global Styles -->
|
||||
<section class="space-y-4">
|
||||
<h2>Global Stylesheet</h2>
|
||||
<p>The location of your app's global stylesheet differs per framework.</p>
|
||||
<TabGroup selected={storeFramework}>
|
||||
<Tab value="sveltekit">SvelteKit</Tab>
|
||||
<Tab value="vite">Vite (Svelte)</Tab>
|
||||
<Tab value="astro">Astro</Tab>
|
||||
<Tab value="cli">Skeleton CLI</Tab>
|
||||
<Tab value="manual">Manual Install</Tab>
|
||||
</TabGroup>
|
||||
{#if $storeFramework === 'sveltekit'}
|
||||
{#if $storeFramework === 'cli'}
|
||||
<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
|
||||
and add any required styles.
|
||||
and add required styles.
|
||||
</p>
|
||||
{:else if $storeFramework === 'vite'}
|
||||
<p>Your global stylesheet is located in <code>/src/app.css</code>.</p>
|
||||
{:else if $storeFramework === 'manual'}
|
||||
<Alert>
|
||||
<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>
|
||||
<!-- Directives -->
|
||||
<p>
|
||||
<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
|
||||
stylesheet. However, Skeleton handles this for you, so please remove the following:
|
||||
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 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>
|
||||
<CodeBlock
|
||||
language="css"
|
||||
code={`
|
||||
/* NOTE: If present, remove any @tailwind directives: */\n
|
||||
/* NOTE: If present, remove the following @tailwind directives: */\n
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@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}
|
||||
</section>
|
||||
|
||||
@@ -270,18 +249,15 @@ import '@skeletonlabs/skeleton/styles/${$storeStylesheets === 'recommended' ? 'a
|
||||
<!-- Required Order -->
|
||||
<section class="space-y-4">
|
||||
<h2>Import Order</h2>
|
||||
<p>
|
||||
Skeleton has strict requirements for stylesheet import order. Please ensure your imports conform to the following order before you
|
||||
continue.
|
||||
</p>
|
||||
<p>Skeleton has strict requirements for stylesheet import order. We've explained the purpose of each stylesheet below.</p>
|
||||
<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
|
||||
language="ts"
|
||||
code={`
|
||||
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
|
||||
import '@skeletonlabs/skeleton/styles/all.css';
|
||||
import '../app.postcss'; // Substitute with your framework's global stylesheet
|
||||
import '../app.postcss';
|
||||
`}
|
||||
/>
|
||||
</section>
|
||||
@@ -363,11 +339,24 @@ import '../app.postcss'; // Substitute with your framework's global stylesheet
|
||||
<hr />
|
||||
|
||||
<!-- 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">
|
||||
<p>View the <u>optional walkthroughs</u> for creating an example app using Skeleton.</p>
|
||||
<a class="btn btn-filled-primary" href="/guides/frameworks">
|
||||
<span>Framework Guides</span>
|
||||
<span>→</span>
|
||||
</a>
|
||||
<section class="space-y-4">
|
||||
<h2>What's Next?</h2>
|
||||
<p>Choose your own adventure. We recommend you review each section listed below.</p>
|
||||
<div class="card p-4 card-glass-accent space-y-4">
|
||||
<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 Tailwind features.</p>
|
||||
<a class="btn btn-ghost-surface" href="/elements/tokens">Tailwind Features →</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 →</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 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -14,35 +14,27 @@
|
||||
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.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Tailwind Install -->
|
||||
<section class="space-y-8">
|
||||
<TabGroup selected={storeFramework}>
|
||||
<Tab value="sveltekit">SvelteKit</Tab>
|
||||
<Tab value="vite">Vite (Svelte)</Tab>
|
||||
<Tab value="astro">Astro</Tab>
|
||||
<Tab value="cli">Skeleton CLI</Tab>
|
||||
<Tab value="manual">Manual Install</Tab>
|
||||
</TabGroup>
|
||||
{#if $storeFramework === 'sveltekit'}
|
||||
{#if $storeFramework === 'cli'}
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
{:else if $storeFramework === 'vite'}
|
||||
{:else if $storeFramework === 'manual'}
|
||||
<p>
|
||||
<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>
|
||||
<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}
|
||||
</header>
|
||||
|
||||
<hr />
|
||||
</section>
|
||||
|
||||
<!-- Usage -->
|
||||
<section class="space-y-8">
|
||||
@@ -53,11 +45,6 @@
|
||||
directory.
|
||||
</p>
|
||||
</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">
|
||||
<h3>Enabled Dark Mode Support</h3>
|
||||
<p>
|
||||
@@ -68,7 +55,7 @@
|
||||
<CodeBlock
|
||||
language="js"
|
||||
code={`
|
||||
${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
|
||||
const config = {
|
||||
darkMode: 'class',
|
||||
// ...
|
||||
}
|
||||
@@ -84,7 +71,7 @@ ${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
|
||||
<CodeBlock
|
||||
language="js"
|
||||
code={`
|
||||
${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
|
||||
const config = {
|
||||
// ...
|
||||
content: [
|
||||
// Keep existing values and append the following:
|
||||
@@ -104,7 +91,7 @@ ${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
|
||||
<CodeBlock
|
||||
language="js"
|
||||
code={`
|
||||
${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
|
||||
const config = {
|
||||
// ...
|
||||
plugins: [
|
||||
// Keep any existing plugins present and append the following:
|
||||
@@ -157,7 +144,7 @@ ${$storeFramework === 'astro' ? 'module.exports' : 'const config'} = {
|
||||
|
||||
<!-- 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">
|
||||
<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 →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -98,32 +98,21 @@
|
||||
</div>
|
||||
<!-- Implement -->
|
||||
<TabGroup selected={storeFramework}>
|
||||
<Tab value="sveltekit">SvelteKit</Tab>
|
||||
<Tab value="vite">Vite (Svelte)</Tab>
|
||||
<Tab value="astro">Astro</Tab>
|
||||
<Tab value="cli">Skeleton CLI</Tab>
|
||||
<Tab value="manual">Manual Install</Tab>
|
||||
</TabGroup>
|
||||
<!-- Framework: SvelteKit -->
|
||||
{#if $storeFramework === 'sveltekit'}
|
||||
{#if $storeFramework === 'cli'}
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
{:else if $storeFramework === 'manual'}
|
||||
<p>Import your desired preset into <code>/src/main.js</code> before your global stylesheet.</p>
|
||||
{/if}
|
||||
<CodeBlock
|
||||
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>
|
||||
<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}
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
@@ -34,28 +34,11 @@
|
||||
<!-- Instructions -->
|
||||
<section class="space-y-4">
|
||||
<h2>Importing Your Theme</h2>
|
||||
<TabGroup selected={storeFramework}>
|
||||
<Tab value="sveltekit">SvelteKit</Tab>
|
||||
<Tab value="vite">Vite (Svelte)</Tab>
|
||||
<Tab value="astro">Astro</Tab>
|
||||
</TabGroup>
|
||||
{#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.
|
||||
Copy and paste your theme CSS into <code>/src/theme.postcss</code>, then in<code>/src/routes/+layout.svelte</code> remove any preset theme,
|
||||
then replace with your custom 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>
|
||||
<CodeBlock language="typescript" code={`import '../theme.postcss'; // <--\nimport '../app.postcss';\n`} />
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
// SvelteKit Imports
|
||||
import { browser } from '$app/environment';
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
|
||||
// Stores
|
||||
@@ -58,15 +57,6 @@
|
||||
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) => {
|
||||
// Store current page route URL
|
||||
storeCurrentUrl.set($page.url.pathname);
|
||||
|
||||
@@ -67,11 +67,7 @@
|
||||
</div>
|
||||
<h4>Svelte Integration</h4>
|
||||
<p>
|
||||
Tightly coupled with Svelte, including full support 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>.
|
||||
Tightly coupled support for Svelte using the <a href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">SvelteKit</a> app framework.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card card-glass-accent p-4 text-center space-y-4">
|
||||
|
||||
Reference in New Issue
Block a user