diff --git a/advanced-monogatari-development/core-libraries/artemis.md b/advanced-monogatari-development/core-libraries/artemis.md index 19ff457..a88ecab 100644 --- a/advanced-monogatari-development/core-libraries/artemis.md +++ b/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 + +``` + +```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 ('

Some Title

'); + $_('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 +
+ + +
+``` + +```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} + diff --git a/advanced-monogatari-development/core-libraries/kayros.md b/advanced-monogatari-development/core-libraries/kayros.md index 4871e8a..5c12e13 100644 --- a/advanced-monogatari-development/core-libraries/kayros.md +++ b/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} + diff --git a/advanced-monogatari-development/core-libraries/pandora.md b/advanced-monogatari-development/core-libraries/pandora.md index a3b5abb..c669ce0 100644 --- a/advanced-monogatari-development/core-libraries/pandora.md +++ b/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 `

${this.props.text}

`; + } +} + +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}