Updates doc styles and formatting

docs/elements.md

@@ -1 +1 @@
-**Elements** are the smallest basic structures of a UI. They can not be broken down any further. Buttons, links and inputs are good examples. Elements utilize *Tokens*. *(btw: everything you see here is user editable, to change or remove this text, see `/docs/elements.md`)*
+**Elements** are the smallest basic structures of a UI. They can not be broken down any further. Buttons, links and inputs are good examples. Elements utilize *Tokens*. *(Everything you see here is user editable, to change or remove this text, see `/docs/elements.md`)*

docs/introduction.md

@@ -17,50 +17,15 @@ Made by [@viljamis](https://twitter.com/viljamis) and other contributors. Read m
 * Autoprefixing, SCSS, Webpack & CSS extraction included by default *(Extend with lint-on-save & unit tests).*
 * [And more…](https://github.com/viljamis/vue-design-system)
 
-
 ## Get Started
 
-Get started by cloning the repo and installing dependencies:
-
-```bash
-git clone [email protected]:viljamis/vue-design-system.git
-cd vue-design-system
-npm install
-```
-
-Start up the project and living documentation at [http://localhost:8080](http://localhost:8080) & [http://localhost:6060](http://localhost:6060):
-
-```bash
-npm start
-```
-
-To learn more, view the [official documentation](https://github.com/viljamis/vue-design-system) on GitHub.
-
-
-## Terminology
-
-The following terminology is used throughout Vue Design System. It’s a good idea to get familiar with these concepts before diving deeper.
-
-* **Principles** are a set of established design principles that are at the heart of the system. They should guide you when working with *Tokens*, *Elements*, *Patterns* and *Templates* listed below.
-* **Tokens** are the visual design atoms of the system. Specifically, they are named entities that store visual design attributes. SalesForce’s system has [a great example](https://www.lightningdesignsystem.com/design-tokens/).
-* **Elements** are the smallest basic structures of a UI. They can not be broken down any further. Buttons, links and inputs are good examples. Elements utilize *Tokens* mentioned above.
-* **Patterns** are UI patterns that fall on the more complex side of the spectrum. Patterns consist of both *Elements* and *Tokens*.
-* **Templates** exist to document the layout and structure of a section or the entirety of an interface. Templates can consist of all three things mentioned above: *Patterns*, *Elements* and *Tokens*.
-
-## Hierarchy, visualized:
-
-```bash
-Template
- ├─ Pattern
- │   ├─ Element
- │   │   ├─ Token
- │   │   └─ Token
- │   └─ Element
- │       └─ Token
- └─ Pattern
-     └─ Element
-         ├─ Token
-         └─ Token
-```
+* **[Getting Started](https://github.com/viljamis/vue-design-system/wiki/getting-started): How to install and run Vue Design System.**
+* [Terminology](https://github.com/viljamis/vue-design-system/wiki/terminology): Introduction to the system concepts and its hierarchy.
+* [Naming of Things](https://github.com/viljamis/vue-design-system/wiki/naming-of-Things): Naming is hard, so it’s good to have clear guidelines.
+* [Directory Structure](https://github.com/viljamis/vue-design-system/wiki/directory-structure): What goes where and why.
+* [Working with the System](https://github.com/viljamis/vue-design-system/wiki/working-with-the-system): Concrete examples on how to work with `Tokens`, `Elements` , `Patterns` and `Templates`.
+* [Editing Living Documentation](https://github.com/viljamis/vue-design-system/wiki/editing-living-documentation): How to customize the living system documentation.
+* [Frequently Asked Questions](https://github.com/viljamis/vue-design-system/wiki/frequently-asked-questions-(FAQ)): How to use icons, how to use font-face, etc.
 
-### [View project on GitHub →](https://github.com/viljamis/vue-design-system)
+<a href="https://github.com/viljamis/vue-design-system" class="button button--primary">View on GitHub</a>
+<a href="https://github.com/viljamis/vue-design-system/wiki" class="button button--secondary">Documentation</a>

docs/patterns.md

@@ -1 +1 @@
-**Patterns** are UI patterns that fall on the more complex side of the spectrum. Patterns consist of both *Elements* and *Tokens*. *(btw: everything you see here is user editable, to change or remove this text, see `/docs/patterns.md`)*
+**Patterns** are UI patterns that fall on the more complex side of the spectrum. Patterns consist of both *Elements* and *Tokens*. *(everything you see here is user editable, to change or remove this text, see `/docs/patterns.md`)*

docs/principles.md

@@ -1,4 +1,4 @@
-**Principles** are a set of established design principles that are at the heart of the design system. They should guide us when working with *Tokens*, *Elements*, *Patterns* and *Templates*. *(btw: everything you see here is user editable, to change or remove this text, see `/docs/principles.md`)*
+**Principles** are a set of established design principles that are at the heart of the design system. They should guide us when working with *Tokens*, *Elements*, *Patterns* and *Templates*. *(Everything you see here is user editable, to change or remove this text, see `/docs/principles.md`. The principles below are just an example, you should replace them.)*
 
 1. **Design is how it works**
 2. **Reduce concepts to increase confidence**

docs/styleguide.styles.css

@@ -120,3 +120,52 @@ div[class^='rsg--root'] > ul[class^='rsg--list'] > li > a {
 div[class^='rsg--sidebar'] a:hover {
   color: #fff;
 }
+
+a[class^='rsg--link'].button {
+  width: 100%;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  border: 1px solid #2389ee;
+  background: #2389ee;
+  border-radius: 3px;
+  font-weight: 600;
+  display: inline-block;
+  padding: .7rem 2rem;
+  margin: 0 .2rem .4rem 0;
+  color: #fff;
+}
+
+a[class^='rsg--link'].button:hover {
+  border: 1px solid #1960a7;
+  background: #1960a7;
+}
+
+a[class^='rsg--link'].button--secondary:hover {
+  border: 1px solid #ddd;
+  background: #ddd;
+}
+
+a[class^='rsg--link'].button:active {
+  opacity: 0.8;
+}
+
+a[class^='rsg--link'].button:first-child {
+  margin-top: 1.5rem;
+}
+
+@media (min-width: 600px) {
+  a[class^='rsg--link'].button {
+    width: auto;
+    margin: 1.5rem .2rem 1rem 0;
+  }
+}
+
+a[class^='rsg--link'].button--secondary {
+  background: transparent;
+  border: 1px solid #ccc;
+  color: #333;
+}
+
+strong[class^='rsg--strong'] a[class^='rsg--link'] {
+  font-weight: 600;
+}

docs/templates.md

@@ -1 +1 @@
-**Templates** exist to document the layout and structure of a section or the entirety of an interface. Templates can consist of all three things mentioned above: *Patterns*, *Elements* and *Tokens*. *(btw: everything you see here is user editable, to change or remove this text, see `/docs/templates.md`)*
+**Templates** exist to document the layout and structure of a section or the entirety of an interface. Templates can consist of all three things mentioned above: *Patterns*, *Elements* and *Tokens*. *(Everything you see here is user editable, to change or remove this text, see `/docs/templates.md`)*

docs/tokens.md

@@ -1 +1 @@
-**Tokens** are the visual design atoms of the design system. Specifically, they are named entities that store visual design attributes. SalesForce’s system has [a great example](https://www.lightningdesignsystem.com/design-tokens/). *(btw: everything you see here is user editable, to change or remove this text, see `/docs/tokens.md`)*
+**Tokens** are the visual design atoms of the design system. Specifically, they are named entities that store visual design attributes. SalesForce’s system has [a great example](https://www.lightningdesignsystem.com/design-tokens/). *(Everything you see here is user editable, to change or remove this text, see `/docs/tokens.md`)*