+```js
+// Javascript code with syntax highlighting.
+var fun = function lang(l) {
+ dateformat.i18n = require('./lang/' + l)
+ return true;
+}
+```
+
+{% highlight markdown %}
+```js
+// Javascript code with syntax highlighting.
+var fun = function lang(l) {
+ dateformat.i18n = require('./lang/' + l)
+ return true;
+}
+```
+{% endhighlight %}
+
+---
+
+## Code blocks with rendered examples
+
+To demonstrate front end code, sometimes it's useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a `` with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
+
+
+
+
+
+[Link button](http://example.com/){: .btn }
+
+
+```markdown
+[Link button](http://example.com/){: .btn }
+```
+
+
+{% highlight markdown %}
+
+
+[Link button](http://example.com/){: .btn }
+
+
+```markdown
+[Link button](http://example.com/){: .btn }
+```
+{% endhighlight %}
diff --git a/_docs/ui-components/labels.md b/_docs/ui-components/labels.md
new file mode 100644
index 0000000..2bb63c2
--- /dev/null
+++ b/_docs/ui-components/labels.md
@@ -0,0 +1,47 @@
+---
+title: Labels
+parent: UI Components
+order_n: 3
+---
+
+
+Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
+
+
+Default label
+{: .label }
+
+Blue label
+{: .label .label-blue }
+
+Stable
+{: .label .label-green }
+
+New release
+{: .label .label-purple }
+
+Coming soon
+{: .label .label-yellow }
+
+Deprecated
+{: .label .label-red }
+
+```markdown
+Default label
+{: .label }
+
+Blue label
+{: .label .label-blue }
+
+Stable
+{: .label .label-green }
+
+New release
+{: .label .label-purple }
+
+Coming soon
+{: .label .label-yellow }
+
+Deprecated
+{: .label .label-red }
+```
diff --git a/_docs/ui-components/lists.md b/_docs/ui-components/lists.md
new file mode 100644
index 0000000..7f85d69
--- /dev/null
+++ b/_docs/ui-components/lists.md
@@ -0,0 +1,95 @@
+---
+title: Lists
+parent: UI Components
+order_n: 5
+---
+
+
+
+
+1. TOC
+{:toc}
+
+---
+
+Most lists can be rendered with pure Markdown.
+
+## Unordered list
+
+
+- Item 1
+- Item 2
+- Item 3
+
+_or_
+
+* Item 1
+* Item 2
+* Item 3
+
+```markdown
+- Item 1
+- Item 2
+- Item 3
+
+_or_
+
+* Item 1
+* Item 2
+* Item 3
+```
+
+## Ordered list
+
+
+1. Item 1
+1. Item 2
+1. Item 3
+
+```markdown
+1. Item 1
+1. Item 2
+1. Item 3
+```
+
+## Task list
+
+
+- [ ] hello, this is a todo item
+- [ ] hello, this is another todo item
+- [x] goodbye, this item is done
+
+```markdown
+- [ ] hello, this is a todo item
+- [ ] hello, this is another todo item
+- [x] goodbye, this item is done
+```
+
+## Definition list
+
+Definition lists require HTML syntax and aren't supported with the GitHub Flavored Markdown compiler.
+
+
+
+- Name
+- Godzilla
+- Born
+- 1952
+- Birthplace
+- Japan
+- Color
+- Green
+
+
+```html
+
+ - Name
+ - Godzilla
+ - Born
+ - 1952
+ - Birthplace
+ - Japan
+ - Color
+ - Green
+
+```
diff --git a/_docs/ui-components/tables.md b/_docs/ui-components/tables.md
new file mode 100644
index 0000000..f5a191a
--- /dev/null
+++ b/_docs/ui-components/tables.md
@@ -0,0 +1,26 @@
+---
+title: Tables
+parent: UI Components
+order_n: 4
+---
+
+Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.
+
+
+
+| head1 | head two | three |
+|:-------------|:------------------|:------|
+| ok | good swedish fish | nice |
+| out of stock | good and plenty | nice |
+| ok | good `oreos` | hmm |
+| ok | good `zoute` drop | yumm |
+
+
+```markdown
+| head1 | head two | three |
+|:-------------|:------------------|:------|
+| ok | good swedish fish | nice |
+| out of stock | good and plenty | nice |
+| ok | good `oreos` | hmm |
+| ok | good `zoute` drop | yumm |
+```
diff --git a/_docs/ui-components/typography.md b/_docs/ui-components/typography.md
new file mode 100644
index 0000000..c524d4f
--- /dev/null
+++ b/_docs/ui-components/typography.md
@@ -0,0 +1,108 @@
+---
+title: Typography rules
+parent: UI Components
+has_children: true
+order_n: 1
+---
+
+1. TOC
+{:toc}
+
+---
+
+## Font stack
+
+By default, Just the Docs uses a native system font stack for sans-serif fonts:
+
+```scss
+-apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif
+```
+
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+abcdefghijklmnopqrstuvwxyz
+{: .fs-5 .ls-10 .code-example }
+
+For monospace type, like code snippets or the `
` element, Just the Docs uses a native system font stack for monospace fonts:
+
+```scss
+"SFMono-Regular", Menlo, Consolas, Monospace
+```
+
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+abcdefghijklmnopqrstuvwxyz
+{: .fs-5 .ls-10 .text-mono .code-example }
+
+---
+
+## Responsive type scale
+
+Just the Docs uses a responsive type scale that shifts depending on the viewport size.
+
+| Selector | Small screen size `font-size` | Large screen size `font-size` |
+|:----------------------|:---------------------------------|:------------------------------|
+| `h1`, `.text-alpha` | 32px | 36px |
+| `h2`, `.text-beta` | 18px | 24px |
+| `h3`, `.text-gamma` | 16px | 18px |
+| `h4`, `.text-delta` | 14px | 16px |
+| `h5`, `.text-epsilon` | 16px | 18px |
+| `h6`, `.text-zeta` | 18px | 24px |
+| `body` | 14px | 16px |
+
+---
+
+## Headings
+
+Headings are rendered like this:
+
+
+
Heading 1
+Heading 2
+Heading 3
+Heading 4
+Heading 5
+Heading 6
+
+```markdown
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
+
+---
+
+## Body text
+
+Default body text is rendered like this:
+
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+```markdown
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+```
+
+---
+
+## Inline elements
+
+
+Text can be **bold**, _italic_, or ~~strikethrough~~.
+
+[Link to another page](another-page).
+
+```markdown
+Text can be **bold**, _italic_, or ~~strikethrough~~.
+
+[Link to another page](another-page).
+```
+
+---
+
+## Typographic Utilities
+
+There are a number of specific typographic CSS classes that allow you to override default styling for font size, font weight, line height, and capitalization.
+
+
diff --git a/_docs/ui-components/ui-components.md b/_docs/ui-components/ui-components.md
new file mode 100644
index 0000000..8433f6e
--- /dev/null
+++ b/_docs/ui-components/ui-components.md
@@ -0,0 +1,10 @@
+---
+title: UI Components
+order_n: 3
+has_children: true
+permalink: /docs/ui-components
+---
+
+
+To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed.
+{: .fs-6 .fw-300 }
diff --git a/_docs/utilities/color.md b/_docs/utilities/color.md
new file mode 100644
index 0000000..0ad21da
--- /dev/null
+++ b/_docs/utilities/color.md
@@ -0,0 +1,79 @@
+---
+title: Color
+parent: Utilities
+order_n: 3
+---
+
+
+
+
+1. TOC
+{:toc}
+
+---
+
+All the colors used in Just the Docs have been systematized into a series of variables that have been extended to both font color and background color utility classes.
+
+## Light Greys
+
+| Color value | Font color utility | Background color utility |
+|:---------------|:---------------------|:-------------------------|
+| `grey-lt-000` | `.text-grey-lt-000` | `.bg-grey-lt-000` |
+| `grey-lt-100` | `.text-grey-lt-100` | `.bg-grey-lt-100` |
+| `grey-lt-200` | `.text-grey-lt-200` | `.bg-grey-lt-200` |
+| `grey-lt-300` | `.text-grey-lt-300` | `.bg-grey-lt-300` |
+
+## Dark Greys
+
+| Color value | Font color utility | Background color utility |
+|:---------------|:---------------------|:-------------------------|
+| `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` |
+| `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` |
+| `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` |
+| `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` |
+| `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` |
+
+## Purples
+
+| Color value | Font color utility | Background color utility |
+|:---------------|:---------------------|:-------------------------|
+| `purple-000` | `.text-purple-000` | `.bg-purple-000` |
+| `purple-100` | `.text-purple-100` | `.bg-purple-100` |
+| `purple-200` | `.text-purple-200` | `.bg-purple-200` |
+| `purple-300` | `.text-purple-300` | `.bg-purple-300` |
+
+## Blues
+
+| Color value | Font color utility | Background color utility |
+|:---------------|:---------------------|:-------------------------|
+| `blue-000` | `.text-blue-000` | `.bg-blue-000` |
+| `blue-100` | `.text-blue-100` | `.bg-blue-100` |
+| `blue-200` | `.text-blue-200` | `.bg-blue-200` |
+| `blue-300` | `.text-blue-300` | `.bg-blue-300` |
+
+## Greens
+
+| Color value | Font color utility | Background color utility |
+|:---------------|:---------------------|:-------------------------|
+| `green-000` | `.text-green-000` | `.bg-green-000` |
+| `green-100` | `.text-green-100` | `.bg-green-100` |
+| `green-200` | `.text-green-200` | `.bg-green-200` |
+| `green-300` | `.text-green-300` | `.bg-green-300` |
+
+## Yellows
+
+| Color value | Font color utility | Background color utility |
+|:---------------|:---------------------|:-------------------------|
+| `yellow-000` | `.text-yellow-000` | `.bg-yellow-000` |
+| `yellow-100` | `.text-yellow-100` | `.bg-yellow-100` |
+| `yellow-200` | `.text-yellow-200` | `.bg-yellow-200` |
+| `yellow-300` | `.text-yellow-300` | `.bg-yellow-300` |
+
+## Reds
+
+| Color value | Font color utility | Background color utility |
+|:---------------|:---------------------|:-------------------------|
+| `red-000` | `.text-red-000` | `.bg-red-000` |
+| `red-100` | `.text-red-100` | `.bg-red-100` |
+| `red-200` | `.text-red-200` | `.bg-red-200` |
+| `red-300` | `.text-red-300` | `.bg-red-300` |
diff --git a/_docs/utilities/layout.md b/_docs/utilities/layout.md
new file mode 100644
index 0000000..339123e
--- /dev/null
+++ b/_docs/utilities/layout.md
@@ -0,0 +1,107 @@
+---
+title: Layout
+parent: Utilities
+order_n: 2
+---
+
+
+
+1. TOC
+{:toc}
+
+---
+
+## Spacing
+
+These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.
+
+| Classname prefix | What it does |
+|:-----------------|:------------------------------|
+| `.m-` | `margin` |
+| `.mx-` | `margin-left`, `margin-right` |
+| `.my-` | `margin top`, `margin bottom` |
+| `.mt-` | `margin-top` |
+| `.mr-` | `margin-right` |
+| `.mb-` | `margin-bottom` |
+| `.ml-` | `margin-left` |
+
+| Classname prefix | What it does |
+|:-----------------|:--------------------------------|
+| `.p-` | `padding` |
+| `.px-` | `padding-left`, `padding-right` |
+| `.py-` | `padding top`, `padding bottom` |
+| `.pt-` | `padding-top` |
+| `.pr-` | `padding-right` |
+| `.pb-` | `padding-bottom` |
+| `.pl-` | `padding-left` |
+
+Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units:
+
+| Spacer/suffix | Size in rems | Rem converted to px |
+|:---------------|:--------------|:--------------------|
+| `1` | 0.25rem | 4px |
+| `2` | 0.5rem | 8px |
+| `3` | 0.75rem | 12px |
+| `4` | 1rem | 16px |
+| `5` | 1.5rem | 24px |
+| `6` | 2rem | 32px |
+| `7` | 2.5rem | 40px |
+| `8` | 3rem | 48px |
+
+#### Examples
+{: .no_toc }
+
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+```markdown
+This paragraph will have a margin bottom of 1rem/16px at large screens.
+{: .mb-lg-4 }
+
+This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
+{: .px-6 }
+```
+
+## Vertical Alignment
+
+| Classname | What it does |
+|:-----------------------|:--------------------------------|
+| `.v-align-baseline` | `vertical-align: baseline` |
+| `.v-align-bottom` | `vertical-align: bottom` |
+| `.v-align-middle` | `vertical-align: middle` |
+| `.v-align-text-bottom` | `vertical-align: text-bottom` |
+| `.v-align-text-top` | `vertical-align: text-top` |
+| `.v-align-top` | `vertical-align: top` |
+
+## Display
+
+Display classes aid in adapting the layout of the elements on a page:
+
+| Class | |
+|:------------------|:------------------------|
+| `.d-block` | `display: block` |
+| `.d-flex` | `display: flex` |
+| `.d-inline` | `display: inline` |
+| `.d-inline-block` | `display: inline-block` |
+| `.d-none` | `display: none` |
+
+Use these classes in conjunction with the responsive modifiers.
+
+#### Examples
+{: .no_toc }
+
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+```markdown
+This button will be hidden until medium screen sizes:
+
+[ A button ](#url)
+{: .d-none .d-md-inline-block }
+
+These headings will be `inline-block`:
+
+### heading 3
+{: .d-inline-block }
+
+### heading 3
+{: .d-inline-block }
+```
diff --git a/_docs/utilities/responsive-modifiers.md b/_docs/utilities/responsive-modifiers.md
new file mode 100644
index 0000000..b672a2f
--- /dev/null
+++ b/_docs/utilities/responsive-modifiers.md
@@ -0,0 +1,17 @@
+---
+title: Responsive Modifiers
+parent: Utilities
+order_n: 1
+---
+
+
+Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prefix and suffix classes.
+
+| Modifier | Screen size |
+|:----------|:-------------------------------------|
+| (none) | All screens until the next modifier |
+| `xs` | 320px (20rem) and up |
+| `sm` | 500px (31.25rem) and up |
+| `md` | 740px (46.25rem) and up |
+| `lg` | 1120px (70rem) and up |
+| `xl` | 1400px (87.5rem) and up |
diff --git a/_docs/utilities/typogr.md b/_docs/utilities/typogr.md
new file mode 100644
index 0000000..e7976bd
--- /dev/null
+++ b/_docs/utilities/typogr.md
@@ -0,0 +1,142 @@
+---
+title: Typography
+parent: Utilities
+order_n: 4
+---
+
+1. TOC
+{:toc}
+
+---
+
+## Font size
+
+Use the `.fs-1` - `.fs-10` to set an explicit font-size.
+
+| Class | Small screen size `font-size` | Large screen size `font-size` |
+|:--------|:-------------------------------|:------------------------------|
+| `.fs-1` | 9px | 10px |
+| `.fs-2` | 11px | 12px |
+| `.fs-3` | 12px | 14px |
+| `.fs-4` | 14px | 16px |
+| `.fs-5` | 16px | 18px |
+| `.fs-6` | 18px | 24px |
+| `.fs-7` | 24px | 32px |
+| `.fs-8` | 32px | 38px |
+| `.fs-9` | 38px | 42px |
+| `.fs-10`| 42px | 48px |
+
+
+Font size 1
+{: .fs-1 }
+Font size 2
+{: .fs-2 }
+Font size 3
+{: .fs-3 }
+Font size 4
+{: .fs-4 }
+Font size 5
+{: .fs-5 }
+Font size 6
+{: .fs-6 }
+Font size 7
+{: .fs-7 }
+Font size 8
+{: .fs-8 }
+Font size 9
+{: .fs-9 }
+Font size 10
+{: .fs-10 }
+
+```markdown
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+Font size 1
+{: .fs-1 }
+Font size 2
+{: .fs-2 }
+Font size 3
+{: .fs-3 }
+Font size 4
+{: .fs-4 }
+Font size 5
+{: .fs-5 }
+Font size 6
+{: .fs-6 }
+Font size 7
+{: .fs-7 }
+Font size 8
+{: .fs-8 }
+Font size 9
+{: .fs-9 }
+Font size 10
+{: .fs-10 }
+```
+
+## Font weight
+
+Use the `.fw-300` - `.fw-700` to set an explicit font-size.
+
+
+Font weight 300
+{: .fw-300 }
+Font weight 400
+{: .fw-400 }
+Font weight 500
+{: .fw-500 }
+Font weight 700
+{: .fw-700 }
+
+```markdown
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+Font weight 300
+{: .fw-300 }
+Font weight 400
+{: .fw-400 }
+Font weight 500
+{: .fw-500 }
+Font weight 700
+{: .fw-700 }
+```
+
+## Line height
+
+Use the `lh-` classes to explicitly apply line height to text.
+
+| Class | `line-height` value | Notes |
+|:--------------|:---------------------|:------------------------------|
+| `.lh-0` | 0 | |
+| `.lh-tight` | 1.1 | Default for headings |
+| `.lh-default` | 1.4 | Default for body (paragraphs) |
+
+## code example
+
+
+No Line height
+No Line height
+{: .lh-0 }
+
+Tight line height
+Tight line height
+{: .lh-tight }
+
+Default line height
+Default line height
+{: .fh-default }
+
+```markdown
+In Markdown, use the `{: }` wrapper to apply custom classes:
+
+No Line height
+No Line height
+{: .lh-0 }
+
+Tight line height
+Tight line height
+{: .lh-tight }
+
+Default line height
+Default line height
+{: .fh-default }
+```
diff --git a/_docs/utilities/typography/font.md b/_docs/utilities/typography/font.md
new file mode 100644
index 0000000..6ae513d
--- /dev/null
+++ b/_docs/utilities/typography/font.md
@@ -0,0 +1,73 @@
+---
+title: Fonts
+parent: Typography rules
+grand_parent: UI Components
+order_n: 1
+---
+
+
+1. TOC
+{:toc}
+
+---
+
+## Font stack
+
+By default, Just the Docs uses a native system font stack for sans-serif fonts:
+
+```scss
+-apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif
+```
+
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+abcdefghijklmnopqrstuvwxyz
+{: .fs-5 .ls-10 .code-example }
+
+For monospace type, like code snippets or the `` element, Just the Docs uses a native system font stack for monospace fonts:
+
+```scss
+"SFMono-Regular", Menlo, Consolas, Monospace
+```
+
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+abcdefghijklmnopqrstuvwxyz
+{: .fs-5 .ls-10 .text-mono .code-example }
+
+---
+
+## Responsive type scale
+
+Just the Docs uses a responsive type scale that shifts depending on the viewport size.
+
+| Selector | Small screen size `font-size` | Large screen size `font-size` |
+|:----------------------|:---------------------------------|:------------------------------|
+| `h1`, `.text-alpha` | 32px | 36px |
+| `h2`, `.text-beta` | 18px | 24px |
+| `h3`, `.text-gamma` | 16px | 18px |
+| `h4`, `.text-delta` | 14px | 16px |
+| `h5`, `.text-epsilon` | 16px | 18px |
+| `h6`, `.text-zeta` | 18px | 24px |
+| `body` | 14px | 16px |
+
+---
+
+## Headings
+
+Headings are rendered like this:
+
+
+
Heading 1
+Heading 2
+Heading 3
+Heading 4
+Heading 5
+Heading 6
+
+```markdown
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
\ No newline at end of file
diff --git a/_docs/utilities/typography/text.md b/_docs/utilities/typography/text.md
new file mode 100644
index 0000000..1412929
--- /dev/null
+++ b/_docs/utilities/typography/text.md
@@ -0,0 +1,71 @@
+---
+title: Text
+parent: Typography rules
+grand_parent: UI Components
+order_n: 2
+---
+
+
+1. TOC
+{:toc}
+
+---
+
+
+## Headings
+
+Headings are rendered like this:
+
+
+
Heading 1
+Heading 2
+Heading 3
+Heading 4
+Heading 5
+Heading 6
+
+```markdown
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
+
+---
+
+## Body text
+
+Default body text is rendered like this:
+
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+```markdown
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+```
+
+---
+
+## Inline elements
+
+
+Text can be **bold**, _italic_, or ~~strikethrough~~.
+
+[Link to another page](another-page).
+
+
+```markdown
+Text can be **bold**, _italic_, or ~~strikethrough~~.
+
+[Link to another page](another-page).
+```
+
+---
+
+## Typographic Utilities
+
+There are a number of specific typographic CSS classes that allow you to override default styling for font size, font weight, line height, and capitalization.
+
+
diff --git a/_docs/utilities/utilities.md b/_docs/utilities/utilities.md
new file mode 100644
index 0000000..997847c
--- /dev/null
+++ b/_docs/utilities/utilities.md
@@ -0,0 +1,10 @@
+---
+title: Utilities
+order_n: 4
+has_children: true
+permalink: docs/utilities
+---
+
+
+CSS utility classes come in handy when you to want to override default styles to create additional whitespace (margins/padding), correct unexpected shifts in font size or weight, add color, or hide (or show) something at a specific screen size.
+{: .fs-6 .fw-300 }
diff --git a/_docs/welcome-to-jekyll.markdown b/_docs/welcome-to-jekyll.markdown
index 5b80332..be8b03e 100644
--- a/_docs/welcome-to-jekyll.markdown
+++ b/_docs/welcome-to-jekyll.markdown
@@ -2,14 +2,16 @@
layout: document
title: "Welcome to Jekyll!"
description: You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
-titles:
-- Code snippets
-- Check out the Jekyll docs
+
date: 2019-12-30 08:40:50 +0200
categories: jekyll update
order_n: 6
tags: [jekyll, code]
---
+
+* TOC
+{:toc}
+
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
Jekyll requires blog post files to be named according to the following format:
diff --git a/_docs/working-with-run-debug.md b/_docs/working-with-run-debug.md
index 78b1bb7..5ee5d8c 100644
--- a/_docs/working-with-run-debug.md
+++ b/_docs/working-with-run-debug.md
@@ -2,9 +2,7 @@
layout: document
title: "Work with run/debug configurations"
description: To run or debug your code in PyCharm, you can use numerous run/debug configurations. Each run/debug configuration represents a named set of run/debug startup properties. When you perform run, debug, or test operations with PyCharm, you always start a process based on one of the existing configurations using its parameters.
-titles:
-- Code snippets
-- Check out the Jekyll docs
+
date: 2019-12-31 08:40:50 +0200
categories: jekyll run debug
@@ -12,6 +10,9 @@ tags: [jekyll, code]
order_n: 8
---
+* TOC
+{:toc}
+
To run or debug your code in PyCharm, you can use numerous run/debug configurations. Each run/debug configuration represents a named set of run/debug startup properties. When you perform run, debug, or test operations with PyCharm, you always start a process based on one of the existing configurations using its parameters.
PyCharm comes with a number of run/debug configuration types for the various running, debugging and testing issues. You can create your own run/debug configurations of specific types.
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 9752feb..c6dd6d4 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,11 +1,43 @@
Issue Label Bot
Issue Label Bot