Skip to content

Commit

Permalink
redesign docs yet again
Browse files Browse the repository at this point in the history
  • Loading branch information
@KTibow
KTibow committed Jan 5, 2024
1 parent 9591484 commit 3c57aaf
Show file tree
Hide file tree
Showing 3 changed files with 228 additions and 85 deletions.
2 changes: 1 addition & 1 deletion src/lib/buttons/SegmentedButtonItem.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<style>
label {
padding: 0 1rem;
flex: 1;
/* flex: 1; */
min-width: 3rem;
align-items: center;
justify-content: center;
Expand Down
286 changes: 209 additions & 77 deletions src/routes/docs/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,234 @@
<script>
import iconDownload from "@ktibow/iconset-material-symbols/download";
import iconAdd from "@ktibow/iconset-material-symbols/add";
import iconPalette from "@ktibow/iconset-material-symbols/palette-outline";
import iconType from "@ktibow/iconset-material-symbols/font-download-outline";
import Icon from "$lib/misc/_icon.svelte";
import ButtonLink from "$lib/buttons/ButtonLink.svelte";
import { base } from "$app/paths";
import Icon from "$lib/misc/_icon.svelte";
import SegmentedButtonContainer from "$lib/buttons/SegmentedButtonContainer.svelte";
import SegmentedButtonItem from "$lib/buttons/SegmentedButtonItem.svelte";
import VariableTabs from "$lib/nav/VariableTabs.svelte";
import Snippet from "./Snippet.svelte";
let step2Page = "stylefromscheme";
let step3Page = "roboto";
let colorType = "plain";
</script>

<svelte:head>
<title>M3 Svelte: Use</title>
</svelte:head>
<h1 class="m3-font-headline-large">Use M3 Svelte</h1>
<h2 class="m3-font-title-large">Getting started</h2>
<ol>
<li>
<div class="number">
1
<Icon icon={iconDownload} />
<div class="header">
<div class="number">
1
<Icon icon={iconDownload} />
</div>
</div>
<div class="text">
<p><strong>Add M3 Svelte</strong></p>
<p>Install M3 Svelte with <code>npm i m3-svelte</code> (or your package manager)</p>
</div>
</li>
<li>
<div class="number">
2
<Icon icon={iconAdd} />
</div>
<div class="text">
<p><strong>Set up base styling</strong></p>
<p>
Find a <code>.svelte</code> that applies to all pages (eg <code>+layout.svelte</code>).
</p>
<p>
Then, add <code>import &lbrace; StyleFromScheme &rbrace; from "m3-svelte"</code> to a script
tag, and paste in your theme snippet.
</p>
<ButtonLink type="filled" href="{base}/theme">Get theme snippet</ButtonLink>
</div>
</li>
<li>
<div class="number">
3
<Icon icon={iconPalette} />
<div class="header">
<div class="number">
2
<Icon icon={iconPalette} />
</div>
<SegmentedButtonContainer>
<input
type="radio"
id="step2-stylefromscheme"
value="stylefromscheme"
name="step2"
bind:group={step2Page}
/>
<SegmentedButtonItem input="step2-stylefromscheme">StyleFromScheme</SegmentedButtonItem>
<input type="radio" id="step2-manual" value="manual" name="step2" bind:group={step2Page} />
<SegmentedButtonItem input="step2-manual">Manual</SegmentedButtonItem>
</SegmentedButtonContainer>
</div>
<div class="text">
<p><strong>Use the same colors as M3 Svelte</strong></p>
<p>
Find a <code>.css</code> that applies to all pages. (Recommended: make a CSS file and import
it from <code>+layout.svelte</code> or wherever your app is mounted)
</p>
<p>Then, add something like this:</p>
<Snippet
code={`body {
background-color: rgb(var(--m3-scheme-background));
color: rgb(var(--m3-scheme-on-background));
}`}
/>
{#if step2Page == "stylefromscheme"}
<p>
<a href="{base}/theme">Get a theme snippet</a> and add it to your site.
</p>
<Snippet
code={`<script>
import { StyleFromScheme } from "m3-svelte";
<${""}/script>
[your theme snippet]`}
name="+layout.svelte or similar"
/>
{:else}
<p>
If you want to lower your bundle size, manually adding the styles is an option. While this
means you only send the styles once, it isn't recommended.
</p>
<p>
You'll need to set all the colors on <code>:root</code>, add <code>theme-color</code> meta
tags, and add the
<a href="https://github.com/KTibow/m3-svelte/blob/main/src/lib/misc/styles.css"
>base styles</a
>.
</p>
{/if}
</div>
</li>
<li>
<div class="number">
4
<Icon icon={iconType} />
<div class="header">
<div class="number">
3
<Icon icon={iconType} />
</div>
<SegmentedButtonContainer>
<input type="radio" id="step3-roboto" value="roboto" name="step3" bind:group={step3Page} />
<SegmentedButtonItem input="step3-roboto">Roboto</SegmentedButtonItem>
<input type="radio" id="step3-manual" value="manual" name="step3" bind:group={step3Page} />
<SegmentedButtonItem input="step3-manual">Manual</SegmentedButtonItem>
</SegmentedButtonContainer>
</div>
<div class="text">
<p><strong>Use the same font as M3 Svelte</strong></p>
<p>Add <code>class="m3-font-body-large"</code> to your <code>&lt;body&gt;</code>.</p>
<p><strong>Make sure M3 Svelte can use your font</strong></p>
<p>Using Roboto? Add this to your <code>app.html</code>:</p>
<Snippet
code={`<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" />`}
/>
<p>Not? Set your font like this:</p>
<Snippet
code={`body {
<p>Get a font for M3 Svelte to use.</p>
{#if step3Page == "roboto"}
<Snippet
code={`<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" />`}
name="app.html"
/>
{:else}
<Snippet
code={`body {
--m3-font: [your font], system-ui, sans-serif;
}`}
/>
name="app.css"
/>
{/if}
</div>
</li>
</ol>

<h2 class="m3-font-title-large">Use a component</h2>
<p style="margin-bottom: 0.75rem">Just import a component to start using it. For example:</p>
<Snippet
code={`<script>
<ul>
<li>Great. M3 Svelte components now function as expected, but you might want to do more.</li>
<li>
<p>Make your body match up with the rest of M3 Svelte</p>
<Snippet code={`<body class="m3-font-body-large">`} name="app.html" />
<Snippet
code={`body {
background-color: rgb(var(--m3-scheme-background));
color: rgb(var(--m3-scheme-on-background));
}`}
name="app.css"
/>
</li>
<li>
<p>Start using components</p>
<Snippet
code={`<script>
import { Button } from "m3-svelte";
<\/script>
<Button type="filled" on:click={() => alert("Hello world!")}>Hello world!<\/Button>`}
/>
<${""}/script>
<h2 class="m3-font-title-large">Write custom styling</h2>
<p style="margin-bottom: 0.75rem">
Using plain CSS? You can use the styles as CSS variables. Here's an example:
</p>
<Snippet
code={`button {
<Button type="filled" on:click={() => alert("Hello world!")}>Hello world!<${""}/Button>`}
name="+page.svelte"
/>
</li>
<li>
<p>Start using variables</p>
<VariableTabs
bind:tab={colorType}
items={[
{ name: "Plain", value: "plain" },
{ name: "Tailwind", value: "tailwind" },
]}
/>
{#if colorType == "plain"}
<Snippet
code={`button {
background-color: rgb(var(--m3-scheme-surface-container-low));
color: rgb(var(--m3-scheme-primary));
box-shadow: var(--m3-util-elevation-1);
border-radius: var(--m3-util-rounding-full);
}`}
/>
<p style="margin-top: 1rem; margin-bottom: 0.5rem">Using Tailwind?</p>
<ButtonLink type="filled" href="{base}/tailwindColors.txt">
View color config to paste in
</ButtonLink>
name="+page.svelte"
/>
{:else}
<Snippet
code={`colors: {
"primary": "rgb(var(--m3-scheme-primary) / <alpha-value>)",
"on-primary": "rgb(var(--m3-scheme-on-primary) / <alpha-value>)",
"primary-container": "rgb(var(--m3-scheme-primary-container) / <alpha-value>)",
"on-primary-container": "rgb(var(--m3-scheme-on-primary-container) / <alpha-value>)",
"secondary": "rgb(var(--m3-scheme-secondary) / <alpha-value>)",
"on-secondary": "rgb(var(--m3-scheme-on-secondary) / <alpha-value>)",
"secondary-container": "rgb(var(--m3-scheme-secondary-container) / <alpha-value>)",
"on-secondary-container": "rgb(var(--m3-scheme-on-secondary-container) / <alpha-value>)",
"tertiary": "rgb(var(--m3-scheme-tertiary) / <alpha-value>)",
"on-tertiary": "rgb(var(--m3-scheme-on-tertiary) / <alpha-value>)",
"tertiary-container": "rgb(var(--m3-scheme-tertiary-container) / <alpha-value>)",
"on-tertiary-container": "rgb(var(--m3-scheme-on-tertiary-container) / <alpha-value>)",
"error": "rgb(var(--m3-scheme-error) / <alpha-value>)",
"on-error": "rgb(var(--m3-scheme-on-error) / <alpha-value>)",
"error-container": "rgb(var(--m3-scheme-error-container) / <alpha-value>)",
"on-error-container": "rgb(var(--m3-scheme-on-error-container) / <alpha-value>)",
"background": "rgb(var(--m3-scheme-background) / <alpha-value>)",
"on-background": "rgb(var(--m3-scheme-on-background) / <alpha-value>)",
"surface": "rgb(var(--m3-scheme-surface) / <alpha-value>)",
"on-surface": "rgb(var(--m3-scheme-on-surface) / <alpha-value>)",
"surface-variant": "rgb(var(--m3-scheme-surface-variant) / <alpha-value>)",
"on-surface-variant": "rgb(var(--m3-scheme-on-surface-variant) / <alpha-value>)",
"outline": "rgb(var(--m3-scheme-outline) / <alpha-value>)",
"outline-variant": "rgb(var(--m3-scheme-outline-variant) / <alpha-value>)",
"shadow": "rgb(var(--m3-scheme-shadow) / <alpha-value>)",
"scrim": "rgb(var(--m3-scheme-scrim) / <alpha-value>)",
"inverse-surface": "rgb(var(--m3-scheme-inverse-surface) / <alpha-value>)",
"inverse-on-surface": "rgb(var(--m3-scheme-inverse-on-surface) / <alpha-value>)",
"inverse-primary": "rgb(var(--m3-scheme-inverse-primary) / <alpha-value>)",
"surface-bright": "rgb(var(--m3-scheme-surface-bright) / <alpha-value>)",
"surface-container": "rgb(var(--m3-scheme-surface-container) / <alpha-value>)",
"surface-container-high": "rgb(var(--m3-scheme-surface-container-high) / <alpha-value>)",
"surface-container-highest": "rgb(var(--m3-scheme-surface-container-highest) / <alpha-value>)",
"surface-container-low": "rgb(var(--m3-scheme-surface-container-low) / <alpha-value>)",
"surface-container-lowest": "rgb(var(--m3-scheme-surface-container-lowest) / <alpha-value>)",
"surface-dim": "rgb(var(--m3-scheme-surface-dim) / <alpha-value>)",
"surface-tint": "rgb(var(--m3-scheme-surface-tint) / <alpha-value>)"
}
`}
name="tailwind.config.js"
/>
<Snippet
code={`<button class="bg-surface-container-low text-primary rounded-full">`}
name="+page.svelte"
/>
{/if}
</li>
<li>Have fun!</li>
<li>
<p>
(FYI if your <code>app.css</code> isn't working, make sure you imported it from where your app
gets mounted, like in <code>+layout.svelte</code>.)
</p>
</li>
</ul>

<style>
ol {
display: flex;
flex-direction: column;
gap: 1rem;
gap: 4rem;
padding: 0;
margin: 0;
list-style-type: none;
}
ol > li {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 0.5rem;
}
.header {
display: flex;
align-items: center;
align-self: flex-start;
gap: 0.5rem;
}
.number {
Expand All @@ -132,7 +237,7 @@
gap: 0.5rem;
height: 2.5rem;
border-radius: 2.5rem;
border-radius: 3rem;
padding: 0 1rem;
font-size: 1.2rem;
background-color: rgb(var(--m3-scheme-primary-container));
Expand All @@ -142,7 +247,6 @@
display: flex;
flex-direction: column;
align-items: start;
flex-grow: 1;
gap: 0.75rem;
padding: 1rem;
Expand All @@ -152,6 +256,27 @@
background-color: rgb(var(--m3-scheme-surface-container-low));
}
ul {
display: flex;
flex-direction: column;
align-items: start;
gap: 1rem;
padding: 0;
margin: 10rem 0 0 0;
list-style-type: none;
}
ul > li {
display: flex;
flex-direction: column;
gap: 0.75rem;
background-color: rgb(var(--m3-scheme-primary-container));
color: rgb(var(--m3-scheme-on-primary-container));
padding: 0.75rem 1rem;
border-radius: 1rem 1rem 1rem 0;
}
p {
margin: 0;
}
Expand All @@ -161,4 +286,11 @@
padding-inline: 2px;
border-radius: 0.3rem;
}
a {
text-decoration: none;
color: rgb(var(--m3-scheme-primary));
}
ul > li > :global(.m3-container.primary) {
background-color: rgb(var(--m3-scheme-surface) / 0.4) !important;
}
</style>
Loading

0 comments on commit 3c57aaf

Please sign in to comment.