From 4d71c9bc7b93ff5c5ad759a2c2f2455f57c177cf Mon Sep 17 00:00:00 2001 From: Tuck Date: Wed, 5 Jun 2019 16:28:12 -0400 Subject: [PATCH] Add HTML samples to docs, other minor changes --- docs/arrange.md | 27 ++++--- docs/breadcrumb.md | 2 +- docs/button.md | 63 +++++++++++++--- docs/constrain.md | 62 ++++++++++++++- docs/container.md | 2 +- docs/content.md | 2 +- docs/flexembed.md | 2 +- docs/footer.md | 2 +- docs/form.md | 2 +- docs/grid.md | 2 +- docs/header.md | 2 +- docs/image.md | 2 +- docs/list.md | 2 +- docs/media.md | 2 +- docs/message.md | 2 +- docs/nav.md | 2 +- docs/pagination.md | 2 +- docs/triangle.md | 2 +- .../cacao-docs/blog/2016/03/11/blog-post.html | 4 +- .../blog/2016/03/11/blog-post/index.html | 4 +- website/build/cacao-docs/blog/atom.xml | 4 +- website/build/cacao-docs/blog/feed.xml | 6 +- website/build/cacao-docs/blog/index.html | 4 +- website/build/cacao-docs/css/main.css | 4 +- website/build/cacao-docs/docs/button.html | 75 +++++++++---------- .../build/cacao-docs/docs/button/index.html | 75 +++++++++---------- website/build/cacao-docs/docs/grid.html | 55 +++++++------- website/build/cacao-docs/docs/grid/index.html | 55 +++++++------- website/build/cacao-docs/docs/main.html | 8 +- website/build/cacao-docs/docs/main/index.html | 8 +- website/build/cacao-docs/docs/nav.html | 10 +-- website/build/cacao-docs/docs/nav/index.html | 10 +-- website/build/cacao-docs/en/help.html | 4 +- website/build/cacao-docs/en/help/index.html | 4 +- website/build/cacao-docs/en/index.html | 2 +- website/build/cacao-docs/en/users.html | 2 +- website/build/cacao-docs/en/users/index.html | 2 +- website/build/cacao-docs/help.html | 4 +- website/build/cacao-docs/help/index.html | 4 +- website/build/cacao-docs/index.html | 2 +- website/build/cacao-docs/users.html | 2 +- website/build/cacao-docs/users/index.html | 2 +- website/siteConfig.js | 2 +- website/static/css/custom.css | 5 ++ 44 files changed, 320 insertions(+), 219 deletions(-) diff --git a/docs/arrange.md b/docs/arrange.md index 485e6f1..5279c44 100644 --- a/docs/arrange.md +++ b/docs/arrange.md @@ -1,12 +1,13 @@ --- id: arrange -title: Arrange Component +title: Arrange --- @@ -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
-
sizeFit
Element
+
sizeFit
element
-
One
sizeFill
+
one
sizeFill
-
Another
sizeFit
+
another
sizeFit
``` @@ -54,14 +55,15 @@ For a comparison of `sizeFit` vs `sizeFill` elements: .example-Child { background-color: #329A5C; padding: 5px 10px; + text-align: center; } ```
-
sizeFit
Element
-
One
sizeFill
-
Another
sizeFit
+
sizeFit
element
+
one
sizeFill
+
another
sizeFit
@@ -73,13 +75,13 @@ Using `Arrange--equal` to keep child elements of equal size despite their conten ```html
-
sizeFit
Element
+
sizeFit
element
sizeFit with more content but is the same size
-
Another
sizeFit
+
another
sizeFit
``` @@ -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; } ```
-
sizeFit
Element
+
sizeFit
element
sizeFit with more content but is the same size
-
Another
sizeFit
+
another
sizeFit
diff --git a/docs/breadcrumb.md b/docs/breadcrumb.md index 2e65873..d834e5a 100644 --- 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 index ff380a6..40f7add 100644 --- 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,29 +41,38 @@ Basic visual tests are in [`test/modules/button.html`](http://aptuitiv.github.io * `--Button-paddingSm`: Smaller padding shorthand. -## Use - -Examples: +## Usage +
+ + ```html Sign up ``` + +Sign up + +
### 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: +
+ + + ```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; } @@ -71,9 +80,8 @@ your application-specific theme styles in your app. For example: .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 +Custom Button +``` + + + + +Custom Button \ No newline at end of file diff --git a/docs/constrain.md b/docs/constrain.md index d765c71..2b62693 100644 --- a/docs/constrain.md +++ b/docs/constrain.md @@ -1,8 +1,20 @@ --- id: constrain -title: Constrain Component +title: Constrain --- + + 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.
``` +
+ + +```html +
+
+
+
+
+
+
+
+
+
+
+
+``` + +```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); +} +``` + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ 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
``` + diff --git a/docs/container.md b/docs/container.md index 55f88c3..2db4f98 100644 --- 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 index 06c1f84..acf65e7 100644 --- 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 index e736790..c8656c7 100644 --- 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 index 8e0fea9..3884771 100644 --- a/docs/footer.md +++ b/docs/footer.md @@ -1,6 +1,6 @@ --- id: footer -title: Footer Component +title: Footer --- To be styled. \ No newline at end of file diff --git a/docs/form.md b/docs/form.md index 6cb8854..c8b75a6 100644 --- 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 index f795886..0be2685 100644 --- a/docs/grid.md +++ b/docs/grid.md @@ -1,6 +1,6 @@ --- id: grid -title: Grid Component +title: Grid --- +Custom Button
← BreadcrumbConstrain →
\ No newline at end of file diff --git a/website/build/cacao-docs/docs/button/index.html b/website/build/cacao-docs/docs/button/index.html index a4d622a..3d9f111 100644 --- a/website/build/cacao-docs/docs/button/index.html +++ b/website/build/cacao-docs/docs/button/index.html @@ -1,6 +1,6 @@ -Button Component ·

Button

Provides a basic button template that includes a very basic default theme that is ready to be extended.

Basic visual tests are in test/modules/button.html.

Available classes

@@ -88,44 +88,43 @@

--Button-paddingLg: Larger padding shorthand.
  • --Button-paddingSm: Smaller padding shorthand.
    • -

    Use

    -

    Examples:

    -
    <a class="Button" href="{{url}}">Sign up</a>
-
-<button class="Button is-disabled" type="button" disabled>Close</button>
-
    +

    Usage

    +
    +
    <a class="Button" href="{{url}}">Sign up</a>

    <button class="Button is-disabled" type="button" disabled>Close</button>
    +
    +Sign up + +

    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:

    -
    /* 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;
-  border-radius: 2px;
+
    
+
    /* import the module or write these styles directly in `button.css` */
    @import "cacao/lib/button";

    .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);
    }
    
+
    <a class="Button Button--default" href="{{url}}">Custom Button</a>
    
+
    
+
+Custom Button
    ← BreadcrumbConstrain →
    \ No newline at end of file diff --git a/website/build/cacao-docs/docs/grid.html b/website/build/cacao-docs/docs/grid.html index d21786d..6846e75 100644 --- a/website/build/cacao-docs/docs/grid.html +++ b/website/build/cacao-docs/docs/grid.html @@ -1,4 +1,4 @@ -Grid Component ·
    ← FormHeader →
    \ No newline at end of file diff --git a/website/build/cacao-docs/docs/grid/index.html b/website/build/cacao-docs/docs/grid/index.html index d21786d..6846e75 100644 --- a/website/build/cacao-docs/docs/grid/index.html +++ b/website/build/cacao-docs/docs/grid/index.html @@ -1,4 +1,4 @@ -Grid Component ·
    ← FormHeader →
    \ No newline at end of file diff --git a/website/build/cacao-docs/docs/main.html b/website/build/cacao-docs/docs/main.html index 62f03af..20a9665 100644 --- a/website/build/cacao-docs/docs/main.html +++ b/website/build/cacao-docs/docs/main.html @@ -1,6 +1,6 @@ -Intro to Cacao ·
    \ No newline at end of file diff --git a/website/build/cacao-docs/en/help.html b/website/build/cacao-docs/en/help.html index 1037b60..0977646 100644 --- a/website/build/cacao-docs/en/help.html +++ b/website/build/cacao-docs/en/help.html @@ -1,7 +1,7 @@ - · Documentation for the Cacao CSS Framework

    Need help?

    This project is maintained by a dedicated group of people.

    Browse Docs

    +Cacao Documentation · Documentation for the Cacao CSS Framework

    Need help?

    This project is maintained by a dedicated group of people.

    Browse Docs

    Learn more using the documentation on this site.

    Join the community

    Ask questions about the documentation and project

    Stay up to date

    Find out what's new with this project

    -
    \ No newline at end of file +

    \ No newline at end of file diff --git a/website/build/cacao-docs/en/help/index.html b/website/build/cacao-docs/en/help/index.html index 1037b60..0977646 100644 --- a/website/build/cacao-docs/en/help/index.html +++ b/website/build/cacao-docs/en/help/index.html @@ -1,7 +1,7 @@ - · Documentation for the Cacao CSS Framework

    Need help?

    This project is maintained by a dedicated group of people.

    Browse Docs

    +Cacao Documentation · Documentation for the Cacao CSS Framework

    Need help?

    This project is maintained by a dedicated group of people.

    Browse Docs

    Learn more using the documentation on this site.

    Join the community

    Ask questions about the documentation and project

    Stay up to date

    Find out what's new with this project

    -
    \ No newline at end of file +

    \ No newline at end of file diff --git a/website/build/cacao-docs/en/index.html b/website/build/cacao-docs/en/index.html index 83250c2..a0a317e 100644 --- a/website/build/cacao-docs/en/index.html +++ b/website/build/cacao-docs/en/index.html @@ -1 +1 @@ - · Documentation for the Cacao CSS Framework

    Documentation for the Cacao CSS Framework

    \ No newline at end of file +Cacao Documentation · Documentation for the Cacao CSS Framework

    Cacao DocumentationDocumentation for the Cacao CSS Framework

    \ No newline at end of file diff --git a/website/build/cacao-docs/en/users.html b/website/build/cacao-docs/en/users.html index 02c1a1f..b888fa0 100644 --- a/website/build/cacao-docs/en/users.html +++ b/website/build/cacao-docs/en/users.html @@ -1 +1 @@ - · Documentation for the Cacao CSS Framework

    Who is Using This?

    This project is used by many folks

    User1

    Are you using this project?

    Add your company
    \ No newline at end of file +Cacao Documentation · Documentation for the Cacao CSS Framework

    Who is Using This?

    This project is used by many folks

    User1

    Are you using this project?

    Add your company
    \ No newline at end of file diff --git a/website/build/cacao-docs/en/users/index.html b/website/build/cacao-docs/en/users/index.html index 02c1a1f..b888fa0 100644 --- a/website/build/cacao-docs/en/users/index.html +++ b/website/build/cacao-docs/en/users/index.html @@ -1 +1 @@ - · Documentation for the Cacao CSS Framework

    Who is Using This?

    This project is used by many folks

    User1

    Are you using this project?

    Add your company
    \ No newline at end of file +Cacao Documentation · Documentation for the Cacao CSS Framework

    Who is Using This?

    This project is used by many folks

    User1

    Are you using this project?

    Add your company
    \ No newline at end of file diff --git a/website/build/cacao-docs/help.html b/website/build/cacao-docs/help.html index 2cabb46..b737d6a 100644 --- a/website/build/cacao-docs/help.html +++ b/website/build/cacao-docs/help.html @@ -1,7 +1,7 @@ - · Documentation for the Cacao CSS Framework

    Need help?

    This project is maintained by a dedicated group of people.

    Browse Docs

    +Cacao Documentation · Documentation for the Cacao CSS Framework

    Need help?

    This project is maintained by a dedicated group of people.

    Browse Docs

    Learn more using the documentation on this site.

    Join the community

    Ask questions about the documentation and project

    Stay up to date

    Find out what's new with this project

    -
    \ No newline at end of file +

    \ No newline at end of file diff --git a/website/build/cacao-docs/help/index.html b/website/build/cacao-docs/help/index.html index 2cabb46..b737d6a 100644 --- a/website/build/cacao-docs/help/index.html +++ b/website/build/cacao-docs/help/index.html @@ -1,7 +1,7 @@ - · Documentation for the Cacao CSS Framework

    Need help?

    This project is maintained by a dedicated group of people.

    Browse Docs

    +Cacao Documentation · Documentation for the Cacao CSS Framework

    Need help?

    This project is maintained by a dedicated group of people.

    Browse Docs

    Learn more using the documentation on this site.

    Join the community

    Ask questions about the documentation and project

    Stay up to date

    Find out what's new with this project

    -
    \ No newline at end of file +

    \ No newline at end of file diff --git a/website/build/cacao-docs/index.html b/website/build/cacao-docs/index.html index 0529167..e8bf77f 100644 --- a/website/build/cacao-docs/index.html +++ b/website/build/cacao-docs/index.html @@ -1 +1 @@ - · Documentation for the Cacao CSS Framework

    Documentation for the Cacao CSS Framework

    \ No newline at end of file +Cacao Documentation · Documentation for the Cacao CSS Framework

    Cacao DocumentationDocumentation for the Cacao CSS Framework

    \ No newline at end of file diff --git a/website/build/cacao-docs/users.html b/website/build/cacao-docs/users.html index 8601935..38b264a 100644 --- a/website/build/cacao-docs/users.html +++ b/website/build/cacao-docs/users.html @@ -1 +1 @@ - · Documentation for the Cacao CSS Framework

    Who is Using This?

    This project is used by many folks

    User1

    Are you using this project?

    Add your company
    \ No newline at end of file +Cacao Documentation · Documentation for the Cacao CSS Framework

    Who is Using This?

    This project is used by many folks

    User1

    Are you using this project?

    Add your company
    \ No newline at end of file diff --git a/website/build/cacao-docs/users/index.html b/website/build/cacao-docs/users/index.html index 8601935..38b264a 100644 --- a/website/build/cacao-docs/users/index.html +++ b/website/build/cacao-docs/users/index.html @@ -1 +1 @@ - · Documentation for the Cacao CSS Framework

    Who is Using This?

    This project is used by many folks

    User1

    Are you using this project?

    Add your company
    \ No newline at end of file +Cacao Documentation · Documentation for the Cacao CSS Framework

    Who is Using This?

    This project is used by many folks

    User1

    Are you using this project?

    Add your company
    \ No newline at end of file diff --git a/website/siteConfig.js b/website/siteConfig.js index ce6a671..167b0f3 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -21,7 +21,7 @@ const users = [ ]; const siteConfig = { - title: '', // Title for your website. + title: 'Cacao Documentation', // Title for your website. tagline: 'Documentation for the Cacao CSS Framework', url: 'https://your-docusaurus-test-site.com', // Your website URL baseUrl: '/cacao-docs/', // Base URL for your project */ diff --git a/website/static/css/custom.css b/website/static/css/custom.css index 79076f3..68e90c7 100644 --- a/website/static/css/custom.css +++ b/website/static/css/custom.css @@ -16,6 +16,11 @@ } /* Custom CSS below */ + +.headerTitleWithLogo { + display: none !important; +} + .tab-content { height: 250px; overflow: scroll;