Documentation

docs/concepts/index.md

@@ -0,0 +1,11 @@
+---
+layout: default
+title: Concepts
+nav_order: 3
+has_children: true
+---
+
+# Concepts
+
+The following pages go over the concepts inherit to the Snowboard framework.
+{: .fs-6 .fw-300 }

docs/concepts/snowboard.md

@@ -0,0 +1,48 @@
+---
+layout: default
+title: The Snowboard instance
+parent: Concepts
+nav_order: 1
+---
+
+# The Snowboard instance
+
+The central instance in any Snowboard-built application.
+{: .fs-6 .fw-300 }
+
+{:toc}
+
+The Snowboard instance is the main instance used in any application built using the Snowboard framework. It can be thought of as a [container](https://en.wikipedia.org/wiki/Containerization_(computing)) - an isolated environment in which plugins and functionality are loaded and executed in a given scope.
+
+The Snowboard instance is (loosely) bound to the current page for the purpose of determining readiness, but is otherwise independent and not reliant on anything from the DOM. By itself, Snowboard only provides a basic amount of functionality, it is the [plugins](plugins) that provide the actual usable functionality.
+
+The purposes of the Snowboard instance are to:
+
+- Instantiate, manage and route events to [plugins](plugins) and [singletons](plugins#singletons)
+- Define available [abstracts](abstracts) and [traits](traits)
+- Create and remove ad-hoc [event listeners](events)
+- Log messages to Console.
+
+## Defining an instance
+
+Defining a Snowboard instance is dependent on the method you used to install Snowboard. See the [Getting Started](../introduction/getting-started) page for the available methods of installation.
+
+If you chose to install Snowboard using the **browser-based method**, an instance of Snowboard is available globally via the `window.Snowboard` variable in JavaScript. As long as your plugins, abstracts, traits and listeners are executed *after* the `snowboard.js` script tag, you need only use the `Snowboard` global variable to execute the Snowboard instance's functionality.
+
+If you instead chose to use the **Node-based method**, you will need to create an instance of Snowboard yourself and build a JavaScript bundle using your compilation tool of choice (such as [Webpack](https://webpack.js.org/) or [Vite](https://vitejs.dev/)).
+
+For example, to make a build of Snowboard in Node and make it available globally as `Snowboard` like the browser version above, you could use:
+
+```js
+import { Snowboard } from '@wintercms/snowboard';
+
+((window) => {
+    const app = new Snowboard();
+
+    // Add any plugins, traits and abstracts here...
+
+    window.Snowboard = app;
+})(window);
+```
+
+The method above uses a "self-executing" function, linked to the `window` global variable, and creates the Snowboard instance then populates it in `window.Snowboard`, thereby making it available globally in your JavaScript after this.

docs/introduction/getting-started.md

@@ -1,10 +1,63 @@
 ---
 layout: default
-title: "Introduction: Getting Started"
+title: Getting Started
 parent: Introduction
 nav_order: 2
 ---
 
 # Getting Started
 
 Snowboard.JS can be used completely standalone or as a module into your application - the choice is very much yours and dependent on the needs of your application.
+
+Snowboard is published in two versions - a **browser-based** version that is standalone and can be used simply by importing a JavaScript file into your HTML, or a **Node-based** version which can be imported into your application through the `import` declaration and built using your favourite compilation tool, such as Webpack or Vite.
+
+## Browser-based version
+
+The browser-based version is the much simpler option for people who just want to get straight into it. The browser-based version is a simple, self-contained JavaScript file that can be downloaded from the [Snowboard.js](https://github.com/wintercms/snowboard.js) repository.
+
+[Download latest minified Snowboard.js](https://github.com/wintercms/snowboard.js/releases/latest/download/snowboard.min.js) {: .btn .btn-purple }
+[Download latest unminified Snowboard.js](https://github.com/wintercms/snowboard.js/releases/latest/download/snowboard.js) {: .btn }
+
+Once downloaded, you may make it web-accessible and include it in your HTML. It is best to include the script at the bottom of the HTML, just before the closing `</body>` tag.
+
+```html
+    <!-- ... -->
+
+    <script src="https://mywebsite.com/assets/js/snowboard.js"></script>
+</body>
+</html>
+```
+
+The browser-based version automatically populates the Snowboard framework into the global variable `window.Snowboard` (or just `Snowboard`).
+
+## Node-based version
+
+The Node-based version gives you more flexibility when building your app, and allows you to create a bundle of Snowboard and your own functionality. You can install Snowboard via NPM to take advantage of this:
+
+```bash
+npm install --save @wintercms/snowboard
+```
+
+When using this method, you must initialize the Snowboard framework yourself in an "app" or "base" script, and then use a compiling tool such as [Webpack](https://webpack.js.org/) or [Vite](https://vitejs.dev/) to build the bundle. An example base script would look like this:
+
+```js
+import { Snowboard } from '@wintercms/snowboard';
+
+((window) => {
+    const app = new Snowboard();
+
+    // Add any plugins, traits and abstracts here...
+
+    window.Snowboard = app;
+})(window);
+```
+
+Then you can simply include the entire bundle in your app.
+
+```html
+    <!-- ... -->
+
+    <script src="https://mywebsite.com/assets/js/app.js"></script>
+</body>
+</html>
+```

docs/introduction/what-is-snowboard.md

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: "Introduction: What is Snowboard.js?"
+title: What is Snowboard.js?
 parent: Introduction
 nav_order: 1
 ---