Updated docs

StratifyLabs/Doc/Animators.qml

@@ -0,0 +1,25 @@
+import QtQuick 2.6
+import StratifyLabs.UI 2.0
+
+EPane {
+  name: "Animators";
+  EHeading {
+    title: "Animators";
+    inherits: "Item";
+    stratifyName: "SAnimator";
+    defaultSize: "block";
+  }
+
+  ESectionTitle { text: "Description"; }
+  EParagraph { text: 'An <i>SAnimator</i> is an object that \
+can be used to navigate through its resources by setting the <i>screen</i> property. The <i>animation</i> \
+property can be set to either <i>SAnimationFade</i> (default) or <i>SAnimationHPush</i>.';
+  }
+
+  SHLine{}
+
+  ESectionTitle { text: "Simple Example"; }
+  AnimatorsExample{}
+  ECodeButton { source: "AnimatorsExample"; }
+}
+

StratifyLabs/Doc/AnimationContainerExample.qml → StratifyLabs/Doc/AnimatorsExample.qml

@@ -28,7 +28,7 @@ SColumn {
     }
   }
 
-  SAnimationContainer {
+  SAnimator {
     id: animationContainer;
     implicitHeight: 300;
 

StratifyLabs/Doc/Attributes.qml

@@ -6,18 +6,22 @@ EPane {
   ESectionTitle { text: "Introduction"; }
   EParagraph { text: '\
 SL.UI allows you to quickly layout and style \
-QML applications. It does this by attaching an "SAttributes" \
+QML applications. It does this by including an <i>SAttributes</i> \
 object which then defines the size and color scheme. \
 There are two ways to change an object\'s attributes: \
-1) using "style" 2) using "attr" directly.';
+1) using <i>style</i> 2) using <i>attr</i> directly.';
   }
   EParagraph { text: '\
-Additionally, each item has quick access to "attr.span" through \
-the "span" property which \
+Additionally, each item has quick access to <i>attr.span</i> through \
+the <i>span</i> property which \
 defines the width of a SL.UI object in an <i>SRow</i>. Each SL.UI object \
 defines the properties listed below.';
   }
 
+  EReadMore {
+    tags: "Rows:SRow";
+  }
+
   ECodeBlockInline {
     text: '\
 property alias style: attr.style;
@@ -31,7 +35,7 @@ SAttributes {
   }
 
   EParagraph { text: '\
-Most SL.UI objects use SAttributes as the "attr" object. \
+Most SL.UI objects use <i>SAttributes</i> as the <i>attr</i> object. \
 SL.UI objects that don\'t have any color (e.g. <i>SPane</i>) use \
 <i>SSizeAttributes</i> (which <i>SAttributes</i> inherits). If an object \
 has additional attibutes, the object will be <i>S{Object}Attributes</i> \
@@ -41,7 +45,7 @@ of the object.'; }
 
   ESectionTitle { text: "Changing the Style"; }
   EParagraph { text: '\
-When a new value is assigned to the "style" property, \
+When a new value is assigned to the <i>style</i> property, \
 the string is parsed (left to right) and new colors and sizes are bound \
 to the object\'s attibutes.';
   }
@@ -86,8 +90,6 @@ options.';
   AttributeExampleSize{}
   ECodeButton { source: "AttributeExampleSize"; }
 
-
-
   SText { style: "block text-bold"; text: 'SAttributes'; }
   EParagraph { text: 'SAttributes (most objects) support the following style \
 options.'; }
@@ -171,8 +173,8 @@ options.'; }
   EBullet { text: "success"; }
 
   EParagraph { text: '\
-Each S{Object} may add additional styling options. For example \
-SButton uses "btn-outline-primary" for setting the color.';
+Each SL.UI object may add additional styling options. For example \
+SButton uses "btn-outline-primary" for setting the button\'s color scheme.';
   }
 
 
@@ -181,8 +183,8 @@ SButton uses "btn-outline-primary" for setting the color.';
   EParagraph { text: '\
 If the styling options above don\'t meet your needs, \
 you can directly access an item\'s attributes using the \
-"attr" property. This is useful if you want to bind to \
-specific attributes. The following example binds the icon "spin" \
+<i>attr</i> property. This is useful if you want to bind to \
+specific attributes. The following example binds the icon <i>spin</i> \
 attribute to a variable.';
   }
 

StratifyLabs/Doc/CheckBoxes.qml

@@ -9,14 +9,22 @@ EPane {
     stratifyName: "SCheckBox";
   }
   ESectionTitle { text: "Description"; }
+  EParagraph { text: 'An <i>SCheckbox</i> can be used for non-exclusive \
+boolean input items. Use <i>SRadioButton</i> for exclusive boolean \
+input items.';
+  }
+
+  EReadMore {
+    tags: "RadioButtons:SRadioButton";
+  }
 
   SHLine{}
 
   ESectionTitle { text: "Example"; }
   CheckBoxExample{}
-  ECodeExample { source: "CheckBoxExample"; }
+  ECodeButton { source: "CheckBoxExample"; }
 
   ESectionTitle { text: "Custom Icons"; }
   CheckBoxExampleCustom{}
-  ECodeExample { source: "CheckBoxExampleCustom"; }
+  ECodeButton { source: "CheckBoxExampleCustom"; }
 }

StratifyLabs/Doc/Dropdowns.qml

@@ -16,7 +16,7 @@ the user to select from a list of items. It can be populated \
 using an <i>SJsonModel</i> object or simply a QML <i>ListModel</i>.'; }
 
   EReadMore {
-    tags: "Models:SJsonModel";
+    tags: "JsonModels:SJsonModel";
   }
 
   SHLine{}

StratifyLabs/Doc/EHeading.qml

@@ -17,10 +17,10 @@ SPanel {
     SText { span: 6; style: "right"; text: panel.stratifyName; }
     SLabel { span: 6; style: "left"; text: "Inherits:"; }
     SText { span: 6; style: "right"; text: panel.inherits; }
-    SLabel { span: 6; style: "left"; text: "Special Attributes:"; visible: panel.specialAttibutes !== ""; }
-    SText { span: 6; style: "right"; text: panel.specialAttibutes; visible: panel.specialAttibutes !== ""; }
-    SLabel { span: 6; style: "left"; text: "Default Size:"; visible: panel.defaultSize !== ""; }
-    SText { span: 6; style: "right"; text: panel.defaultSize; visible: panel.defaultSize !== ""; }
+    //SLabel { span: 6; style: "left"; text: "Special Attributes:"; visible: panel.specialAttibutes !== ""; }
+    //SText { span: 6; style: "right"; text: panel.specialAttibutes; visible: panel.specialAttibutes !== ""; }
+    //SLabel { span: 6; style: "left"; text: "Default Size:"; visible: panel.defaultSize !== ""; }
+    //SText { span: 6; style: "right"; text: panel.defaultSize; visible: panel.defaultSize !== ""; }
   }
 
 }

StratifyLabs/Doc/EPane.qml

@@ -3,7 +3,7 @@ import QtQuick.Controls 2.1
 import StratifyLabs.UI 2.0
 
 
-SAnimationContainer {
+SAnimator {
   property string name;
   style: "block fill";
   default property alias data: contents.data;

StratifyLabs/Doc/FontAwesome.qml

@@ -8,8 +8,8 @@ EPane {
 the latest release of Font Awesome. \
 The icons can be used using <i>SIcon</i>, \
 <i>SButton</i>, and <i>SBadge</i>. You can \
-also set the font.family of any text to <i>STheme.fontFontAwesome.name</i> \
-to use the font in other objects.'; }
+also set the <i>font.family</i> of any text to <i>STheme.fontFontAwesome.name</i> \
+to use the Font Awesome in other objects.'; }
 
   EReadMore {
     tags: "Badges:SBadge Buttons:SButton Icons:SIcon";
@@ -37,7 +37,7 @@ to use the font in other objects.'; }
 
 
   EParagraph { text: 'The current icon set is Font Awesome 4.7. The icons are available as \
-Fa.Icon.[name] where name is the name in the Font Awesome cheatsheet with "-" changed to "_".  Also, only \
+<i>Fa.Icon.[name]</i> where name is the name in the Font Awesome cheatsheet with "-" changed to "_".  Also, only \
 the original names are supported rather than the alias (e.g. use <i>Fa.Icon.times</i> rather than <i>Fa.Icon.remove</i>; see the link \
 below for more information).';
   }

StratifyLabs/Doc/Inputs.qml

@@ -12,7 +12,12 @@ EPane {
 
   ESectionTitle { text: "Description"; }
   EParagraph { text: 'An <i>SInput</i> is used
-to for a single line of text input.'; }
+to for a single line of text input. You multiple input lines, \
+use <i>STextBox</i>.'; }
+
+  EReadMore {
+    tags: "TextBoxes:STextBox";
+  }
 
   SHLine{}
 

StratifyLabs/Doc/Introduction.qml

@@ -9,7 +9,7 @@ EPane {
 Stratify Labs UI (SL.UI) 2.0 is a QML framework that works, looks, \
 and feels much like the twitter bootstrap HTML framework. The \
 colors and shapes of components can be customized using a theme \
-which uses familiar bootstrap. The UI also provides a responsive grid \
+which uses familiar bootstrap variables. The UI also provides a responsive grid \
 system that mimics bootstrap\'s ability to fit any screen.';
   }
   ESectionTitle { text: "Theme"; }
@@ -37,11 +37,16 @@ button that uses the <i>warning</i> color scheme.';
 
   EParagraph { text: '\
 SL.UI objects can be further customized by directly accessing \
-the "attr" property.'; }
+the <i>SAttributes</i> property via <i>attr</i>.'; }
+
+  EReadMore {
+    tags: "Attributes:SAttributes";
+  }
 
   IntroductionRoundButtonExample{}
   ECodeButton { source: "IntroductionRoundButtonExample"; }
 
+
   ESectionTitle { text: "Grid System"; }
   EParagraph { text: '\
 The responsive grid is based on two SL.UI objects: <i>SRow</i> and \
@@ -65,28 +70,29 @@ onWidthChanged: {
   }
 
   EParagraph { text: '\
-The following code block shows how two columns can change \
+The following example shows how two columns can change \
 to one when the screen is narrow. You can change the width of \
 the window (desktop) or switch from portrait to landscape (mobile) \
-to see the change. Small screen mode is ' + STheme.isScreenSm + '.';
+to see the change.';
   }
+  EParagraph { text: 'Small screen mode is <b>' + STheme.isScreenSm + '</b>.'; }
 
 
-    IntroductionButtonExample{}
-    ECodeButton { source: "IntroductionButtonExample"; }
+  IntroductionButtonExample{}
+  ECodeButton { source: "IntroductionButtonExample"; }
 
-    ESectionTitle { text: "Icons"; }
-    EParagraph { text: '\
-FontAwesome 4.7 is integrated in the UI. Icons can be used \
+  ESectionTitle { text: "Icons"; }
+  EParagraph { text: '\
+SL.UI comes with FontAwesome 4.7 integrated. Icons can be used \
 in <i>SBadge</i>, <i>SButton</i> and <i>SIcon</i>. Here is a sample.';
-    }
+  }
 
-    EReadMore {
-      tags: "Badges:SBadge Buttons:SButton Icons:SIcon";
-    }
+  EReadMore {
+    tags: "Badges:SBadge Buttons:SButton Icons:SIcon";
+  }
 
-    IntroductionIconExample{}
-    ECodeButton { source: "IntroductionIconExample"; }
+  IntroductionIconExample{}
+  ECodeButton { source: "IntroductionIconExample"; }
 
-  }
+}
 

StratifyLabs/Doc/JsonModelExample.qml

@@ -2,9 +2,15 @@ import QtQuick 2.7
 import StratifyLabs.UI 2.0
 
 SRow {
+  SText {
+    span: 4;
+    style: "left text-h1 top";
+    text: "List";
+  }
+
   SListGroup {
     span: 8;
-    style: "block center";
+    style: "block right";
     model: SJsonModel {
       id: model;
       json: "{ \"data\": [{ \"text\": \"List Item 1\" },

StratifyLabs/Doc/ListExample.qml

@@ -2,10 +2,17 @@ import QtQuick 2.7
 import StratifyLabs.UI 2.0
 
 SRow {
+
+  SText {
+    span: 4;
+    style: "left text-h1 top";
+    text: "List";
+  }
+
   SList {
     id: list;
     span: 8;
-    style: "block center padding-zero";
+    style: "block right padding-zero";
     model: SJsonModel {
       id: model;
       json: "{ \"data\": [{ \"text\": \"List Item 1\" },

StratifyLabs/Doc/ListExampleListGroup.qml

@@ -1,9 +1,16 @@
 import StratifyLabs.UI 2.0
 
 SRow {
+
+  SText {
+    span: 4;
+    style: "left text-h1 top";
+    text: "List Group";
+  }
+
   SListGroup {
     span: 8;
-    style: "block center";
+    style: "block right";
     model: SJsonModel {
       id: model;
       json: "{ \"data\": [{ \"text\": \"List Item 1\" },

StratifyLabs/Doc/ProgressBars.qml

@@ -11,7 +11,7 @@ EPane {
 
   ESectionTitle { text: "Description"; }
   EParagraph { text: 'An <i>SProgressBar</i> can show \
-linear progress (not used for indeterminate progrss yet).'; }
+linear progress (not used for indeterminate progress yet).'; }
 
   SHLine{}
 

StratifyLabs/Doc/ProgressCircles.qml

@@ -10,7 +10,7 @@ EPane {
   }
 
   ESectionTitle { text: "Description"; }
-  EParagraph { text: 'An <i>SProgressCircle</i> show linear \
+  EParagraph { text: 'An <i>SProgressCircle</i> shows linear \
 progress but with a greater prominance to the user than an <i>SProgressBar</i>.'; }
 
   EReadMore {