Add HTML samples to docs, other minor changes

tuckbarber · Jun 5, 2019 · 4d71c9b · 4d71c9b
1 parent d2813f5
commit 4d71c9b
Show file tree

Hide file tree

Showing 44 changed files with 320 additions and 219 deletions.
diff --git a/docs/arrange.md b/docs/arrange.md
@@ -1,12 +1,13 @@
 ---
 id: arrange
-title: Arrange Component
+title: Arrange
 ---
 
 <style>
 .example-Child {
     background-color: #329A5C;
     padding: 5px 10px;
+    text-align: center;
 }
 </style>
 
@@ -29,7 +30,7 @@ equal width, and to control their vertical alignment.
 
 * `--Arrange-gutter-size`: The width of the gutter applied by the `Arrange--withGutter` modifier class.
 
-## Examples
+## Usage
 
 For a comparison of `sizeFit` vs `sizeFill` elements:
 
@@ -39,13 +40,13 @@ For a comparison of `sizeFit` vs `sizeFill` elements:
 ```html
 <div class="example-Parent Arrange Arrange--withGutter">
     <div class="Arrange-sizeFit"> 
-        <div class="example-Child"> sizeFit<br>Element </div>
+        <div class="example-Child"> sizeFit<br>element </div>
     </div>
     <div class="Arrange-sizeFill"> 
-        <div class="example-Child"> One<br>sizeFill </div>
+        <div class="example-Child"> one<br>sizeFill </div>
     </div>
     <div class="Arrange-sizeFit">
-        <div class="example-Child"> Another<br>sizeFit </div>
+        <div class="example-Child"> another<br>sizeFit </div>
     </div>
 </div>
 ```
@@ -54,14 +55,15 @@ For a comparison of `sizeFit` vs `sizeFill` elements:
 .example-Child {
     background-color: #329A5C;
     padding: 5px 10px;
+    text-align: center;
 }
 ```
 <!--END_DOCUSAURUS_CODE_TABS-->
 
 <div class="example-Parent Arrange Arrange--withGutter">
-    <div class="Arrange-sizeFit"> <div class="example-Child"> sizeFit<br>Element </div> </div>
-    <div class="Arrange-sizeFill"> <div class="example-Child"> One<br>sizeFill </div> </div>
-    <div class="Arrange-sizeFit"> <div class="example-Child"> Another<br>sizeFit </div> </div>
+    <div class="Arrange-sizeFit"> <div class="example-Child"> sizeFit<br>element </div> </div>
+    <div class="Arrange-sizeFill"> <div class="example-Child"> one<br>sizeFill </div> </div>
+    <div class="Arrange-sizeFit"> <div class="example-Child"> another<br>sizeFit </div> </div>
 </div>
 </div>
 
@@ -73,13 +75,13 @@ Using `Arrange--equal` to keep child elements of equal size despite their conten
 ```html
 <div class="example-Parent Arrange Arrange--equal Arrange--withGutter">
     <div class="Arrange-sizeFit">
-        <div class="example-Child"> sizeFit<br>Element </div>
+        <div class="example-Child"> sizeFit<br>element </div>
     </div>
     <div class="Arrange-sizeFit">
         <div class="example-Child"> sizeFit with more content but is the same size</div>
     </div>
     <div class="Arrange-sizeFit">
-        <div class="example-Child"> Another<br>sizeFit </div>
+        <div class="example-Child"> another<br>sizeFit </div>
     </div>
 </div>
 ```
@@ -88,15 +90,16 @@ Using `Arrange--equal` to keep child elements of equal size despite their conten
 .example-Child {
     background-color: #329A5C;
     padding: 5px 10px;
+    text-align: center;
 }
 ```
 <!--END_DOCUSAURUS_CODE_TABS-->
 
 
 <div class="example-Parent Arrange Arrange--equal Arrange--withGutter">
-    <div class="Arrange-sizeFit"> <div class="example-Child"> sizeFit<br>Element </div> </div>
+    <div class="Arrange-sizeFit"> <div class="example-Child"> sizeFit<br>element </div> </div>
     <div class="Arrange-sizeFit"> <div class="example-Child"> sizeFit with more content but is the same size</div> </div>
-    <div class="Arrange-sizeFit"> <div class="example-Child"> Another<br>sizeFit </div> </div>
+    <div class="Arrange-sizeFit"> <div class="example-Child"> another<br>sizeFit </div> </div>
 </div>
 
 </div>

diff --git a/docs/breadcrumb.md b/docs/breadcrumb.md
@@ -1,6 +1,6 @@
 ---
 id: breadcrumb
-title: Breadcrumb Component
+title: Breadcrumb
 ---
 
 Provides basic setup for breadcrumb navigation

diff --git a/docs/button.md b/docs/button.md
@@ -1,6 +1,6 @@
 ---
 id: button
-title: Button Component
+title: Button
 ---
 
 Provides a basic button template that includes a very basic default theme that
@@ -41,39 +41,47 @@ Basic visual tests are in [`test/modules/button.html`](http://aptuitiv.github.io
 * `--Button-paddingSm`: Smaller padding shorthand.
 
 
-## Use
-
-Examples:
+## Usage
 
+<div class="code-sample">
+<!--DOCUSAURUS_CODE_TABS-->
+<!--HTML-->
 ```html
 <a class="Button" href="{{url}}">Sign up</a>
 
 <button class="Button is-disabled" type="button" disabled>Close</button>
 ```
+<!--END_DOCUSAURUS_CODE_TABS-->
+<a class="Button">Sign up</a>
+<button class="Button is-disabled" type="button" disabled>Close</button>
+</div>
 
 ### Theming / extending
 
 The CSS is focused on common structural requirements for buttons. You can build
 your application-specific theme styles in your app. For example:
 
+<div class="code-sample">
+
+<!--DOCUSAURUS_CODE_TABS-->
+<!--CSS-->
 ```css
 /* import the module or write these styles directly in `button.css` */
 @import "cacao/lib/button";
 
 .Button--default {
-  background-color: #eee;
-  color: #444;
-  border-color: #d9d9d9 #d9d9d9 #ccc;
+  background-color: #0E3E62;
+  color: #eee;
+  border: 5px #32648a solid;
   border-radius: 2px;
 }
 
 .Button--default:hover,
 .Button--default:focus,
 .Button--default:active,
 .Button--default.is-pressed {
-  background-color: #f5f5f5;
-  color: #222;
-  border-color: #c6c6c6 #c6c6c6 #bbb;
+  background-color: #32648a;
+  border-color: #517d9f;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
@@ -84,8 +92,41 @@ your application-specific theme styles in your app. For example:
 
 .Button--default:active,
 .Button--default.is-pressed {
-  background-color: #ccc;
+  background-color: #042a47;
   box-shadow: inset 0 1px 2px rgba(0,0,0, 0.2);
 }
 ```
+<!--HTML-->
+```html
+<a class="Button Button--default" href="{{url}}">Custom Button</a>
+```
+<!--END_DOCUSAURUS_CODE_TABS-->
+
 
+
+<style>
+.Button--default {
+  background-color: #0E3E62;
+  color: #eee;
+  border: 5px #32648a solid;
+  border-radius: 2px;
+}
+.Button--default:hover,
+.Button--default:focus,
+.Button--default:active,
+.Button--default.is-pressed {
+  background-color: #32648a;
+  border-color: #517d9f;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.Button--default:focus {
+  border-color: #069;
+  outline: 0;
+}
+.Button--default:active,
+.Button--default.is-pressed {
+  background-color: #042a47;
+  box-shadow: inset 0 1px 2px rgba(0,0,0, 0.2);
+}
+</style>
+<a class="Button Button--default" href="#theming-extending">Custom Button</a>
diff --git a/docs/constrain.md b/docs/constrain.md
@@ -1,8 +1,20 @@
 ---
 id: constrain
-title: Constrain Component
+title: Constrain
 ---
 
+<style>
+.example-Parent{
+    display: inline-block;   
+    margin: 2%;
+    width: 45%;
+    border: 2px #ddd solid;
+}
+.example-Element{
+    background-image: url(https://images.unsplash.com/photo-1559662780-c3bab6f7e00b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80);
+}
+</style>
+
 Constrains an image of unknown size to the specified aspect ratio.
 The image is potentially cropped using the specified gravity.
 Similar to `FlexEmbed` but meant to be used specifically with images.
@@ -47,6 +59,53 @@ either by applying a custom class or using inline styles.
 <div class="Constrain Constrain--16by9" style="background-image: url('...');"></div>
 ```
 
+<div class="code-sample">
+<!--DOCUSAURUS_CODE_TABS-->
+<!--HTML-->
+```html
+<div class="example-Parent">
+    <div class="example-Element Constrain Constrain--3by2"></div>
+</div>
+<div class="example-Parent">
+    <div class="example-Element Constrain Constrain--5by4"></div>
+</div>
+<div class="example-Parent">
+    <div class="example-Element Constrain Constrain--3by2 Constrain--contain Constrain--left"></div>
+</div>
+<div class="example-Parent">
+    <div class="example-Element Constrain Constrain--5by4 Constrain--contain Constrain--topRight"></div>
+</div>
+```
+<!--CSS-->
+```css
+.example-Parent{
+    display: inline-block;   
+    margin: 2%;
+    width: 45%;
+    border: 2px #ddd solid;
+}
+.example-Element{
+    /* Photo by Hannah Busing on Unsplash */
+    background-image: url(https://images.unsplash.com/photo-1559662780-c3bab6f7e00b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80);
+}
+```
+<!--END_DOCUSAURUS_CODE_TABS-->
+
+<div class="example-Parent">
+    <div class="example-Element Constrain Constrain--3by2"></div>
+</div>
+<div class="example-Parent">
+    <div class="example-Element Constrain Constrain--5by4"></div>
+</div>
+<div class="example-Parent">
+    <div class="example-Element Constrain Constrain--3by2 Constrain--contain Constrain--left"></div>
+</div>
+<div class="example-Parent">
+    <div class="example-Element Constrain Constrain--5by4 Constrain--contain Constrain--topRight"></div>
+</div>
+
+</div>
+
 You can add custom aspect ratios. For example, to create a 2.35:1 aspect
 ratio:
 
@@ -66,3 +125,4 @@ corresponding `padding-bottom` value applied using an inline style.
 ```html
 <div class="Constrain Constrain--16by9" style="background-image: url('...'); padding-bottom: 42.55%;"></div>
 ```
+
diff --git a/docs/container.md b/docs/container.md
@@ -1,6 +1,6 @@
 ---
 id: container
-title: Container Component
+title: Container
 ---
 
 Page content container.

diff --git a/docs/content.md b/docs/content.md
@@ -1,6 +1,6 @@
 ---
 id: content
-title: Content Component
+title: Content
 ---
 
 Container for main contain.

diff --git a/docs/flexembed.md b/docs/flexembed.md
@@ -1,6 +1,6 @@
 ---
 id: flexembed
-title: FlexEmbed Component
+title: FlexEmbed
 ---
 
 CSS for responsive, intrinsic ratio embeds.

diff --git a/docs/footer.md b/docs/footer.md
@@ -1,6 +1,6 @@
 ---
 id: footer
-title: Footer Component
+title: Footer
 ---
 
 To be styled.
diff --git a/docs/form.md b/docs/form.md
@@ -1,6 +1,6 @@
 ---
 id: form
-title: Form Component
+title: Form
 ---
 
 Provides custom styling for form fields and their various states.

diff --git a/docs/grid.md b/docs/grid.md
@@ -1,6 +1,6 @@
 ---
 id: grid
-title: Grid Component
+title: Grid
 ---
 
 <style>

diff --git a/docs/header.md b/docs/header.md
@@ -1,6 +1,6 @@
 ---
 id: header
-title: Header Component
+title: Header
 ---
 
 To be styled.
diff --git a/docs/image.md b/docs/image.md
@@ -1,6 +1,6 @@
 ---
 id: image
-title: Image Component
+title: Image
 ---
 
 Generic component that applies common treatments to `<img>` elements.

diff --git a/docs/list.md b/docs/list.md
@@ -1,6 +1,6 @@
 ---
 id: list
-title: List Component
+title: List
 ---
 
 Generic list component that applies common treatments to `<ul>` and 

diff --git a/docs/media.md b/docs/media.md
@@ -1,6 +1,6 @@
 ---
 id: media
-title: Media Component
+title: Media
 ---
 
 

diff --git a/docs/message.md b/docs/message.md
@@ -1,6 +1,6 @@
 ---
 id: message
-title: Message Component
+title: Message
 ---
 
 ### Available classes

diff --git a/docs/nav.md b/docs/nav.md
@@ -1,6 +1,6 @@
 ---
 id: nav
-title: Navigation Component
+title: Navigation
 ---
 
 ## MainNav

diff --git a/docs/pagination.md b/docs/pagination.md
@@ -1,6 +1,6 @@
 ---
 id: pagination
-title: Pagination Component
+title: Pagination
 ---
 
 Pagination for iterative pages.