Update custom-css.md

* - javascript runtime reference, re wrote it.

* - updating to jsdoc format

* - more jsdocs

* - converted to jsdocs, polish incoming.

* - added some more function definitions
- made some requested changes
- updated header links

* - Finished prism runtime article
- made requested changes

* - make requested changes

* Update runtime.md

articles/hubs/custom-css.md

@@ -0,0 +1,46 @@
+# Custom CSS
+
+![Applying Custom CSS](https://github.com/stoplightio/docs/blob/develop/assets/gifs/hubs-custom-css.gif?raw=true)
+
+## What 
+
+Want to add some style and flair to your documentation? Add your own custom CSS to enhance your Hub’s look and feel. Below are some of the classes you can modify: 
+
+```
+.Hub
+  .HubHeader
+    .HubHeader-section
+      .HubHeaderItem.is-active
+        .HubHeaderItem-name
+  .HubMain
+    .HubSidebar-overlay
+    .HubSidebar-wrapper
+      .HubSidebar
+        .HubSidebar-inner
+      .HubBranding
+    .HubPage-wrapper
+      .HubPage
+        .HubPage-inner
+          .HubPage-content
+            .HubPageCrumbs
+              .HubPageCrumb 
+            .HubPageBody 
+              .HubBlock
+            .HubPageFooter
+```
+
+## How
+
+1. Select the Hub you wish to modify 
+2. Select the **Design View**
+3. Click on **Theme** in the top toolbar 
+4. Select **Custom CSS** in the bottom left 
+5. Input CSS in the text area at the bottom of the page 
+6. Input CSS in the generated **theme** file (optional)
+7. In publishing, check the **Custom CSS** box under **Advanced** to apply the Custom CSS to that Hub when published
+
+>After accessing Custom CSS, a **theme** file will be generated under Documentation in the file explorer. After making changes to your CSS, make sure to save the **theme** file. 
+
+---
+**Related Articles**
+- [Theming](/documentation/design/theming)

articles/hubs/themes.md

@@ -21,10 +21,13 @@ Texture applies a texture to your header.
 ## How
 1. Select the **Hub** you wish to modify
 2. Select the **Design View** 
-3. Click on **Settings** at the top of the screen 
-4. Select **Theme** in the sidebar 
-5. Select a pre-selected color or choose your own color with the eyedropper 
-6. Select a texture 
-
+3. Click on **Theme** at the top of the screen 
+4. Select a pre-selected color or choose your own color with the eyedropper 
+5. Select a texture 
+
+---
+
+**Related Links**
+- [Custom CSS](/documentation/design/custom-css)
 
 

articles/hubs/variables.md

@@ -0,0 +1,40 @@
+# Variables in Hubs 
+
+## What 
+
+Inputting variables in API documentation whenever you consume them can quickly become a tedious time sink. The same pain point applies to people consuming your documentation. Inputting an API key everytime you want to send HTTP Requests to test endpoints is time better spent elsewhere.  Stoplight removes this obstacle by storing variables in your local browser. Once you input a variable, it populates the rest of your docs, no duplication, no problems. 
+
+## How
+
+You can specify variables in your docs by adding them at the specification level or directly into Hubs. 
+
+### Modeling Method 
+
+![Security Scheme in Specification](https://github.com/stoplightio/docs/blob/develop/assets/images/hubs-variables-modeling.png?raw=true)
+
+1. Select the modeling file you wish to modify 
+2. Create a new **security scheme** 
+    1. Input a **key** (required, must be unique in this specification) 
+    2. Select a **type** of security scheme 
+    3. Select a location for the security scheme under **in**
+    4. Input a **name** 
+3. Reference the specification in your Hub
+
+---
+
+### Hubs Method 
+
+![Adding variables to HTTP Request Maker](https://github.com/stoplightio/docs/blob/develop/assets/images/hubs-variables-tryitout.png?raw=true)
+
+1. Select the Hub you wish to modify 
+2. Create a **HTTP Request Maker** block 
+3. Select the **Headers** tab 
+4. Click **Add Header** 
+5. Input a **header name**
+6. Input a **header value** 
+
+***
+
+**Related**
+
+* [Security Schemes Overview](/modeling/modeling-with-openapi/security-schemes)