Skip to content

Commit

Permalink
a few doc fixes (grammar, wrapping, +layout)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KTibow
KTibow committed Dec 13, 2024
1 parent d55f774 commit 3a0c4dc
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 192 deletions.
0 src/routes/docs/Base.svelte → src/routes/docs/+layout.svelte
View file
File renamed without changes.
1 change: 1 addition & 0 deletions src/routes/docs/Snippet.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
code {
padding: 0;
background: transparent;
white-space: pre-wrap;
}
}
</style>
162 changes: 80 additions & 82 deletions src/routes/docs/detailed-walkthrough/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import SegmentedButtonItem from "$lib/buttons/SegmentedButtonItem.svelte";
import { base } from "$app/paths";
import Base from "../Base.svelte";
import Snippet from "../Snippet.svelte";
let styleType = "plain";
Expand All @@ -24,50 +23,50 @@ ${"<"}/script>
${"<"}Button type="filled" on:click={() => alert("Hello world!")}>Click me${"<"}/Button>`;
</script>

<Base>
<p>
Welcome to M3 Svelte! If you haven't already, play around with the components on the home page.
It's rather fun. They even adapt to the theme you pick. You should also check out the Discord
and GitHub if you want to keep track of this project.
</p>
<p>
This page is a detailed walkthrough of how to use M3 Svelte: we'll take you from configuration
to advanced usage.
</p>
<p>
Welcome to M3 Svelte! If you haven't already, play around with the components on the home page.
It's rather fun. They even adapt to the theme you pick. You should also check out the Discord and
GitHub if you want to keep track of this project.
</p>
<p>
This page is a detailed walkthrough of how to use M3 Svelte: we'll take you from configuration to
advanced usage.
</p>

<h2 class="m3-font-headline-large">Configure your app</h2>
<p>
The first thing to do is to set up your theme and font. If you haven't done that yet, the quick
start page will help you.
</p>
<p>
Beyond that, you can configure some general settings with CSS variables. You might already know
that you can change the default font stack with <code>--m3-font</code>, but you can also
customize the fonts of certain sizes (eg <code>--m3-font-label</code>) and their configuration
(eg <code>--m3-font-label-large-size</code>). You can also tweak rounding by setting variables
like <code>--m3-util-rounding-small</code> and <code>--m3-button-shape</code>.
</p>
<p>
One obscure thing you can configure is ripples. You can use a simpler layer by defining
<code>M3_SVELTE_NO_RIPPLE</code> to <code>true</code> in your Vite config.
</p>
<h2 class="m3-font-headline-large">Configure your app</h2>
<p>
The first thing to do is to set up your theme and font. If you haven't done that yet, the quick
start page will help you.
</p>
<p>
Beyond that, you can configure some general settings with CSS variables. You might already know
that you can change the default font stack with <code>--m3-font</code>, but you can also customize
the fonts of certain sizes (eg <code>--m3-font-label</code>) and their configuration (eg
<code>--m3-font-label-large-size</code>). You can also tweak rounding by setting variables like
<code>--m3-util-rounding-small</code>
and <code>--m3-button-shape</code>.
</p>
<p>
One obscure thing you can configure is ripples. You can use a simpler layer by defining
<code>M3_SVELTE_NO_RIPPLE</code> to <code>true</code> in your Vite config.
</p>

<h2 class="m3-font-headline-large">Make your own components</h2>
<SegmentedButtonContainer>
<input type="radio" id="styletype-plain" value="plain" bind:group={styleType} />
<SegmentedButtonItem input="styletype-plain">Plain</SegmentedButtonItem>
<input type="radio" id="styletype-tailwind" value="tailwind" bind:group={styleType} />
<SegmentedButtonItem input="styletype-tailwind">Tailwind</SegmentedButtonItem>
</SegmentedButtonContainer>
<p>
Chances are M3 doesn't have everything you need. That's where you can make your own components
while still using Material 3 elements. Here's an example.
</p>
{#if styleType == "tailwind"}
<Snippet code={componentCode1} name="Component.svelte" lang="xml" />
<p>You'll need to update your Tailwind config too:</p>
<Snippet
code={`colors: {
<h2 class="m3-font-headline-large">Make your own components</h2>
<SegmentedButtonContainer>
<input type="radio" id="styletype-plain" value="plain" bind:group={styleType} />
<SegmentedButtonItem input="styletype-plain">Plain</SegmentedButtonItem>
<input type="radio" id="styletype-tailwind" value="tailwind" bind:group={styleType} />
<SegmentedButtonItem input="styletype-tailwind">Tailwind</SegmentedButtonItem>
</SegmentedButtonContainer>
<p>
Chances are M3 doesn't have everything you need. That's where you can make your own components
while still using Material 3 elements. Here's an example.
</p>
{#if styleType == "tailwind"}
<Snippet code={componentCode1} name="Component.svelte" lang="xml" />
<p>You'll need to update your Tailwind config too:</p>
<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>)",
Expand Down Expand Up @@ -106,49 +105,48 @@ ${"<"}Button type="filled" on:click={() => alert("Hello world!")}>Click me${"<"}
"surface-dim": "rgb(var(--m3-scheme-surface-dim) / <alpha-value>)",
"surface-tint": "rgb(var(--m3-scheme-surface-tint) / <alpha-value>)"
}`}
name="tailwind.config.js"
lang="javascript"
/>
{:else}
<Snippet code={componentCode2} name="Component.svelte" lang="xml" />
{/if}
<p>You might also want to make your app match your theme. Here's what that could look like:</p>
{#if styleType == "tailwind"}
<Snippet
code={`<body class="m3-font-body-large bg-background text-on-background">`}
name="app.html"
lang="xml"
/>
{:else}
<Snippet code={`<body class="m3-font-body-large">`} name="app.html" lang="xml" />
<Snippet
code={`body {
name="tailwind.config.js"
lang="javascript"
/>
{:else}
<Snippet code={componentCode2} name="Component.svelte" lang="xml" />
{/if}
<p>You might also want to make your app match your theme. Here's what that could look like:</p>
{#if styleType == "tailwind"}
<Snippet
code={`<body class="m3-font-body-large bg-background text-on-background">`}
name="app.html"
lang="xml"
/>
{:else}
<Snippet code={`<body class="m3-font-body-large">`} name="app.html" lang="xml" />
<Snippet
code={`body {
background-color: rgb(var(--m3-scheme-background));
color: rgb(var(--m3-scheme-on-background));
}`}
name="app.css"
lang="css"
/>
{/if}
<p>
So what's going on here? We're using M3 Svelte globals. All of them can be used in components,
and all of them can be overridden (as outlined earlier). Some come from your custom theme, but
most are defaults from
<a href="https://github.com/KTibow/m3-svelte/blob/main/src/lib/misc/styles.css">styles.css</a>.
</p>
name="app.css"
lang="css"
/>
{/if}
<p>
So what's going on here? We're using M3 Svelte globals. All of them can be used in components, and
all of them can be overridden (as outlined earlier). Some come from your custom theme, but most
are defaults from
<a href="https://github.com/KTibow/m3-svelte/blob/main/src/lib/misc/styles.css">styles.css</a>.
</p>

<h2 class="m3-font-headline-large">Use M3 Svelte components</h2>
<p>
It's usually simple to use components. For example, this is what it looks like to use a Button:
</p>
<Snippet code={componentCode3} name="Component.svelte" lang="xml" />
<p>There are a few ways to get more info on how to use a component.</p>
<ul>
<li>Click the code button on the component on the home page</li>
<li>Read the <a href="{base}/llms.txt">the component guide</a></li>
<li>Check the M3 Svelte source code</li>
</ul>
</Base>
<h2 class="m3-font-headline-large">Use M3 Svelte components</h2>
<p>
It's usually simple to use components. For example, this is what it looks like to use a Button:
</p>
<Snippet code={componentCode3} name="Component.svelte" lang="xml" />
<p>There are a few ways to get more info on how to use a component.</p>
<ul>
<li>Click the code button on the component on the home page</li>
<li>Read <a href="{base}/llms.txt">the component guide</a></li>
<li>Check the M3 Svelte source code</li>
</ul>

<style>
p {
Expand Down
3 changes: 0 additions & 3 deletions src/routes/docs/guide/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<script lang="ts">
import { base } from "$app/paths";
import Base from "../Base.svelte";
import Snippet from "../Snippet.svelte";
</script>

<Base>
<p class="m3-font-body-large">
This is an overview of M3 Svelte. This page is also available <a href="{base}/llms.txt">raw</a>.
</p>
Expand Down Expand Up @@ -703,7 +701,6 @@ ${"<"}SliderTicks step={1} max={6} bind:value />`} lang="xml" />
<h3>Layer</h3>
</div>
</div>
</Base>

<style>
.content {
Expand Down
Loading

0 comments on commit 3a0c4dc

Please sign in to comment.