Add documentation for Core Libraries

advanced-monogatari-development/core-libraries/artemis.md

@@ -4,3 +4,171 @@ description: 'DOM manipulation, storage, HTTP requests handling, text transforma
 
 # Artemis
 
+Artemis is a JavaScript Library that aims to provide common utilities needed during development such as DOM manipulation, a wrapper for client based Storage and other functions that may be useful for web app development.
+
+## Using it
+Artemis is provided as an UMD, therefore it's possible to use it either on a browser as a global library, using es6 modules or nodejs modules.
+
+### Browser
+
+```html
+<script src='./artemis.min.js'></script>
+```
+
+```javascript
+const { $_, Text } = Artemis;
+```
+
+### ES6 Modules
+
+```javascript
+import { $_, Text } from '@aegis-framework/artemis';
+```
+
+### Node JS
+
+```javascript
+const { $_, Text } = require ('@aegis-framework/artemis');
+```
+
+
+Below are some simple examples but you can read the full [documentation of each class](https://gitlab.com/AegisFramework/Artemis/tree/master/docs) for more details.
+
+## Classes
+
+### DOM
+Artemis core library focuses on DOM manipulation, providing a jQuery-like experience and API
+
+```javascript
+$_ready (()=> {
+	$_('body').append ('<h1>Some Title</h1>');
+    $_('h1').text ('A different title');
+    $_('h1').style ('color', '#424242');
+});
+```
+
+### Form
+Artemis also includes a small form utility class that helps with filling and retrieving values from a form.
+
+```html
+<form data-form="MyForm">
+	<input type="text" name="SomeInput">
+	<input type="text" name="OtherInput">
+</form>
+```
+
+```javascript
+Form.fill ('MyForm', {
+	'SomeInput': 'Here is some Value',
+    'OtherInput': 'And here’s another one'
+});
+
+console.log (Form.values ('MyForm'));
+```
+
+### Space
+
+The Space Library is a wrapper for simple storage solutions as Local and Session storage but provides data independence through storage namespaces and versioning.
+
+```javascript
+let space = new Space (SpaceAdapter.LocalStorage, {
+	name: 'Storage',
+	version: '0.1.0'
+});
+
+space.set ('Test', {
+    value: 'Some Value'
+}).then (({key, value}) => {
+    console.log ('The value was inserted correctly!');
+});
+
+space.get ('Test').then ((value) => {
+    return value;
+}).then (({key, value}) => {
+    console.log (value);
+});
+
+space = new Space (SpaceAdapter.LocalStorage, {
+	name: 'Storage',
+	version: '0.1.1'
+});
+
+space.upgrade ('0.1.0', '0.1.1', (storage) => {
+    return storage.set ('Test', {
+		value: 'Other Value'
+	});
+});
+```
+
+### Request
+The request library provides a simple way to send HTTP requests using the fetch API.
+
+```javascript
+Request.get ('https://example.com/api/', {
+	'someQueryParam': 'Some Query Value!'
+}).then ((response) => {
+	return response.text ();
+}).then ((text) => {
+	console.log (text);
+});
+
+Request.post ('https://example.com/api/', {
+	'someKey': 'Some Value!'
+}).then ((response) => {
+	return response.text ();
+}).then ((text) => {
+	console.log (text);
+});
+```
+
+### Platform
+The platform library provides several utility methods to obtain information about the platform in which the code is running.
+
+```javascript
+if (Platform.mobile ('Android')) {
+	console.log ('You are running this on Android!');
+} else if (Platform.mobile ()) {
+	console.log ('You are running this on some kind of mobile device!');
+} else if (Platform.desktop ('macOS')) {
+	console.log ('You are running this on a Mac!');
+}
+
+if (Platform.electron ()) {
+	console.log ('You are running this on a Electron!');
+} else if (Platform.cordova ()) {
+	console.log ('You are running this on a Cordova!');
+}
+```
+
+### Text
+The text library provides simple utility methods to perform text transformations or other text related functions.
+
+```javascript
+console.log (Text.capitalize ('is this text capitalized?'));
+// Logs: Is This Text Capitalized?
+
+console.log (Text.suffix ('Hello', 'Hello how are you?'));
+// Logs: how are you?
+
+console.log (Text.prefix ('how are you?', 'Hello how are you?'));
+// Logs: Hello 
+```
+
+### Util
+The util library provides diverse methods that could be useful for some applications
+
+```javascript
+console.log (Util.uuid ());
+// Logs: Some UUID such as 116a7d96-8c6c-46ee-a9e1-3c7183e691b5
+
+function test () {
+	console.log ('A simple Function');
+}
+
+Util.callAsync (test).then (() => {
+	console.log ('Test was executed and a promise was inserted so test behaves like a function using promises');
+});
+
+```
+{"mode":"full","isActive":false}
+

advanced-monogatari-development/core-libraries/kayros.md

@@ -1,2 +1,54 @@
+---
+description: 'Kayros is the very base of Monogatari's style and look!'
+---
+
 # Kayros
 
+Kayros is a simple CSS library featuring common utilities such as CSS normalization, a grid system and common components such as modal windows, hero headers and even global page navigation.
+
+Kayros is built using [PostCSS](https://postcss.org/) and follows [BEM](http://getbem.com/introduction/) conventions.
+
+
+## Breakpoints
+
+```css
+/** Extra Small Devices, Phones (480px) **/
+@media screen and (min-width : 30em) {}
+
+/** Medium Screens, Phablets (601px) **/
+@media screen and (min-width: 37.56255em) {}
+
+/** Medium Devices, Tablets (992px)**/
+@media screen and (min-width: 62em) {}
+
+/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
+@media screen and (min-width: 75em) {}
+
+/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
+@media screen and (min-width: 120em) {}
+
+/** Retina Screen , Large Devices, Wide Screens(2560px) **/
+@media screen and (min-width: 160em) {}
+
+/** 4k Screens, Large Devices, Wide Screens (3840px) **/
+@media screen and (min-width: 240em) {}
+
+/** 5k Screens, Large Devices, Wide Screens (5000px) **/
+@media screen and (min-width: 312.5em) {}
+
+/** 8k Screens, Large Devices, Wide Screens (8000px) **/
+@media screen and (min-width: 500em) {}
+```
+
+## Examples
+* [Grid](https://gitlab.com/AegisFramework/Kayros/blob/master/examples/grid.html)
+* [Hero Header](https://gitlab.com/AegisFramework/Kayros/blob/master/examples/hero.html)
+* [Full Hero Header](https://gitlab.com/AegisFramework/Kayros/blob/master/examples/hero-full.html)
+* [Transparent Hero Header](https://gitlab.com/AegisFramework/Kayros/blob/master/examples/hero-transparent.html)
+* [Transparent Hero Header](https://gitlab.com/AegisFramework/Kayros/blob/master/examples/hero-transparent.html)
+* [Transparent Hero Header](https://gitlab.com/AegisFramework/Kayros/blob/master/examples/hero-transparent.html)
+
+## License
+Kayros is released under the [MIT License](https://gitlab.com/AegisFramework/Kayros/blob/master/LICENSE)
+{"mode":"full","isActive":false}
+

advanced-monogatari-development/core-libraries/pandora.md

@@ -1,2 +1,53 @@
+---
+description: 'Pandora is what allows monogatari to have self contained, custom HTML elements and allows them to have custom functionality.'
+---
+
 # Pandora
 
+Pandora is a Web Components library that allows you to create simple and reusable custom HTML elements.
+
+## Components
+
+```javascript
+// Create a new Component
+class CustomElement extends Pandora.Component {
+
+	constructor () {
+		super ();
+
+		// Add a text property
+		this.props = {
+			text: ''
+		};
+	}
+
+	render () {
+		// When rendered, this component will show an h2 element with the text
+		// given on the props.
+		return `<h2>${this.props.text}</h2>`;
+	}
+}
+
+console.log (CustomElement.tag); // custom-element
+
+// Register the custom element with its tag on the window and add the CustomElement
+// class as its controller
+window.customElements.define (CustomElement.tag, CustomElement);
+
+// Get the custom element from the DOM
+const element = document.querySelector ('custom-element');
+
+// Set its text to Hello World!
+element.setProps ( {
+	text: 'Hello World!'
+});
+
+```
+
+## Documentation
+You can find alll the documentation for this library at [https://developers.aegisframework.com/pandora/](https://developers.aegisframework.com/pandora/)
+
+
+## License
+This library is released under a [MIT License](./LICENSE)
+{"mode":"full","isActive":false}