Page Wrapper

Document Model

Here is a general sense of how Bubbles expects your document to be structured.

First is the Wrapper. This wraps the whole document. The exception here is the Sidebar component which is outside of the wrapper. If the sidebar is used, the SidebarPageWrapper is used to wrap the page. There are also a few elements like the ToastContainer and Model that can be included anywhere since they will appear on top of everything, so they are generally added outside of the wrapper as well.
Once the app wrapper is included, you then select if you want to use a grid or column layout to display your content - columns are more common. For a column layout you will use a Row component to wrap you columns. For a grid layout, you'll use the Grid and GridItem components. The Header component can be added to the top of your page and should not be wrapped in anything.

Basic Structure

Just like Svelte Kit wants you to use layout.svelte files for your standard page structure, Bubbles include some pre-made layouts. You'll generally want to include these layout components inside of __layout.svelte and pass everything else with a slot. These layouts will make sure that components like Sidebar, Header, and Cards are all behaving property.

Components

SidebarPageWrapper
If your page includes a Sidebar component in the layout, you'll want to use this wrapper to make sure the body of your page will be contained correctly

PageWrapper
You'll use this wrapper if you are not including a Sidebar component.

<script>
  // __layout.svelte

  // First import the global css styles
  import "bubbles-ui/css/app.css";

  // Import the components
  import { SidebarPageWrapper, Sidebar, ModalContainer, ToastContainer } from "bubbles-ui";

  // Import the stores, just separated for cleaner code
  import { toastStore } from "bubbles-ui";

  // Create a sidebar config, more on that in the sidebar section
  const sidebarConfig = {
    logo: "./logo.png", //you can import this and pass as a variable too
    sections: [
      {
        title: "Home",
        href: "/",
      },
      {
        title: "Settings",
        href: "/settings",
      },
    ],
  };
</script>

<!-- Toasts can occur between page transitions, because of forms, or other reasons.
     It's easier to add them to the __layout.svelte file and add them to the DOM from
     The store. More on that in the Toast section -->
<ToastContainer />

<!-- The sidebar can get added the layout. The SidebarPageWrapper will make sure your content
     will look nice with the Sidebar. The rest of your content will be loaded in the <slot/> -->
<Sidebar {...sidebarConfig} />
<SidebarPageWrapper>
  <slot />
</SidebarPageWrapper>

<!-- Modals usually are on top of everything. It's easy to add them here and then add content to
     then and toggle them through included utility functions. More on this in the modal section -->
<ModalContainer />