Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs Update: Docs Section 1 #1084

Merged
merged 9 commits into from
Mar 4, 2023
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/routes/(inner)/docs/get-started/SectionInstall.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ cd my-skeleton-app
{:else if $storeOnboardMethod === 'manual'}
<!-- prettier-ignore -->
<p>
If you have an existing SvelteKit application, start here. Otherwise let's begin by creating a new <a href="https://kit.svelte.dev/docs/creating-a-project" target="_blank" rel="noreferrer">SvelteKit project</a>.
If you have an existing SvelteKit application, skip to installing the Skeleton package from NPM. Otherwise let's begin by creating a new <a href="https://kit.svelte.dev/docs/creating-a-project" target="_blank" rel="noreferrer">SvelteKit project</a>.
</p>
<CodeBlock
language="console"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<aside class="alert variant-ghost-warning">
<i class="fa-solid fa-triangle-exclamation text-2xl" />
<div class="alert-message">
<p>The order shown is critical to ensure these work as expected. Please use care when adding or modifying these.</p>
<p>The order shown is critical to ensure these work as expected. Please be careful when adding or modifying these!</p>
</div>
</aside>
<CodeBlock
Expand Down
2 changes: 1 addition & 1 deletion src/routes/(inner)/docs/get-started/SectionThemes.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
</TabGroup>
{#if $storeOnboardMethod === 'cli'}
<p>
The CLI will automatically import your prefer preset theme in <code>src/routes/+layout.svelte</code>. You may change this at any time.
The CLI will automatically import your preferred preset theme in <code>src/routes/+layout.svelte</code>. You may change this at any time.
</p>
{:else if $storeOnboardMethod === 'manual'}
<!-- prettier-ignore -->
Expand Down
24 changes: 12 additions & 12 deletions src/routes/(inner)/docs/introduction/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<!-- Why -->
<section class="space-y-4">
<p class="!text-xl">
Skeleton utilizes Tailwind’s utility classes and design system capabilities quickly and easily create beautiful interfaces. Paired
Skeleton utilizes Tailwind’s utility classes and design system capabilities to quickly and easily create beautiful interfaces. Paired
with Svelte’s powerful component architecture, Skeleton creates customized, responsive, and reactive interfaces for projects of any
scope or scale.
</p>
Expand All @@ -39,17 +39,17 @@
<section class="space-y-4">
<h2>Our Vision</h2>
<p>
The goal of Skeleton is to create intelligent, adaptive UI that automatically adheres to your applications unique aesthetic. Utilizing
native browser APIs and elements, such as form elements, when possible. While also augmenting this with powerful components built to
follow WAI-ARIA guidelines for accessibility.
Skeleton aims to provide a seamless user experience by creating intelligent and adaptive UI elements that automatically conform to the unique aesthetic of your application.
It leverages native browser APIs and form elements, while also incorporating powerful components that follow WAI-ARIA guidelines for accessibility,
empowering developers to create user-friendly and inclusive web applications with ease.
endigo9740 marked this conversation as resolved.
Show resolved Hide resolved
</p>
<p>
We're huge fans of Svelte and wish to contribute to this amazing ecosystem. We believe this only happens through contributions of high
quality open source projects our own. Created by the community, for the community.
</p>
<p>
Finally, we aim for inclusion, whether you're a contributor to the project, a consumer, or the end user. The Skeleton core team is not
a faceless corporate entity, but rather a small group of individuals motivated to make accessible UI with great UX for all.
a faceless corporate entity, but rather a small group of individuals motivated to make accessible UI with great UX (and DX!) for all.
</p>
</section>

Expand All @@ -73,14 +73,14 @@
<h3>Theme System</h3>
<p>
We provide a powerful and comprehensive theme system that goes well beyond generating a color palette. Themes allow you to control
common settings, such as border radius, and apply that universally throughout your application. Furthermore, themes are built using
CSS variables, which makes theme simple to configure and reuse.
common settings, such as border radius, and apply those universally throughout your application. Furthermore, themes are built using
CSS variables, which makes themes simple to configure and reuse.
</p>
<!-- Design Tokens -->
<h3>Design Tokens</h3>
<p>
A special set of CSS classes that ingest your theme settings for easy reuse throughout your design system. These are used as the
default settings for most features within Skeleton, meaning your UI elements automatically adjust to theme adjustments. Likewise,
default settings for most features within Skeleton, meaning your UI elements automatically adjust to theme changes. Likewise,
these tokens are available to you, meaning you can build custom components using the same tools we do, for a truly cohesive look and
feel.
</p>
Expand All @@ -107,8 +107,8 @@
<p>
A library of UI elements created by the creators of Tailwind CSS. This provides a huge library of turnkey HTML/CSS components.
Currently Tailwind UI supports three options: HTML, React, and Vue. This means there's no plug and play solution for Svelte. You
willneed to generate your own components and build your own logic around these. Tailwind UI can be directly integrated with
Skeleton though, providing tight integration with Skeleton theme and design token systems.
will need to generate your own components and build your own logic around these. Tailwind UI can be directly integrated with
Skeleton though, providing tight integration with Skeletons theme and design token systems.
</p>
<a class="btn variant-filled-secondary" href="/blog/skeleton-plus-tailwind-ui" target="_blank"> View our Integration Guide </a>
</svelte:fragment>
Expand All @@ -122,7 +122,7 @@
and opinionated design aesthetic and serves as a general purpose library, which means it can be used within any framework, while
providing framework-specific variations like <a href="https://flowbite-svelte.com/" target="_blank" rel="noreferrer"
>Flowbite Svelte</a
>. Flowbite's HTML/CSS elements can be directly integrated with Skeleton though, providing tight integration with Skeleton theme
>. Flowbite's HTML/CSS elements can be directly integrated with Skeleton though, providing tight integration with Skeletons theme
and design token systems.
</p>
<a class="btn variant-filled-secondary" href="/blog/skeleton-plus-flowbite" target="_blank"> View our Integration Guide </a>
Expand Down Expand Up @@ -206,7 +206,7 @@
<svelte:fragment slot="content">
<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> for Svelte. As well as the official
<a href="https://learn.svelte.dev/tutorial/welcome-to-svelte" target="_blank" rel="noreferrer">tutorial</a> for Svelte and SvelteKit. As well as the official
<a href="https://kit.svelte.dev/" target="_blank" rel="noreferrer">documentation</a> for SvelteKit.
</p>
</svelte:fragment>
Expand Down