feat: add styles for new elements, layout, components and utilities.

README.md

@@ -1,5 +1,15 @@
 # Svelkit
 
+## Quick start
+
+Clone the repository and cd into the project directory.
+
+Run `yarn install` then `yarn build`
+
+Cd into the package that you'd like to make progress on.
+
+## Overview
+
 > Collection of packages to create [svelte] apps.
 
 [![License](https://badgen.net/github/license/kenoxa/svelkit)](https://github.com/kenoxa/svelkit/blob/main/LICENSE)
@@ -63,7 +73,7 @@ We are following the [Conventional Commits](https://www.conventionalcommits.org)
 
 - `yarn test`: Run test suite including linting
 - `yarn format`: Ensure consistent code style
-- `yarn storybook`: Start the component showroom
+- ~~`yarn storybook`: Start the component showroom~~
 - `yarn publish`: To publish all changed packages
 
 ## License

docs/src/includes/sidebar.md

@@ -1,14 +1,46 @@
 - [Getting Started](getting-started)
 - Spectre
   - [API](spectre/api)
-  - [Baseline](spectre/baseline)
-  - [Avatars](spectre/avatars)
-  - [Badges](spectre/badges)
-  - [Bars](spectre/bars)
-  - [Breadcrumbs](spectre/breadcrumbs)
-  - [Cards](spectre/cards)
-  - [Chips](spectre/chips)
-  - [Empty](spectre/empty)
-  - [Headings](spectre/headings)
-  - [Text](spectre/text)
+  - Elements
+    - [Buttons](spectre/elements/buttons)
+    - [Forms](spectre/elements/forms)
+    - [Labels](spectre/elements/labels)
+    - [Media](spectre/elements/media)
+    - [Tables](spectre/elements/tables)
+  - Layout
+    - [Layouts](spectre/layout/layouts)
+    - [Responsive](spectre/layout/responsive)
+    - [Heroes](spectre/layout/heroes)
+    - [Navbars](spectre/layout/navbars)
+  - Components
+    - [Accordions](spectre/components/accordions)
+    - [Avatars](spectre/components/avatars)
+    - [Badges](spectre/components/badges)
+    - [Bars](spectre/components/bars)
+    - [Breadcrumbs](spectre/components/breadcrumbs)
+    - [Cards](spectre/components/cards)
+    - [Chips](spectre/components/chips)
+    - [Empty states](spectre/components/empty)
+    - [Menus](spectre/components/menus)
+    - [Modals](spectre/components/modals)
+    - [Navigations](spectre/components/navigations)
+    - [Paginations](spectre/components/paginations)
+    - [Panels](spectre/components/panels)
+    - [Popovers](spectre/components/popovers)
+    - [Steps](spectre/components/steps)
+    - [Tabs](spectre/components/tabs)
+    - [Tiles](spectre/components/tiles)
+    - [Toasts](spectre/components/toasts)
+    - [Tooltips](spectre/components/tooltips)
+  - Utilities
+    - [Baseline](spectre/utilities/baseline)
+    - [Colors](spectre/utilities/colors)
+    - [Cursors](spectre/utilities/cursors)
+    - [Display](spectre/utilities/display)
+    - [Dividers](spectre/utilities/dividers)
+    - [Headings](spectre/utilities/headings)
+    - [Loading](spectre/utilities/loading)
+    - [Position](spectre/utilities/position)
+    - [Shapes](spectre/utilities/shapes)
+    - [Text](spectre/utilities/text)
 - [Github](https://github.com/kenoxa/svelkit)

docs/src/knobs.svelte

@@ -1,6 +1,7 @@
 <script lang="js">
   import { useAutoId } from '@svelkit/hooks'
   import { baseline, row, col, form } from '@svelkit/spectre'
+  import 'spectre.css/dist/spectre-icons.css'
 
   const autoId = useAutoId('knobs')
 
@@ -16,7 +17,6 @@
       <div use:col={'auto'}>
         <div use:form.group>
           <label use:form.label for={autoId(key)}>{config[key].label || key}</label>
-
           {#if config[key].options}
             <select bind:value={state[key]} use:form.select id={autoId(key)}>
               {#each config[key].options as value}

docs/src/pages/index.md

@@ -3,7 +3,13 @@ layout: 'no_sidebar'
 title: false
 ---
 
-# Great Success
+## 3 Reasons You Should Be Using @svelkit/spectre
+
+- Scoped class names automatically generated (no more overwriting your clients styles by accident)
+- Getting an entire CSS library for the price of just a few KB (lightweight)
+- The Svelte-way of writing code (using svelte actions)
+
+## Great Success
 
 You are ready to write documentation for new [Svelte](https://svelte.dev) thing!