From 47fba7cf5e930eac9ba709dd327488e0a321f3c9 Mon Sep 17 00:00:00 2001 From: Brian Hernandez Date: Sun, 30 Apr 2017 11:49:02 -0400 Subject: [PATCH] Added HTML/YML files from docs/_components fold of original repo to source/components folder. --- source/components/accordion/accordion.html | 46 ++ .../components/audio-player/audio-player.html | 29 + .../components/bookmarklet/bookmarklet.html | 39 ++ .../card/card-custom-background.html | 20 + source/components/card/card-with-button.html | 24 + source/components/card/card-with-image.html | 23 + source/components/card/card-with-product.html | 27 + source/components/card/card-with-profile.html | 28 + source/components/card/card.html | 18 + .../carousel-with-dropping-circle-nav.html | 52 ++ source/components/carousel/carousel-fade.html | 42 ++ .../components/carousel/carousel-slide.html | 56 ++ .../components/carousel/carousel-thumbs.html | 76 +++ .../components/code-markup/code-markup.html | 161 +++++ .../crumble/crumble-color-variations.html | 147 +++++ .../components/crumble/crumble-default.html | 113 ++++ .../crumble/crumble-full-width.html | 100 +++ .../crumble/crumble-space-around.html | 54 ++ .../css-animations/css-animations.html | 580 ++++++++++++++++++ source/components/cubby/cubby.html | 48 ++ .../dot-navigation/dot-navigation-bounce.html | 17 + .../dot-navigation/dot-navigation-flip.html | 17 + .../dot-navigation-rotating.html | 17 + .../dot-navigation/dot-navigation-spin.html | 17 + .../dot-validator/dot-validator.html | 79 +++ source/components/dropdot/dropdot.html | 47 ++ .../fade-lines-on-scroll.html | 17 + .../foldout-popup/foldout-popup.html | 43 ++ .../components/fontana-form/fontana-form.html | 30 + .../forms-standard-background-variations.html | 81 +++ .../forms/forms-standard-buttons.html | 111 ++++ .../components/forms/forms-standard-card.html | 125 ++++ .../forms/forms-standard-checkboxes.html | 48 ++ .../forms/forms-standard-radio.html | 48 ++ .../forms/forms-standard-select.html | 159 +++++ source/components/forms/forms-standard.html | 197 ++++++ .../fullscreen-gallery.html | 46 ++ source/components/grid/grid.html | 111 ++++ source/components/herald/herald.html | 35 ++ source/components/ikon/ikon.html | 144 +++++ .../innovative-login-form.html | 26 + .../input-scanner/input-scanner.html | 15 + source/components/layers-2d/layers-2d.html | 87 +++ source/components/layers/layers.html | 95 +++ .../components/lists/list-group-columns.html | 31 + source/components/lists/list-group-icons.html | 17 + .../lists/list-group-images-rounded.html | 26 + .../components/lists/list-group-images.html | 26 + .../components/lists/list-group-labels.html | 17 + source/components/lists/list-group-links.html | 18 + source/components/lists/list-group.html | 17 + source/components/lists/lists.html | 41 ++ .../minimalist-carousel-two.html | 39 ++ source/components/modals/modals-basic.html | 27 + source/components/modals/modals-dialog.html | 24 + source/components/modals/modals-fixed.html | 25 + .../components/modals/modals-full-screen.html | 24 + source/components/persona/persona.html | 107 ++++ source/components/pop-over/pop-over.html | 52 ++ .../progress-bars-bck-variations.html | 65 ++ .../progress-bars-border-shadow.html | 59 ++ .../progress-bars/progress-bars-infinite.html | 56 ++ .../progress-bars/progress-bars-messages.html | 25 + .../progress-bars-percentages.html | 41 ++ .../progress-bars/progress-bars-rounded.html | 28 + .../progress-bars/progress-bars-shapes.html | 42 ++ .../progress-bars/progress-bars-sizes.html | 40 ++ .../progress-bars/progress-bars-status.html | 29 + .../progress-bars/progress-bars.html | 25 + .../components/rainbow-form/rainbow-form.html | 49 ++ .../readability-improvement-panel.html | 34 + source/components/reveal/reveal.html | 18 + source/components/safety/safety.html | 24 + source/components/scrollspy/scrollspy.html | 12 + .../search-with-long-edit.html | 41 ++ source/components/sift/sift.html | 55 ++ .../single-input-form-default.html | 60 ++ .../single-input-form-minimalist.html | 62 ++ .../spiraltext/spiraltext-button.html | 15 + .../spiraltext/spiraltext-circle.html | 22 + .../spiraltext/spiraltext-fullheight.html | 15 + .../spiraltext/spiraltext-link.html | 10 + .../spiraltext/spiraltext-text.html | 19 + source/components/sticky/sticky.html | 27 + .../svg-pagination/svg-pagination.html | 188 ++++++ source/components/switch/switch.html | 23 + source/components/tabs/tabs-animations.html | 269 ++++++++ source/components/tabs/tabs-border.html | 72 +++ source/components/tabs/tabs-card.html | 65 ++ .../tabs/tabs-color-variations.html | 71 +++ source/components/tabs/tabs-flex-helpers.html | 125 ++++ source/components/tabs/tabs-icons.html | 95 +++ source/components/tabs/tabs-lateral-nav.html | 114 ++++ .../tabs/tabs-panel-animations.html | 267 ++++++++ source/components/tabs/tabs-standard.html | 69 +++ source/components/tabs/tabs-sticky.html | 123 ++++ .../components/text2speech/text2speech.html | 36 ++ .../tooltip/tooltip-scale-from-corner.html | 16 + source/components/tooltip/tooltip.html | 61 ++ .../typography/typography-utils.html | 27 + source/components/typography/typography.html | 36 ++ .../utilities/utilities-floats.html | 14 + .../utilities/utilities-text-transform.html | 16 + .../utilities/utilities-visibility.html | 27 + .../versatile-table/versatile-table.html | 16 + 105 files changed, 6389 insertions(+) create mode 100644 source/components/accordion/accordion.html create mode 100644 source/components/audio-player/audio-player.html create mode 100644 source/components/bookmarklet/bookmarklet.html create mode 100644 source/components/card/card-custom-background.html create mode 100644 source/components/card/card-with-button.html create mode 100644 source/components/card/card-with-image.html create mode 100644 source/components/card/card-with-product.html create mode 100644 source/components/card/card-with-profile.html create mode 100644 source/components/card/card.html create mode 100644 source/components/carousel-with-dropping-circle-nav/carousel-with-dropping-circle-nav.html create mode 100644 source/components/carousel/carousel-fade.html create mode 100644 source/components/carousel/carousel-slide.html create mode 100644 source/components/carousel/carousel-thumbs.html create mode 100644 source/components/code-markup/code-markup.html create mode 100644 source/components/crumble/crumble-color-variations.html create mode 100644 source/components/crumble/crumble-default.html create mode 100644 source/components/crumble/crumble-full-width.html create mode 100644 source/components/crumble/crumble-space-around.html create mode 100644 source/components/css-animations/css-animations.html create mode 100644 source/components/cubby/cubby.html create mode 100644 source/components/dot-navigation/dot-navigation-bounce.html create mode 100644 source/components/dot-navigation/dot-navigation-flip.html create mode 100644 source/components/dot-navigation/dot-navigation-rotating.html create mode 100644 source/components/dot-navigation/dot-navigation-spin.html create mode 100644 source/components/dot-validator/dot-validator.html create mode 100644 source/components/dropdot/dropdot.html create mode 100644 source/components/fade-lines-on-scroll/fade-lines-on-scroll.html create mode 100644 source/components/foldout-popup/foldout-popup.html create mode 100644 source/components/fontana-form/fontana-form.html create mode 100644 source/components/forms/forms-standard-background-variations.html create mode 100644 source/components/forms/forms-standard-buttons.html create mode 100644 source/components/forms/forms-standard-card.html create mode 100644 source/components/forms/forms-standard-checkboxes.html create mode 100644 source/components/forms/forms-standard-radio.html create mode 100644 source/components/forms/forms-standard-select.html create mode 100644 source/components/forms/forms-standard.html create mode 100644 source/components/fullscreen-gallery/fullscreen-gallery.html create mode 100644 source/components/grid/grid.html create mode 100644 source/components/herald/herald.html create mode 100644 source/components/ikon/ikon.html create mode 100644 source/components/innovative-login-form/innovative-login-form.html create mode 100644 source/components/input-scanner/input-scanner.html create mode 100644 source/components/layers-2d/layers-2d.html create mode 100644 source/components/layers/layers.html create mode 100644 source/components/lists/list-group-columns.html create mode 100644 source/components/lists/list-group-icons.html create mode 100644 source/components/lists/list-group-images-rounded.html create mode 100644 source/components/lists/list-group-images.html create mode 100644 source/components/lists/list-group-labels.html create mode 100644 source/components/lists/list-group-links.html create mode 100644 source/components/lists/list-group.html create mode 100644 source/components/lists/lists.html create mode 100644 source/components/minimalist-carousel-two/minimalist-carousel-two.html create mode 100644 source/components/modals/modals-basic.html create mode 100644 source/components/modals/modals-dialog.html create mode 100644 source/components/modals/modals-fixed.html create mode 100644 source/components/modals/modals-full-screen.html create mode 100644 source/components/persona/persona.html create mode 100644 source/components/pop-over/pop-over.html create mode 100644 source/components/progress-bars/progress-bars-bck-variations.html create mode 100644 source/components/progress-bars/progress-bars-border-shadow.html create mode 100644 source/components/progress-bars/progress-bars-infinite.html create mode 100644 source/components/progress-bars/progress-bars-messages.html create mode 100644 source/components/progress-bars/progress-bars-percentages.html create mode 100644 source/components/progress-bars/progress-bars-rounded.html create mode 100644 source/components/progress-bars/progress-bars-shapes.html create mode 100644 source/components/progress-bars/progress-bars-sizes.html create mode 100644 source/components/progress-bars/progress-bars-status.html create mode 100644 source/components/progress-bars/progress-bars.html create mode 100644 source/components/rainbow-form/rainbow-form.html create mode 100644 source/components/readability-improvement-panel/readability-improvement-panel.html create mode 100644 source/components/reveal/reveal.html create mode 100644 source/components/safety/safety.html create mode 100644 source/components/scrollspy/scrollspy.html create mode 100644 source/components/search-with-long-edit/search-with-long-edit.html create mode 100644 source/components/sift/sift.html create mode 100644 source/components/single-input-form/single-input-form-default.html create mode 100644 source/components/single-input-form/single-input-form-minimalist.html create mode 100644 source/components/spiraltext/spiraltext-button.html create mode 100644 source/components/spiraltext/spiraltext-circle.html create mode 100644 source/components/spiraltext/spiraltext-fullheight.html create mode 100644 source/components/spiraltext/spiraltext-link.html create mode 100644 source/components/spiraltext/spiraltext-text.html create mode 100644 source/components/sticky/sticky.html create mode 100644 source/components/svg-pagination/svg-pagination.html create mode 100644 source/components/switch/switch.html create mode 100644 source/components/tabs/tabs-animations.html create mode 100644 source/components/tabs/tabs-border.html create mode 100644 source/components/tabs/tabs-card.html create mode 100644 source/components/tabs/tabs-color-variations.html create mode 100644 source/components/tabs/tabs-flex-helpers.html create mode 100644 source/components/tabs/tabs-icons.html create mode 100644 source/components/tabs/tabs-lateral-nav.html create mode 100644 source/components/tabs/tabs-panel-animations.html create mode 100644 source/components/tabs/tabs-standard.html create mode 100644 source/components/tabs/tabs-sticky.html create mode 100644 source/components/text2speech/text2speech.html create mode 100644 source/components/tooltip/tooltip-scale-from-corner.html create mode 100644 source/components/tooltip/tooltip.html create mode 100644 source/components/typography/typography-utils.html create mode 100644 source/components/typography/typography.html create mode 100644 source/components/utilities/utilities-floats.html create mode 100644 source/components/utilities/utilities-text-transform.html create mode 100644 source/components/utilities/utilities-visibility.html create mode 100644 source/components/versatile-table/versatile-table.html diff --git a/source/components/accordion/accordion.html b/source/components/accordion/accordion.html new file mode 100644 index 0000000..af0122e --- /dev/null +++ b/source/components/accordion/accordion.html @@ -0,0 +1,46 @@ +--- +title: "Default" +description: | +

The accordion is a standard UI component that has been used around the web for some time now. Our accordion is built off of an unordered list structure containing the class .evo_c-accordion. The tab title and its contents are contained within an li element with the class .evo_c-accordion__bellow (a bellow is what expands and contracts on an actual accordion). The tab titles are styled anchor tags (a href="#") with a class of .evo_c-accordion__title for semantics. This is then followed by the content for each tab contained within a div with the class .evo_c-accordion__content. The expanding and contracting functionality is accomplished with some JavaScript via a hook in the anchor tag with the class .js-c-accordion-target. Multiple accordions can be used on the same page and will expand and contract independently from one another. + + You can easily use this component in your next project by using the following HTML code (along with the JavaScript code) as a base while adding your own content within the div class="evo_c-accordion__content tags. To add more tab titles, simply add more li elements in the same pattern.

+author: Brian Hernandez +category: standard +type: accordion +order: 1 +--- + + diff --git a/source/components/audio-player/audio-player.html b/source/components/audio-player/audio-player.html new file mode 100644 index 0000000..d02b316 --- /dev/null +++ b/source/components/audio-player/audio-player.html @@ -0,0 +1,29 @@ +--- +title: "Default" +description:

A basic cross-browser audio player. The player uses h-bck__primary--base class for the background. You can change the word primary to any of primary2, secondary, background, accent, accent2, accent3, and accent4. For a darker variation, change the word base in the class helper name to dark.

+author: Joseph Matembu +category: standard +type: Audio Player +order: 1 +--- + +
+
+
+
+
+ + +
+ 00:00 +
+ +
+
+ +
+
+
diff --git a/source/components/bookmarklet/bookmarklet.html b/source/components/bookmarklet/bookmarklet.html new file mode 100644 index 0000000..5250b26 --- /dev/null +++ b/source/components/bookmarklet/bookmarklet.html @@ -0,0 +1,39 @@ +--- +title: "Bookmarklet" +description: +
+

Using Bookmarklet

+

To use bookmarklet, highlight some text. If the text is able to be bookmarked a small dialogue will pop up, giving you the option to bookmark or not. Users can also use the keyboard shortcut Shift + Control + L + M. Currently you can only bookmark text that is inside of a single HTML tag. In other words you may not select text that belongs to two different paragraphs or splits any other node like a span or header. The component will warn you if you split nodes or try and activate the bookmark without selecting any text.

+ +

Once a bookmark has been created it will show up in the small widget on the right-hand side of the screen. Each bookmark can be clicked on to quickly navigate the page to that place in the text. In addition there is a convenient "Google this bookmark" link for each list item which will initiate a Google search with the query pre-filled by the bookmark text. You may clear individual bookmarks by clicking on the close icon, or clear all current bookmarks by clicking the "Clear all" button at the bottom of the bookmark list.

+ +

Including Bookmarklet

+

To include Bookmarklet on a page simply add the following markup somewhere in the body tag of your page and include bookmarklet.js before the closing body tag.

+ +

Highlight Color

+

If you don't like the default yellow, a custom highlight color can be specified by adding a valid named color or hex color value to the data-highlight-color attribute. For example:

+ +

Limiting the Component's Scope

+

You can limit the scope of bookmarklet's highlighting and bookmark creation by adding the data-limit-bookmarklet attribute to any element and the bookmarking will only be active for that element and its descendants. These demo bookmarklet component paragraphs are limited in this way so that the component will not extend to other sections of the Evolution UI demo site.

+
+type: bookmarklet +author: Sam Chittenden +category: evolution +order: 1 +--- + + +
+ bookmark +

Bookmarks

+
    +
+ clear all +
+ +
+

Bookmark this selection?

+ done Yes! + close No. + +
diff --git a/source/components/card/card-custom-background.html b/source/components/card/card-custom-background.html new file mode 100644 index 0000000..760b95c --- /dev/null +++ b/source/components/card/card-custom-background.html @@ -0,0 +1,20 @@ +--- +title: "Basic Card with background color" +description:

Many variations are available matching the color palette. This card for example, is using h-bck__secondary--dark class helper for its background color. For other variations, replace the word secondary in the class with any of accent, accent2, accent3, accent4, primary, primary2, secondary, background. Remember to use evo_h-txt-light or evo_h-txt-light2 on the text.

+author: Joseph Matembu +category: standard +type: cards +order: 2 +--- + +
+
+
+
+

Headline

+ Sub headline +

Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.

+
+
+
+
diff --git a/source/components/card/card-with-button.html b/source/components/card/card-with-button.html new file mode 100644 index 0000000..dabc622 --- /dev/null +++ b/source/components/card/card-with-button.html @@ -0,0 +1,24 @@ +--- +title: "Card with buttons" +description: +author: Joseph Matembu +category: standard +type: cards +order: 3 +--- + +
+
+
+
+

Headline

+ Sub headline +

Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.

+
+
+ + +
+
+
+
diff --git a/source/components/card/card-with-image.html b/source/components/card/card-with-image.html new file mode 100644 index 0000000..80662da --- /dev/null +++ b/source/components/card/card-with-image.html @@ -0,0 +1,23 @@ +--- +title: "Card with Image" +description: +author: Joseph Matembu +category: standard +type: cards +order: 4 +--- + +
+
+
+
+ +
+

Headline

+ Sub headline +
+

Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights. Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.

+
+
+
+
diff --git a/source/components/card/card-with-product.html b/source/components/card/card-with-product.html new file mode 100644 index 0000000..02e0779 --- /dev/null +++ b/source/components/card/card-with-product.html @@ -0,0 +1,27 @@ +--- +title: "Product Card" +description: +author: Joseph Matembu +category: standard +type: cards +order: 5 +--- + +
+
+
+
+ +
+
+

Red Shoe

+

Replenish, earth tree replenish

+
+
+ $29.99 + share + +
+
+
+
diff --git a/source/components/card/card-with-profile.html b/source/components/card/card-with-profile.html new file mode 100644 index 0000000..5065fff --- /dev/null +++ b/source/components/card/card-with-profile.html @@ -0,0 +1,28 @@ +--- +title: "Profile Card" +description: +author: Joseph Matembu +category: standard +type: cards +order: 6 +--- + +
+
+
+
+ + +
+
+

John Brave

+

Replenish, earth tree replenish

+
+
+ favorite + thumb_up + +
+
+
+
diff --git a/source/components/card/card.html b/source/components/card/card.html new file mode 100644 index 0000000..1e74da9 --- /dev/null +++ b/source/components/card/card.html @@ -0,0 +1,18 @@ +--- +title: "Basic Card" +description:

A basic card component

+author: Joseph Matembu +category: standard +type: cards +order: 1 +--- + +
+
+
+

Headline

+ Sub headline +

Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.

+
+
+
diff --git a/source/components/carousel-with-dropping-circle-nav/carousel-with-dropping-circle-nav.html b/source/components/carousel-with-dropping-circle-nav/carousel-with-dropping-circle-nav.html new file mode 100644 index 0000000..17e8edb --- /dev/null +++ b/source/components/carousel-with-dropping-circle-nav/carousel-with-dropping-circle-nav.html @@ -0,0 +1,52 @@ +--- +title: "" +description: +

Carousel with dropping circles takes minimalism to the next level with a clean interface to showcase five images of your choosing.

+type: carousel with drop navigation +order: 1 +--- + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ boat +
+ +
+ sky +
+ +
+ moutains +
+ +
+ castle +
+ +
+ sun +
+
+ +
diff --git a/source/components/carousel/carousel-fade.html b/source/components/carousel/carousel-fade.html new file mode 100644 index 0000000..a4615c9 --- /dev/null +++ b/source/components/carousel/carousel-fade.html @@ -0,0 +1,42 @@ +--- +title: "Carousel - Fade transition" +description: +

Standard carousel with a fade transition between slides. It can contain bullet navigation, arrow navigation, or thumbnail navigation. Arrow navigation can be combined with both bullet and thumbnails

+author: Sam Chittenden +category: standard +type: carousel +order: 1 +--- + +
+
+ +
    +
  1. +
  2. +
  3. +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + navigate_before + + + navigate_next + +
+
+
diff --git a/source/components/carousel/carousel-slide.html b/source/components/carousel/carousel-slide.html new file mode 100644 index 0000000..ef4b4ae --- /dev/null +++ b/source/components/carousel/carousel-slide.html @@ -0,0 +1,56 @@ +--- +title: "Carousel - Slide transition" +description: +

Standard carousel with a sliding transition between slides. This example also contains slides with multiple images.

+author: Sam Chittenden +category: standard +type: carousel +order: 2 +--- + +
+
+ +
    +
  1. +
  2. +
  3. +
  4. +
+ +
+ +
+
+
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + + navigate_before + + + navigate_next + +
+
+
diff --git a/source/components/carousel/carousel-thumbs.html b/source/components/carousel/carousel-thumbs.html new file mode 100644 index 0000000..660188c --- /dev/null +++ b/source/components/carousel/carousel-thumbs.html @@ -0,0 +1,76 @@ +--- +title: "Carousel - Slide transition with thumbnail navigation" +description: +

Standard carousel with a sliding transition between slides. This utilizes a set of thumbnails in place of the bulleted navigation.

+author: Sam Chittenden +category: standard +type: carousel +order: 3 +--- + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + navigate_before + + + navigate_next + +
+ +
    +
  1. + +
    2. +
  2. + +
    3. +
  3. + +
    4. +
  4. + +
    5. +
  5. + +
    6. +
  6. + +
    7. +
  7. + +
    8. +
+
+
diff --git a/source/components/code-markup/code-markup.html b/source/components/code-markup/code-markup.html new file mode 100644 index 0000000..6fbb7a7 --- /dev/null +++ b/source/components/code-markup/code-markup.html @@ -0,0 +1,161 @@ +--- +title: "Default" +description: | +

The Code Markup component is a standard tabs UI that can be used to display HTML, CSS and JavaScript code or really any piece of content that would come in a triad. The entire component is wrapped in a div with a class of .evo_c-markup. For the tab titles and styling, we use an ul with a class of .evo_c-markup__tabs. To separate out the JavaScript functionality, there is also a class of .js-c-markup-toggle on the ul that will help to target which tab is clicked. When a tab is clicked, this will reveal the contents of that tab. If the second click is made on an open or active tab, it will close the associated content and deactiveate the tab. Each tab is a li element with the class .evo_c-markup__item. The content is divided into 3 divs, each with a class of .evo_c-markup__content. These 3 divs are in turn wrapped in a div with the class .evo_c-markup__container that sits next to the ul class="evo_c-markup__tabs js-c-markup-toggle" element. Within the div class="evo_c-markup__content" elements, we added pre and code for displaying code. However, these can be removed to add content other than code. The code elements have individual classes of .evo_h-language-xxxx to integrate http://prismjs.com/ for syntax highlighting if you choose to add this to your project as well.

+author: Brian Hernandez +category: standard +type: code Markup +order: 1 +--- + +
+ +
+
+ 

+  <div class="evo_c-markup">
+    <ul class="evo_c-markup__tabs js-c-markup-toggle">
+      <li class="evo_c-markup__item">html</li>
+      <li class="evo_c-markup__item">css</li>
+      <li class="evo_c-markup__item">js</li>
+    </ul>
+    <div class="evo_c-markup__container">
+      <div class="evo_c-markup__content">
+        <pre><code class="evo_h-language-html">
+
+        </code></pre>
+      </div>
+      <div class="evo_c-markup__content">
+        <pre><code class="evo_h-language-css">
+
+        </code></pre>
+      </div>
+      <div class="evo_c-markup__content">
+        <pre><code class="evo_h-language-javascript">
+
+        </code></pre>
+      </div>
+    </div>
+  </div>
+
+
+
+ 

+@import 'code_markup-config';
+
+@include c('markup') {
+
+@include e('tabs') {
+  display: flex;
+  list-style: none;
+  justify-content: space-between;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+@include e('item') {
+  flex: 1 0 auto;
+  z-index: 5;
+  padding: $markup-tab-padding;
+  margin-right: $markup-tab-margin-right;
+  &:last-child {
+    margin-right: 0;
+  }
+  text-align: center;
+  text-transform: uppercase;
+  border-top: 1px solid #000;
+  border-right: 1px solid #000;
+  border-left: 1px solid #000;
+  border-bottom: 1px solid #000;
+  border-top-left-radius: $markup-border-radius;
+  border-top-right-radius: $markup-border-radius;
+  background-color: black(.2);
+  transition: background .3s ease;
+  &:hover,
+  &:focus {
+    background: black(.3);
+    cursor: pointer;
+  }
+
+  @include s('is-active') {
+    border-top: 3px solid get-color('primary', 'base');
+    border-bottom: 0;
+    background-color: $markup-active-tab-and-container-bg-color;
+  }
+}
+
+@include e('container') {
+  position: relative;
+  top: -1px;
+  min-height: 0;
+  border: 1px solid #000;
+  border-bottom: none;
+  background-color: $markup-active-tab-and-container-bg-color;
+  transition: min-height .3s ease, padding .3s ease;
+  overflow: hidden;
+  @include s('is-expanded') {
+    border-bottom: 1px solid #000;;
+    min-height: 70vh;
+    overflow-x: scroll;
+    overflow-y: scroll;
+  }
+}
+
+@include e('content') {
+  position: absolute;
+  width: 100%;
+  opacity: 0;
+  transition: opacity .3s ease;
+  @include s('is-active') {
+    opacity: 1;
+  }
+}
+}
+
+
+
+ 

+export default function() {
+var markupTabs = document.getElementsByClassName('js-c-markup-toggle');
+
+if (markupTabs) {
+  for (var i = 0; i < markupTabs.length; i++) {
+    //FIXME: Should be a better way than adding a listener to each element??
+    markupTabs[i].addEventListener('click', function(event) {
+      var clickedTabClassList = event.target.classList;
+      var markupContainerClassList = this.parentNode.children[1].classList;
+      var markupContentDivs = this.parentNode.children[1].children;
+
+      if (clickedTabClassList.contains("is-active")) {
+        clickedTabClassList.remove("is-active");
+        markupContainerClassList.remove("is-expanded");
+      } else {
+        for (var i = 0; i < this.children.length; i++) {
+          if (this.children[i].classList.contains("is-active")) {
+            this.children[i].classList.remove("is-active");
+          }
+        }
+        clickedTabClassList.add("is-active");
+        this.parentNode.children[1].scrollTop = 0;
+        markupContainerClassList.add("is-expanded");
+        for (var j = 0; j < markupContentDivs.length; j++) {
+          if (markupContentDivs[j].classList.contains("is-active")) {
+            markupContentDivs[j].classList.remove("is-active");
+          }
+          if (this.children[j].classList.contains("is-active")) {
+            markupContentDivs[j].classList.add("is-active");
+          }
+        }
+      }
+    }, false);
+  }
+}
+}
+
+
+
+
diff --git a/source/components/crumble/crumble-color-variations.html b/source/components/crumble/crumble-color-variations.html new file mode 100644 index 0000000..16eb2bf --- /dev/null +++ b/source/components/crumble/crumble-color-variations.html @@ -0,0 +1,147 @@ +--- +title: "Color Variations" +description: | +

+ Crumble comes with four variation of colors based on the Evolution UI color + palette. +

+ +

+ Each variation can be applied to the entire list of events + evo_c-crumble__list or to a single + item evo_c-crumble__item. +

+author: Gabriele Romeo +category: evolution +type: crumble +order: 4 +--- + +
+ +
diff --git a/source/components/crumble/crumble-default.html b/source/components/crumble/crumble-default.html new file mode 100644 index 0000000..b90f5c3 --- /dev/null +++ b/source/components/crumble/crumble-default.html @@ -0,0 +1,113 @@ +--- +title: "Default" +description: | +

+ Crumble is an evolution UI component useful when you want to aggregate more + details in a small space. +

+

+ The inner event wrapper must contain: +

+

+

+ You can exploit the description element if you want to extend + the available space for providing more information to the end user. + (evo_c-event__description). Like the Tuesday event in the + following example. +

+author: Gabriele Romeo +category: evolution +type: crumble +order: 1 +--- + +
+ +
diff --git a/source/components/crumble/crumble-full-width.html b/source/components/crumble/crumble-full-width.html new file mode 100644 index 0000000..749f3aa --- /dev/null +++ b/source/components/crumble/crumble-full-width.html @@ -0,0 +1,100 @@ +--- +title: "Details at full width" +description: | +

+ By adding the evo_c-crumble--full-width class into the main + wrapper element, event details will be shown at full width. +

+author: Gabriele Romeo +category: evolution +type: crumble +order: 2 +--- + +
+ +
diff --git a/source/components/crumble/crumble-space-around.html b/source/components/crumble/crumble-space-around.html new file mode 100644 index 0000000..aef61f7 --- /dev/null +++ b/source/components/crumble/crumble-space-around.html @@ -0,0 +1,54 @@ +--- +title: "Space Around" +description: | +

+ By adding the helper class h-space-around into the list + element, the event's icons will be equally spaced. +

+author: Gabriele Romeo +category: evolution +type: crumble +order: 3 +--- + +
+ +
diff --git a/source/components/css-animations/css-animations.html b/source/components/css-animations/css-animations.html new file mode 100644 index 0000000..a43db10 --- /dev/null +++ b/source/components/css-animations/css-animations.html @@ -0,0 +1,580 @@ +--- +title: "Default" +description: +

+ Evolution UI provides useful CSS animations for your projects. +

+

+ Using the helper class .evo_h-anim--[animation name] your can + add the intended animation to your elements. +

+author: Gabriele Romeo +type: CSS animations +no_markup: true +order: 1 +--- + + + + + +
+ + + +
+

Fade In

+
+
+ +
+ +
+
+
+

Evo

+
+
+

UI

+
+
+
+ +
+ +
+ + + +
+ +
+ +
+ +
+
+
+ +
+

Fade Out

+
+
+ +
+ +
+
+
+

Evo

+
+
+

UI

+
+
+
+ +
+ +
+ + + +
+ +
+ +
+ +
+
+
+ +
+

Scale

+
+
+ +
+ +
+
+
+

Evo

+
+
+

UI

+
+
+
+ +
+ +
+ + + +
+ +
+ +
+ +
+
+
+ +
+

Zoom

+
+
+ +
+ +
+
+
+

Evo

+
+
+

UI

+
+
+
+ +
+ +
+ + + +
+ +
+ +
+ +
+
+
+ +
+

Rotate

+
+
+ +
+ +
+
+
+

Evo

+
+
+

UI

+
+
+
+ +
+ +
+ + + +
+ +
+ +
+ +
+
+
+ +
+

Flip

+
+
+ +
+ +
+
+
+

Evo

+
+
+

UI

+
+
+
+ +
+ +
+ + + +
+ +
+ +
+ +
+
+
+ +
+ +
+ +

CSS Animations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Fade In

+
.evo_h-anim--fadeIn
.evo_h-anim--fadeInLeft
.evo_h-anim--fadeInRight
.evo_h-anim--fadeInDown
+

Fade Out

+
.evo_h-anim--fadeOut
.evo_h-anim--fadeOutLeft
.evo_h-anim--fadeOutRight
.evo_h-anim--fadeOutDown
+

Scale

+
.evo_h-anim--grow-center
.evo_h-anim--grow-from-top
.evo_h-anim--grow-from-right
.evo_h-anim--grow-from-bottom
.evo_h-anim--grow-from-left
.evo_h-anim--grow-from-bottom-left
.evo_h-anim--grow-from-bottom-right
.evo_h-anim--grow-vertical-center
.evo_h-anim--grow-vertical-top
.evo_h-anim--grow-vertical-bottom
+

Zoom

+
.evo_h-anim--zoomIn
.evo_h-anim--zoomOut
+

Rotate

+
.evo_h-anim--rotateIn
.evo_h-anim--rotateInCC
.evo_h-anim--rotateOut
.evo_h-anim--rotateOutCC
.evo_h-anim--rotate-from-center
.evo_h-anim--rotate-from-centerCC
.evo_h-anim--rotate-upside-down
.evo_h-anim--rotate-upside-downCC
.evo_h-anim--rotate-all-upside-down
.evo_h-anim--rotate-all-upside-downCC
.evo_h-anim--rotate-vertical-center
.evo_h-anim--rotate-vertical-centerCC
+

Flip

+
.evo_h-anim--flip-horiz-bottom
.evo_h-anim--flip-horiz-top
.evo_h-anim--flip-horiz-zoom-out
.evo_h-anim--flip-horiz-zoom-in
.evo_h-anim--flip-vert-left
.evo_h-anim--flip-vert-right
.evo_h-anim--flip-scale-up-horiz
.evo_h-anim--flip-scale-down-horiz
+

Others

+
.evo_h-anim--flash
.evo_h-anim--pulse
.evo_h-anim--shake
.evo_h-anim--shakeUpDown
+

Important Note

+

+ All animations' attributes can be manipulated through + a data-[CSS animation property] attribute. +

+

Evolution UI will add automatically all prefixes for you (if necessary).

+

For Example:

+

+ + <button class="evo_h-anim--fadeIn" data-animation-duration="5s">Test</button> + +

+

+ + <img src=".." class="evo_h-anim--fadeIn" data-animation-timing-function="ease-out"> + +

+
+
diff --git a/source/components/cubby/cubby.html b/source/components/cubby/cubby.html new file mode 100644 index 0000000..1ea994c --- /dev/null +++ b/source/components/cubby/cubby.html @@ -0,0 +1,48 @@ +--- +title: "Default" +description: | +

Cubby is an evolution UI component that attempts to make displaying tabular data a little more space efficient. It does this by hiding part of the content in a td element with the class of .evo_c-cubby in a table behind other data. Content within the td class="evo_c-cubby tag is split into two divs, the first with a class of .evo_c-cubby__door and the second with a class of .evo_c-cubby__inside. On hovering of the td cell, it creates the effect of a door swinging open to reveal the hidden content behind the first div class="evo_c-cubby__door tag. This component requires no JavaScript. The helper class .evo_h-cubby-table defines an arbitrary height value and width of 100% for the table containing cubby so content doesn't become hidden behind the component.

+ +

One limitation of this component is that it requires hover state to be firing within the client which may make it unsuitable for mobile uses. Also, the content of both divs should be about the same amout to prevent content in inside to peak out from behind content from door until this can be remedied.

+author: Brian Hernandez +category: evolution +type: cubby +order: 1 +--- + + + + + + + + + + + + + + + +
Demo Column 1Demo Column 2Demo Column 3
+
+ Demo Door 1 +
+
+ More Info 1 +
+ 		+
+ Demo Door 2 +
+
+ More Info 2 +
+ 		+
+ Demo Door 3 +
+
+ More Info 3 +
+
diff --git a/source/components/dot-navigation/dot-navigation-bounce.html b/source/components/dot-navigation/dot-navigation-bounce.html new file mode 100644 index 0000000..3be9298 --- /dev/null +++ b/source/components/dot-navigation/dot-navigation-bounce.html @@ -0,0 +1,17 @@ +--- +title: "Bounce" +author: David Gierman +category: evolution +type: dot navigation +order: 7 +--- + + diff --git a/source/components/dot-navigation/dot-navigation-flip.html b/source/components/dot-navigation/dot-navigation-flip.html new file mode 100644 index 0000000..25c0d09 --- /dev/null +++ b/source/components/dot-navigation/dot-navigation-flip.html @@ -0,0 +1,17 @@ +--- +title: "Flip" +author: David Gierman +category: evolution +type: dot navigation +order: 2 +--- + + diff --git a/source/components/dot-navigation/dot-navigation-rotating.html b/source/components/dot-navigation/dot-navigation-rotating.html new file mode 100644 index 0000000..6ba3194 --- /dev/null +++ b/source/components/dot-navigation/dot-navigation-rotating.html @@ -0,0 +1,17 @@ +--- +title: "Rotating" +author: David Gierman +category: evolution +type: dot navigation +order: 4 +--- + + diff --git a/source/components/dot-navigation/dot-navigation-spin.html b/source/components/dot-navigation/dot-navigation-spin.html new file mode 100644 index 0000000..3ad28c0 --- /dev/null +++ b/source/components/dot-navigation/dot-navigation-spin.html @@ -0,0 +1,17 @@ +--- +title: "Spin" +author: David Gierman +category: evolution +type: dot navigation +order: 3 +--- + + diff --git a/source/components/dot-validator/dot-validator.html b/source/components/dot-validator/dot-validator.html new file mode 100644 index 0000000..f0ed22d --- /dev/null +++ b/source/components/dot-validator/dot-validator.html @@ -0,0 +1,79 @@ +--- +title: "dotValidator" +description: +

dotValidator provides real time input validator using the right hand corner dot. Several input types are included.

+type: Input Validator +author: Nathan J Plummer +category: evolution +order: 1 +--- + +
+ + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
diff --git a/source/components/dropdot/dropdot.html b/source/components/dropdot/dropdot.html new file mode 100644 index 0000000..618e392 --- /dev/null +++ b/source/components/dropdot/dropdot.html @@ -0,0 +1,47 @@ +--- +title: "Drop Dot" +description: +

A navigaton component that allows the developer to group related information under a common image or text. Think of it like a fancy dropdown menu.

+type: Drop Dot +category: evolution +author: Patrick Franz +order: 1 +--- +
+ + + + +
diff --git a/source/components/fade-lines-on-scroll/fade-lines-on-scroll.html b/source/components/fade-lines-on-scroll/fade-lines-on-scroll.html new file mode 100644 index 0000000..d872e4a --- /dev/null +++ b/source/components/fade-lines-on-scroll/fade-lines-on-scroll.html @@ -0,0 +1,17 @@ +--- +title: "Default" +description: | +

The Fade Lines On Scroll component uses a simple JavaScript hook, js-c-fade-lines-target, on a block of text to randomly push words down on a page and remove their visiblity. When the paragraph is scrolled into the viewport view, the words are then animated back to their original position while fading into full visibility.

+author: Brian Hernandez +type: Fade Lines On Scroll +order: 1 +--- + +

The quick brown fox jumps over the lazy dog.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia illum enim dolorum quibusdam impedit iusto consequuntur, eius, accusamus sint esse explicabo magni possimus vitae ipsum in excepturi harum id voluptatum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sint rem cum voluptatum quis totam cupiditate a consequuntur optio voluptas quam dolore, natus temporibus dolorem tempora eos suscipit, quod obcaecati!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nobis fugit nam, veritatis voluptate iste! Natus tenetur voluptatem et quasi accusantium recusandae alias nam cumque fuga minus voluptate maiores, commodi.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe amet rem iure, pariatur enim consectetur maiores officia eum, ratione vero magnam velit esse. Deserunt temporibus pariatur, magni accusamus impedit quibusdam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias hic doloribus, natus molestias! Tempora officiis similique quas dolor aliquam quasi odit molestias non nihil, hic, saepe ratione laborum laboriosam eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum harum quis doloremque beatae, alias iusto dicta sit autem ad a nostrum eveniet debitis saepe ipsum facere, quasi temporibus impedit, veniam!

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure commodi omnis, quae similique cupiditate alias facilis, officiis beatae ipsa aliquam ducimus itaque culpa, odio! Impedit vitae mollitia suscipit quidem nam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat maiores dolorum provident ex ullam corporis harum ad placeat nesciunt nisi aliquam, molestias illum facere. Iste ea maiores deserunt laudantium sequi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi et sapiente atque possimus quas, assumenda. Magni dolorum, molestias rerum doloremque nobis vitae quo repudiandae neque ab, iusto hic, quos voluptates.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad itaque omnis iste eius, nesciunt reprehenderit, accusamus deserunt commodi, maiores, placeat nisi. Enim nulla ut saepe deleniti, commodi id necessitatibus similique.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam eligendi iste quibusdam! Illum, ipsa qui perferendis veritatis officia omnis aliquid unde, nostrum enim adipisci delectus quisquam officiis numquam voluptatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos atque illum tempora quas, dignissimos veniam velit accusantium est temporibus, aut maxime tenetur enim, ratione animi cupiditate rerum consequuntur. Sapiente, vitae?

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque corrupti vel ipsa voluptatem eveniet in atque porro ducimus eligendi expedita autem, debitis ipsum odio, iusto officia repellat accusamus hic fugiat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptas eligendi, hic vitae reprehenderit repudiandae aspernatur expedita, amet quibusdam repellendus possimus repellat ipsam, perferendis nobis quia provident? Ducimus, non, enim.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis reprehenderit qui ipsam totam illum, nam harum iure omnis, eius expedita cupiditate hic nisi, ut vero nihil! Dolore, quam, non.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quisquam cum blanditiis similique perspiciatis, corrupti autem fugit nostrum ad incidunt accusamus minima excepturi soluta! Et excepturi laborum aperiam incidunt, quia?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit dolor sit possimus modi laboriosam quaerat nisi debitis aliquid maxime neque ipsam vero, eum sed sapiente tempora quia quibusdam reprehenderit ad!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates omnis, sint hic. Placeat a deleniti dolorem debitis. Nulla fugiat assumenda, repudiandae ipsam error saepe, quia facere impedit asperiores expedita illo!

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quisquam cum blanditiis similique perspiciatis, corrupti autem fugit nostrum ad incidunt accusamus minima excepturi soluta! Et excepturi laborum aperiam incidunt, quia?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit dolor sit possimus modi laboriosam quaerat nisi debitis aliquid maxime neque ipsam vero, eum sed sapiente tempora quia quibusdam reprehenderit ad!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates omnis, sint hic. Placeat a deleniti dolorem debitis. Nulla fugiat assumenda, repudiandae ipsam error saepe, quia facere impedit asperiores expedita illo!

diff --git a/source/components/foldout-popup/foldout-popup.html b/source/components/foldout-popup/foldout-popup.html new file mode 100644 index 0000000..19cc0c9 --- /dev/null +++ b/source/components/foldout-popup/foldout-popup.html @@ -0,0 +1,43 @@ +--- +title: "" +description: +

This is a cool popup.

+

Example

+

Check out the example code below by clicking on "Show Markup".

+

Hover over the component to see how the popup unfurls:

+author: Sebastian Ramirez-Brunner +category: evolution +type: foldout popup +order: 1 +--- +
+ +
diff --git a/source/components/fontana-form/fontana-form.html b/source/components/fontana-form/fontana-form.html new file mode 100644 index 0000000..952e941 --- /dev/null +++ b/source/components/fontana-form/fontana-form.html @@ -0,0 +1,30 @@ +--- +title: "Fontana Form" +description:

Form inspired by Italian painter/artist Lucio Fontana

+author: Natalie Vaslavsky +category: evolution +type: forms +order: 1 +--- +
+ + + + + + +
+
+
+

SUBMIT

+
+
+
diff --git a/source/components/forms/forms-standard-background-variations.html b/source/components/forms/forms-standard-background-variations.html new file mode 100644 index 0000000..cc71edb --- /dev/null +++ b/source/components/forms/forms-standard-background-variations.html @@ -0,0 +1,81 @@ +--- +title: "Background Variations" +description: | +

+ By adding the h-bck__[color-name][--variation] helper class on + an evo_c-form component, you can change the background color of + the form. + The color-name part comes from one of the colors in the + Evolution UI's color palette. The --variation part is + optional instead. +

+

+ By adding the h-bck__[color-name] helper class on + an evo_c-form__focus-line element, you can change the background + color of a focus line. +

+author: Gabriele Romeo +category: standard +type: Standard Forms +order: 4 +--- + + +
+ +
+ +
+

Sign in

+
+ + +
+ + +
+ person + + +
+ +
+ This field cannot be empty +
+
+ + +
+ + lock + + +
+ +
+ + Password must contain 6 or more characters + +
+ +
+ +
+ + +
+ +
+ +
+ +
+ diff --git a/source/components/forms/forms-standard-buttons.html b/source/components/forms/forms-standard-buttons.html new file mode 100644 index 0000000..40a9df4 --- /dev/null +++ b/source/components/forms/forms-standard-buttons.html @@ -0,0 +1,111 @@ +--- +title: "Submit button color variations" +description: | +

+ By default, a button has a white background and a colored border. +

+

+ You can change the background color on hover using a + h-bck__[color-name] helper class on + an evo_c-form__button component. + The color-name part comes from one of the colors in the + Evolution UI's color palette. +

+

+ Using the evo_c-form__button--[color-name] modifier class, + the button gets the intended background color. The color-name part + comes from one of the colors in the Evolution UI's color palette. +

+

+ Using the evo_c-form__button--rounded modifier class, + the button will be rounded by a predefined amount. +

+

+ Using the h--3D helper class, the button will get a 3D effect. +

+

+ Using the h-padding--small or h-padding--huge + helper classes on an evo_c-form__button, you can change the + button's padding. +

+author: Gabriele Romeo +category: standard +type: Standard Forms +order: 3 +--- + + +
+ + +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ + +
+ diff --git a/source/components/forms/forms-standard-card.html b/source/components/forms/forms-standard-card.html new file mode 100644 index 0000000..4080121 --- /dev/null +++ b/source/components/forms/forms-standard-card.html @@ -0,0 +1,125 @@ +--- +title: "Card" +description: | +

+ Add the card modifier to a standard form to get a card form +

+author: Gabriele Romeo +category: standard +type: Standard Forms +order: 2 +--- + + +
+ +
+ +
+

join us

+
+ + +
+ + +
+ person + + +
+ +
+ This field cannot be empty +
+
+ + +
+ email + + +
+ +
+ Invalid email +
+ +
+ + +
+ + lock + + +
+ +
+ + Password must contain 6 or more characters + +
+ +
+ + +
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+ + + + +
+ +
+ +
+ + +
+ + +
+ +
+ +
+ diff --git a/source/components/forms/forms-standard-checkboxes.html b/source/components/forms/forms-standard-checkboxes.html new file mode 100644 index 0000000..6be6884 --- /dev/null +++ b/source/components/forms/forms-standard-checkboxes.html @@ -0,0 +1,48 @@ +--- +title: "Checkbox Variations" +description: | +

+ Use the evo_c-form__checkbox--x modifier class on + an evo_c-form__checkbox element to get a different checkbox. +

+

+ By adding the h-bck__[color-name] helper class on + an evo_c-form__checkbox element, you can change the color of + the checkbox. + The color-name part comes from one of the colors in the + Evolution UI's color palette. +

+author: Gabriele Romeo +category: standard +type: Standard Forms +order: 5 +--- + + +
+ +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + +
+ diff --git a/source/components/forms/forms-standard-radio.html b/source/components/forms/forms-standard-radio.html new file mode 100644 index 0000000..aeaef52 --- /dev/null +++ b/source/components/forms/forms-standard-radio.html @@ -0,0 +1,48 @@ +--- +title: "Radio Variations" +description: | +

+ A Radio button comes in the following color variants + +

+

+author: Gabriele Romeo +category: standard +type: Standard Forms +order: 6 +--- + + +
+ + +
+ +
+ + + + + + + + + + + +
+ +
+ + +
+ diff --git a/source/components/forms/forms-standard-select.html b/source/components/forms/forms-standard-select.html new file mode 100644 index 0000000..54ee30d --- /dev/null +++ b/source/components/forms/forms-standard-select.html @@ -0,0 +1,159 @@ +--- +title: "Select Variations" +description: | +

+ The select element comes in the following color variants: + +

+

+

+ You can change its size by using the following classes: + +

+

+author: Gabriele Romeo +category: standard +type: Standard Forms +order: 7 +--- + + +
+ + +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ + +
+ + + + + +
+ +
+ diff --git a/source/components/forms/forms-standard.html b/source/components/forms/forms-standard.html new file mode 100644 index 0000000..70747d6 --- /dev/null +++ b/source/components/forms/forms-standard.html @@ -0,0 +1,197 @@ +--- +title: "Default" +description: | +

+ In Evolution UI, a standard form is wrapped by the evo_c-form + class. +

+

+ A form can contain a header element evo_c-form__header, a body + element evo_c-form__body, and a footer element + evo_c-form__footer. +

+

+ Each input is wrapped by a evo_c-form__field element. +

+

+ Radios and checkboxes are also wrapped by a fieldset + evo_c-form__fieldset. +

+

+ Add the js-validation class on a <form> element to enable + visual messages if a field contains errors. The content of errors is placed + inside the evo_c-form__tooltip element. +

+author: Gabriele Romeo +category: standard +type: Standard Forms +order: 1 +--- + + +
+ +
+ +
+

join us

+
+ + +
+ + +
+ person + + +
+ +
+ This field cannot be empty +
+
+ + +
+ email + + +
+ +
+ Invalid email +
+ +
+ + +
+ + lock + + +
+ +
+ + Password must contain 6 or more characters + +
+ +
+ + +
+ + phone_iphone + + +
+ +
+ + Phone number is required + +
+ +
+ + +
+ + + + + +
+ + +
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ +
+ + +
+ + + +
+ +
+ +
+ diff --git a/source/components/fullscreen-gallery/fullscreen-gallery.html b/source/components/fullscreen-gallery/fullscreen-gallery.html new file mode 100644 index 0000000..253cff0 --- /dev/null +++ b/source/components/fullscreen-gallery/fullscreen-gallery.html @@ -0,0 +1,46 @@ +--- +title: "Default" +description:

A fullscreen gallery activated by a click on any of the images.

+author: Joseph Matembu +category: evolution +type: fullscreen gallery +order: 1 +--- + +
+
+ + + +
+
+
+ + + + + Image Caption + +
Image Caption
+
+
+ + + + + Image Caption + +
Image Caption
+
+
+ + + + + + Image Caption + +
Image Caption
+
+
+
diff --git a/source/components/grid/grid.html b/source/components/grid/grid.html new file mode 100644 index 0000000..263a697 --- /dev/null +++ b/source/components/grid/grid.html @@ -0,0 +1,111 @@ +--- +title: "Default" +description: +

The Evolution UI grid is built using the power of Flexbox to achieve fluid layouts. The grid can thought of as an collection of Flexbox rows with varying numbers of columns. The 

l-gridrow__gutters
class is used to add some spacing between each grid column. Remove it if no spacing between the columns are needed. Flexbox allows for some awesome functionality here in that we can add any number of columns to the grid and they will automatically adjust to evenly distribute themselves based on the amount of space they require. The code above gives a two-column grid row but we could easily add three more columns and create a five-column grid row. In cases where we need the columns to have differing widths, we can use the class 
.colX_of16
where X is a number between 1 and 16. This allows us to set the specific width of the columns we need.

+ +type: grid +order: 1 +--- + +
+
+
+
One
+
+
+ +
+
+
Half
+
+
+
Half
+
+
+ +
+
+
Third
+
+
+
Third
+
+
+
Third
+
+
+ +
+
+
8 of 16 columns
+
+
+
2 of 16 columns
+
+
+
3 of 16 columns
+
+
+
3 of 16 columns
+
+
+ +
+
+
Fifth
+
+
+
Fifth
+
+
+
Fifth
+
+
+
Fifth
+
+
+
Fifth
+
+
+ +
+
+
Quarter
+
+
+
Quater
+
+
+
Quarter
+
+
+
Quarter
+
+
+ +
+
+
Third
+
+
+
Third
+
+
+
Third
+
+
+
+
+
Half
+
+
+
Half
+
+
+ +
+
+
One
+
+
+
diff --git a/source/components/herald/herald.html b/source/components/herald/herald.html new file mode 100644 index 0000000..c10aa90 --- /dev/null +++ b/source/components/herald/herald.html @@ -0,0 +1,35 @@ +--- +title: "Default" +description: | +

The Herald unfurls a border and drops a message with a banner. The component features an image with a width and height of 2:1 and a place for textual content. Ideally, the Herald is useful for small listings, although most message sizes will fit inside.

+ +

Place announcements inside the c-herald__message tag. Each unique announcement must be placed within <p> tags. Next, add the number of announcements inside c-chip__media--o. Inputting the number of announcements is recommended in case users have disabled JavaScript. Note: The number of announcements in c-chip__media--o are based on the number of <p> tags. This number is updated dynamically in the event the number of announcements was not inputted. The ideal image has a size of 2:1 or a size near that.

+ +

Accessibility: In the event a user disables JavaScript, the Herald and all content inside it will still be shown to users.

+ +author: Ro Langam +category: evolution +type: herald +order: 1 +--- + +
+
+ 5 + Announcements +
+
+
+
+
+
+
+

Drumpf Obama: FBI chief Comey 'rejects' phone tap allegation. [Visit BBC.com]

+

The Queen is in search of a brawny grape-feeder. [Apply Here]

+

What a strange world we live in. [Find out why]

+

The Owl and the Pussy-cat went to sea, In a beautiful pea-green boat [Where did they go?]

+

Will eating melas zomos make you a badass Spartan? [Find out why]

+
+
+
+
diff --git a/source/components/ikon/ikon.html b/source/components/ikon/ikon.html new file mode 100644 index 0000000..89d1426 --- /dev/null +++ b/source/components/ikon/ikon.html @@ -0,0 +1,144 @@ +--- +title: "" +description: +

Ikon is a new author card layout with details about the author.

+

Showcase yourself on your blog or your team on the web app "about" page/section by creating Ikon cards. +

+ +

Creating and Using Ikon

+

To create ikon within your page, just add a div tag with evo_c-ikon + class and then add one or more child div tags with evo_c-ikon__member within it. Finally + add the content as shown in the code markup below. Make sure to add proper js-hook CSS classes for proper JS + function. Check out all the js-hooks (js-evo-c-ikon, js-evo-c-ikon-member, + js-evo-c-ikon-member-info and js-evo-c-ikon-close-btn) within the code markup shown below. +

+

You can add as many evo_c-ikon__member(s) as you like on your your website.

+ + +

Examples

+

Check out the example code below by clicking on "Show Markup".

+

Hover over the names of the random authors below to see how ikon works:

+author: Aashish Nagpal +category: evolution +type: ikon card +order: 1 +--- + +
+ + + +
+
Jonas Lininger
+ + +
+
+ +
+
+
+ + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a semper + sem. Ut pellentesque libero ut ultricies vehicula. Morbi suscipit felis nulla, luctus ornare nunc fringilla + et

+
+ +
close
+
+
+ + + + + +
+
Mariam Casaus
+ + +
+
+ +
+
+
+ + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a semper + sem. Ut pellentesque libero ut ultricies vehicula. Morbi suscipit felis nulla, luctus ornare nunc fringilla + et

+
+ +
close
+
+
+ + + + + +
+
Herbert Stamper
+ + +
+
+ +
+
+
+ + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a semper + sem. Ut pellentesque libero ut ultricies vehicula. Morbi suscipit felis nulla, luctus ornare nunc fringilla + et

+
+ +
close
+
+
+ +
diff --git a/source/components/innovative-login-form/innovative-login-form.html b/source/components/innovative-login-form/innovative-login-form.html new file mode 100644 index 0000000..984a08c --- /dev/null +++ b/source/components/innovative-login-form/innovative-login-form.html @@ -0,0 +1,26 @@ +--- +title: "Innovative Login Form" +description: +

Innovative login form with blur background effect. Input fields and link + have animation. +

+author: Cesar Verastegui +type: login form +category: evolution +order: 1 +--- + +
+ + + +
diff --git a/source/components/input-scanner/input-scanner.html b/source/components/input-scanner/input-scanner.html new file mode 100644 index 0000000..5d30719 --- /dev/null +++ b/source/components/input-scanner/input-scanner.html @@ -0,0 +1,15 @@ +--- +title: "Input Scanner" +description:

'Input Scanner' enhances input elements with a cursor indicator that changes color based on the current state of the input's validation. Upon completion of the user's input, the cursor then 'scans' over the input element to indicate completion. If a user wishes to re-edit an input element, the form will unscan the input on click. On form submission, invalid/incomplete elements are indicated by a blinking red cursor. If the form is valid, a cursor then scans over the submit button with a completion message.

+author: Brian Merriman +category: evolution +type: forms +order: 1 +--- + +
+
+
+
+
+
diff --git a/source/components/layers-2d/layers-2d.html b/source/components/layers-2d/layers-2d.html new file mode 100644 index 0000000..aa1ef3a --- /dev/null +++ b/source/components/layers-2d/layers-2d.html @@ -0,0 +1,87 @@ +--- +title: "Default" +description:

This is an innovative UI component that can be used as an alternative to accordions and tabs. It is called 2D layers.

+author: Hiep Vo +category: evolution +type: 2D layers +order: 1 +--- + +
+
+
+ + +
Enrollment status
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+
+

Lorem Ipsum

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, + consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam + quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, + nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse + quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" +
+
+
+
+
+ + +
Current Offering
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+
+

Lorem Ipsum

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, + consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam + quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, + nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse + quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" +
+
+
+
+
+ + +
Program Details
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+
+

Lorem Ipsum

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, + consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam + quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, + nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse + quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" +
+
+
+
+
+ + +
How the Advanced program works
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
+
+

Lorem Ipsum

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, + consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam + quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, + nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse + quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" +
+
+
+
diff --git a/source/components/layers/layers.html b/source/components/layers/layers.html new file mode 100644 index 0000000..8981357 --- /dev/null +++ b/source/components/layers/layers.html @@ -0,0 +1,95 @@ +--- +title: "3D Layers" +description:

3D Draggable Layers

+author: Carlos Coves Prieto +category: evolution +type: 3D layers +order: 1 +--- + +
+
+
+ LAYER 1 + done + code
+
+

LOREM IPSUM DOLOR

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum + sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies + nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam + dictum felis eu pede mollis pretium.

+
+
+
+
+ LAYER 2 + done + code +
+
+

LOREM IPSUM DOLOR

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum + sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies + nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam + dictum felis eu pede mollis pretium.

+

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo + ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam + ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

+
+
+
+ +
+

LOREM IPSUM DOLOR

+

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo + ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam + ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

+

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed + ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt + tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros + faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

+

Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce + vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam + accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium + turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.

+
+
+
+ +
+

LOREM IPSUM DOLOR

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum + sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies + nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam + dictum felis eu pede mollis pretium.

+

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo + ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam + ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

+

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed + ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt + tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros + faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

+

Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce + vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam + accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium + turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.

+
+
+
diff --git a/source/components/lists/list-group-columns.html b/source/components/lists/list-group-columns.html new file mode 100644 index 0000000..2efb944 --- /dev/null +++ b/source/components/lists/list-group-columns.html @@ -0,0 +1,31 @@ +--- +title: "List Group with columns" +description: +

Divide your content into simple columns. Each list item should have the .evo_s-has-columns class. You can then separate your content by wrapping it around a span or div element with a class of evo_c-list-group__col. To create a grid instead, see our grid structure instead.

+author: Joseph Matembu +category: standard +type: list Groups +order: 7 +--- + + diff --git a/source/components/lists/list-group-icons.html b/source/components/lists/list-group-icons.html new file mode 100644 index 0000000..18dce2e --- /dev/null +++ b/source/components/lists/list-group-icons.html @@ -0,0 +1,17 @@ +--- +title: "List Group with Icons" +description: +

Add icons to the list group.

+author: Joseph Matembu +category: standard +type: list Groups +order: 2 +--- + + diff --git a/source/components/lists/list-group-images-rounded.html b/source/components/lists/list-group-images-rounded.html new file mode 100644 index 0000000..1d4fb7f --- /dev/null +++ b/source/components/lists/list-group-images-rounded.html @@ -0,0 +1,26 @@ +--- +title: "List Group with round Image" +description: +author: Joseph Matembu +category: standard +type: list Groups +order: 6 +--- + + diff --git a/source/components/lists/list-group-images.html b/source/components/lists/list-group-images.html new file mode 100644 index 0000000..0647b36 --- /dev/null +++ b/source/components/lists/list-group-images.html @@ -0,0 +1,26 @@ +--- +title: "List Group with Image" +description: +author: Joseph Matembu +category: standard +type: list Groups +order: 5 +--- + + diff --git a/source/components/lists/list-group-labels.html b/source/components/lists/list-group-labels.html new file mode 100644 index 0000000..a165fc8 --- /dev/null +++ b/source/components/lists/list-group-labels.html @@ -0,0 +1,17 @@ +--- +title: "List Group with Labels" +description: +

Add labels to the list group. Notice the different colors. The default color used is h-bck__accent2--base. You can change accent2 to accent, accent3, accent4, primary, primary2, secondary, and background.

+author: Joseph Matembu +category: standard +type: list Groups +order: 3 +--- + + diff --git a/source/components/lists/list-group-links.html b/source/components/lists/list-group-links.html new file mode 100644 index 0000000..7e6d062 --- /dev/null +++ b/source/components/lists/list-group-links.html @@ -0,0 +1,18 @@ +--- +title: "List Group as Link" +description: +

Create each list group item as a link. The default background color used is h-bck__accent2--base. You can change accent2 to accent, accent3, accent4, primary, primary2, secondary, and background.

+author: Joseph Matembu +category: standard +type: list Groups +order: 4 +--- + +
+ Item 1 + Item 2 + Item 3 + Item 4 + Item 5 +
+ diff --git a/source/components/lists/list-group.html b/source/components/lists/list-group.html new file mode 100644 index 0000000..c25eacd --- /dev/null +++ b/source/components/lists/list-group.html @@ -0,0 +1,17 @@ +--- +title: "Default" +description: +

Create an ordered or unordered list with a class of evo_c-list-group. Add evo_c-list-group__item on each list item.

+author: Joseph Matembu +category: standard +type: list Groups +order: 1 +--- + + diff --git a/source/components/lists/lists.html b/source/components/lists/lists.html new file mode 100644 index 0000000..47719a7 --- /dev/null +++ b/source/components/lists/lists.html @@ -0,0 +1,41 @@ +--- +title: "Default" +description:

Basic ordered and unordered lists

+author: Carlos Coves Prieto +category: standard +type: lists +order: 1 +--- + + +
    +
  1. List Item 1
    2. +
  2. List Item 2
    3. +
  3. List Item 3 +
      +
    1. Lower alpha 1
      2. +
    2. Lower alpha 2
      3. +
    +
      +
    1. Upper alpha 1
      2. +
    2. Upper alpha 2
      3. +
    +
      +
    1. Lower roman 1
      2. +
    2. Lower roman 2
      3. +
    +
      +
    1. Upper roman 1
      2. +
    2. Upper roman 2
      3. +
    +
    4. +
diff --git a/source/components/minimalist-carousel-two/minimalist-carousel-two.html b/source/components/minimalist-carousel-two/minimalist-carousel-two.html new file mode 100644 index 0000000..aae7349 --- /dev/null +++ b/source/components/minimalist-carousel-two/minimalist-carousel-two.html @@ -0,0 +1,39 @@ +--- +title: "Carousel with Border Nav" +description:

When a layer's bottom and left border is visible, clicking the border + will hide the layer and any layer on top of it to expose the layer + immediately underneath the clicked border.

+

When a layer's top and right border is visible, clicking it will + expose it. Any layers that are hidden and whose top and right borders + are located to the bottom and left of the clicked layer will also be + hidden.

+

Component does not currently run on FireFox

+author: Stu Wood +type: Carousel +category: evolution +order: 1 +--- + + + diff --git a/source/components/modals/modals-basic.html b/source/components/modals/modals-basic.html new file mode 100644 index 0000000..a2ac093 --- /dev/null +++ b/source/components/modals/modals-basic.html @@ -0,0 +1,27 @@ +--- +title: "Basic" +description: +

Basic Modal

+author: Jing Ran +category: standard +type: modals +order: 1 +--- + + +Basic Modal + + +
+ + + +
+
+

Basic Modal

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta.

+
+
+ close +
+
diff --git a/source/components/modals/modals-dialog.html b/source/components/modals/modals-dialog.html new file mode 100644 index 0000000..151cdae --- /dev/null +++ b/source/components/modals/modals-dialog.html @@ -0,0 +1,24 @@ +--- +title: "Dialog" +description: +

Dialog Modal

+author: Jing Ran +category: standard +type: modals +order: 4 +--- + + +Dialog Modal + + + +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta.

+
+
+ cancel + okay +
+
diff --git a/source/components/modals/modals-fixed.html b/source/components/modals/modals-fixed.html new file mode 100644 index 0000000..20e03e3 --- /dev/null +++ b/source/components/modals/modals-fixed.html @@ -0,0 +1,25 @@ +--- +title: "Fixed" +description: +

Fixed Header and Footer Modal

+author: Jing Ran +category: standard +type: modals +order: 3 +--- + + +Fixed Header and Footer Modal + + + +
+
+

Fixed Modal

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta. Curabitur tristique quam eu est porttitor, id tincidunt arcu molestie. Morbi volutpat est orci, eget iaculis est rhoncus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta. Curabitur tristique quam eu est porttitor, id tincidunt arcu molestie. Morbi volutpat est orci, eget iaculis est rhoncus id.

+
+ close +
+
+
+ diff --git a/source/components/modals/modals-full-screen.html b/source/components/modals/modals-full-screen.html new file mode 100644 index 0000000..3d500a6 --- /dev/null +++ b/source/components/modals/modals-full-screen.html @@ -0,0 +1,24 @@ +--- +title: "Full Screen" +description: +

Full-Screen Modal

+author: Jing Ran +category: standard +type: modals +order: 2 +--- + + +Full-screen Modal + + + +
+
+

Full-screen Modal

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta.

+
+
+ close +
+
diff --git a/source/components/persona/persona.html b/source/components/persona/persona.html new file mode 100644 index 0000000..277be51 --- /dev/null +++ b/source/components/persona/persona.html @@ -0,0 +1,107 @@ +--- +title: "" +description: +

Persona is a new minimalist author card layout.

+

Showcase yourself on your blog or your team on the web app "about" page/section by creating persona cards. +

+ +

Creating and Using Persona

+

To create persona within your page, just add a div tag with evo_c-persona-container + class and then add one or more child div tags with evo_c-persona within it. Finally + add the content as shown in the code markup below.

+

You can add as many evo_c-persona-container(s) and as many evo_c-persona(s) within + them to show them in any alignment you find good for your website.

+ +

Examples

+

Check out the example code below by clicking on "Show Markup".

+

Hover over the images of the random authors below to see their Persona:

+author: Aashish Nagpal +category: evolution +type: persona card +order: 1 +--- + + +
+ + +
+ +

Virgil Hammond

+

Front End Developer

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + + +
+ +

Sonya Mcmakin

+

Full Stack Developer

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + + +
+ +

Pamela Rundell

+

Front End Developer

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + + +
+ +

Cesar Ayoub

+

Full Stack Developer

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
diff --git a/source/components/pop-over/pop-over.html b/source/components/pop-over/pop-over.html new file mode 100644 index 0000000..cce7dbf --- /dev/null +++ b/source/components/pop-over/pop-over.html @@ -0,0 +1,52 @@ +--- +title: "Default" +description: | +

This component helps show content as pop over. We can highlight specific text in a paragraph and make it clickable.

+author: Hiep Vo +category: evolution +type: popover +order: 1 +--- + +
+
+

Lorem ipsum dolor si eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et + eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et eiusmod tempor incididunt eiusmod + tempor incididunt ut labore et ut labore eiusmod tempor eiusmod tempor incididunt ut labore et ut labore ett + amet, + consectetur adipiscing elit,sed do eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et + aliqua. Ut enim ad minim adipiscing elit, sed do eiusmod tempor incididunt ut labore et +

+

Lorem ipsum dolor si eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et + eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et eiusmod tempor incididunt eiusmod + tempor incididunt ut labore et ut labore eiusmod tempor eiusmod tempor incididunt ut labore et ut labore ett amet, + consectetur adipiscing elit,sed do eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et + aliqua. Ut enim ad minim adipiscing elit, sed do eiusmod tempor incididunt ut labore et +

+

+ Albert Einstein (14 March 1879 - 18 April 1955) was a German-born theoretical physicist. He developed the theory + of relativity, one of the two pillars of modern physics (alongside quantum mechanics). Einstein’s work is also + know for its influence on the philosophy of science. Einstein is best know in popular culture of his mass-energy + equivalence formula E = mc2 (which has been dubbed “the world’s most famous equation”). He received the 1921 + in + Physics “for his + services to theoretical physics, and especially for his discovery of the law +

+
+
+ +
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ + + incididunt +
+
+ +

Header

any of six international prizes awarded annually for outstanding work in physics, chemistry, physiology or medicine, literature, economics (since 1969), and the promotion of peace.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ + + Nobel Prize +
+
diff --git a/source/components/progress-bars/progress-bars-bck-variations.html b/source/components/progress-bars/progress-bars-bck-variations.html new file mode 100644 index 0000000..fc65bb0 --- /dev/null +++ b/source/components/progress-bars/progress-bars-bck-variations.html @@ -0,0 +1,65 @@ +--- +title: "Background color Variations" +description: | +

+ By adding the h-bck__[color-name][--variation] helper class on an + evo_c-progress-bar component, you can change the trackbar's color. + The color-name part comes from one of the colors in the + Evolution UI's color palette. The --variation part is + optional instead. +

+

+ By adding the h-bck__[color-name][--variation] helper class on an + evo_c-progress-bar__bar bar, you can change the bar's color. + The color-name part comes from one of the colors in the + Evolution UI's color palette. The --variation part is + optional instead. +

+

+ On the 45, 90, and 135 bars, you can apply color variations using the + h-bck--[color-name] helper class instead (without the variation part). +

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 8 +--- + +
+ +
+ +
+ +
+ + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ diff --git a/source/components/progress-bars/progress-bars-border-shadow.html b/source/components/progress-bars/progress-bars-border-shadow.html new file mode 100644 index 0000000..81590a2 --- /dev/null +++ b/source/components/progress-bars/progress-bars-border-shadow.html @@ -0,0 +1,59 @@ +--- +title: "Border and Shadow" +description: | +

+ Each progress bar has a border and a box-shadow. +

+

+ Using the h-border__[color-variation] helper class on an + evo_c-progress-bar component, you can change the trackbar's border. + The available color variations for border are: + +

+

+

+ Using the h-border__[dimension] helper class on an + evo_c-progress-bar component, you can change the trackbar's border tickness. + The available tickness are: + +

+

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 9 +--- + + +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ diff --git a/source/components/progress-bars/progress-bars-infinite.html b/source/components/progress-bars/progress-bars-infinite.html new file mode 100644 index 0000000..7d88134 --- /dev/null +++ b/source/components/progress-bars/progress-bars-infinite.html @@ -0,0 +1,56 @@ +--- +title: "Infinite loading" +description: | +

+ Infinite loading progress bars provide to the user the idea that an action + is under execution. +

+

+ Using the h-animation--[type] helper class on an + evo_c-progress-bar__bar element, you can change the animation. + The available animation for the standard progress bars are: + +

+

+

+ The available animation for the non standard progress (type2, type3, + 45, 90, 135) bars is: + +

+

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 10 +--- + + +
+
+
+ +
+
+
+ +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ diff --git a/source/components/progress-bars/progress-bars-messages.html b/source/components/progress-bars/progress-bars-messages.html new file mode 100644 index 0000000..c9b8790 --- /dev/null +++ b/source/components/progress-bars/progress-bars-messages.html @@ -0,0 +1,25 @@ +--- +title: "Custom Messages" +description: | +

+ Using the data-message attribute on a + evo_c-progress-bar component, you can shw custom messages to the + user +

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 7 +--- + +
+ +
+ +
+ +
+ +
+ +
diff --git a/source/components/progress-bars/progress-bars-percentages.html b/source/components/progress-bars/progress-bars-percentages.html new file mode 100644 index 0000000..fb43753 --- /dev/null +++ b/source/components/progress-bars/progress-bars-percentages.html @@ -0,0 +1,41 @@ +--- +title: "Percentages" +description: | +

+ Use the h-percentage helper class if you want to show the value + of the progress as percentage. By dafult, the percentage will be placed on the + left of the progress bar. +

+

+ Use the h-percentage--right to move the percentage on the right + side of the progress bar. +

+

+ Use the h-percentage--center to move the percentage at the center + of the progress bar. +

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 6 +--- + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/source/components/progress-bars/progress-bars-rounded.html b/source/components/progress-bars/progress-bars-rounded.html new file mode 100644 index 0000000..88a93f8 --- /dev/null +++ b/source/components/progress-bars/progress-bars-rounded.html @@ -0,0 +1,28 @@ +--- +title: "Rounded Progress Bars" +description: | +

+ By adding the rounded modifier on an + evo_c-progress-bar component, you get a rounded progress bar. +

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 3 +--- + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/source/components/progress-bars/progress-bars-shapes.html b/source/components/progress-bars/progress-bars-shapes.html new file mode 100644 index 0000000..e2ed0fc --- /dev/null +++ b/source/components/progress-bars/progress-bars-shapes.html @@ -0,0 +1,42 @@ +--- +title: "Different shapes" +description: | +

+ A progress bar component comes with two different background shape which + can be applied through the type2, and type3modifiers. +

+

+ A bar element comes with three different backgroud shapes: +

+

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 5 +--- + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + diff --git a/source/components/progress-bars/progress-bars-sizes.html b/source/components/progress-bars/progress-bars-sizes.html new file mode 100644 index 0000000..3119431 --- /dev/null +++ b/source/components/progress-bars/progress-bars-sizes.html @@ -0,0 +1,40 @@ +--- +title: "Different sizes" +description: | +

+ By adding the big modifier on an evo_c-progress-bar + component you can change the size of the trackbar. +

+

+ By adding the small, big, or huge + modifier on an evo_c-progress-bar__bar bar, you can change + the bar's sizes instead. +

+

+ You could also use a combination of the both two dimensions. +

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 4 +--- + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/source/components/progress-bars/progress-bars-status.html b/source/components/progress-bars/progress-bars-status.html new file mode 100644 index 0000000..ce7e711 --- /dev/null +++ b/source/components/progress-bars/progress-bars-status.html @@ -0,0 +1,29 @@ +--- +title: "Status" +description: | +

+ Evolution UI provides three different bar types for the following status: + +

+

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 2 +--- + +
+ +
+ +
+ +
+ +
+ +
diff --git a/source/components/progress-bars/progress-bars.html b/source/components/progress-bars/progress-bars.html new file mode 100644 index 0000000..a2b8445 --- /dev/null +++ b/source/components/progress-bars/progress-bars.html @@ -0,0 +1,25 @@ +--- +title: "Default" +description: | +

+ Progress bars enable a better User Experience by providing a *visual + feedback* to the end user when an action takes long time to complete. + To this end, Evolution UI has the evo_c-progress-bar component. +

+

+ The evo_c-progress-bar component represents the trackbar and contains + the bar element which represent the true bar instead. +

+

+ The actual progress of a progress bar is strictly related to the width + of the inner bar. +

+author: Gabriele Romeo +category: standard +type: Progress Bars +order: 1 +--- + +
+ +
diff --git a/source/components/rainbow-form/rainbow-form.html b/source/components/rainbow-form/rainbow-form.html new file mode 100644 index 0000000..de433cf --- /dev/null +++ b/source/components/rainbow-form/rainbow-form.html @@ -0,0 +1,49 @@ +--- +title: "Rainbow Form" +description: +author: Natalie Vaslavsky +category: evolution +type: forms +order: 1 +--- + +
+

Contact us :

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
diff --git a/source/components/readability-improvement-panel/readability-improvement-panel.html b/source/components/readability-improvement-panel/readability-improvement-panel.html new file mode 100644 index 0000000..5a782ad --- /dev/null +++ b/source/components/readability-improvement-panel/readability-improvement-panel.html @@ -0,0 +1,34 @@ +--- +title: "Default" +description: | +

A small panel of toggle switches that allows the users to either invert the page colors, convert the page to grayscale, or double the font size. Replace the class evo_c-readabilityPlaceholder--relative with evo_c-readabilityPlaceholder to keep it fixed to the top right of the screen.

+author: Rafael Nunez +type: Readability Improvement Panel +order: 1 +--- + + +
+
+ + +
+ Invert Colors +
+ + +
+ Convert to Grayscale +
+ + +
+ Double Text Size +
diff --git a/source/components/reveal/reveal.html b/source/components/reveal/reveal.html new file mode 100644 index 0000000..3cf3831 --- /dev/null +++ b/source/components/reveal/reveal.html @@ -0,0 +1,18 @@ +--- +title: "Default" +description:

This component can be used as an alternative to Collapse/Expand but it's more delightful than the common one

+category: evolution +author: Hiep Vo +type: Reveal +order: 1 +--- + +
+
+ +
New Hide/Reveal
+
+
The text here will be hidden and revealed or collapse or expanded.
+
+
+
diff --git a/source/components/safety/safety.html b/source/components/safety/safety.html new file mode 100644 index 0000000..1e03d87 --- /dev/null +++ b/source/components/safety/safety.html @@ -0,0 +1,24 @@ +--- +title: "Default" +description: | +

Safety is button variation that let's you feel sure when you submitting something.

+author: Luis Rojas +category: evolution +type: safety +order: 1 +--- + +
+ + +

If you are really sure to submit your information, please hold the button for 3 seconds

+ +
+ +
+

Form submitted!!!

+
+ +
diff --git a/source/components/scrollspy/scrollspy.html b/source/components/scrollspy/scrollspy.html new file mode 100644 index 0000000..384a069 --- /dev/null +++ b/source/components/scrollspy/scrollspy.html @@ -0,0 +1,12 @@ +--- +title: "Default" +description:

Look at the top of the page and scroll to see it in action

+author: Carlos Coves Prieto +category: standard +type: scrollspy +order: 1 +--- + +
+
+
diff --git a/source/components/search-with-long-edit/search-with-long-edit.html b/source/components/search-with-long-edit/search-with-long-edit.html new file mode 100644 index 0000000..7d795f2 --- /dev/null +++ b/source/components/search-with-long-edit/search-with-long-edit.html @@ -0,0 +1,41 @@ +--- +title: "Expanding Search Field" +description: +

+

+

+type: search +author: Stu Wood +category: evolution +order: 1 +--- + + + + + +
+ + +
+ Search +
+ +
+ +
+
diff --git a/source/components/sift/sift.html b/source/components/sift/sift.html new file mode 100644 index 0000000..87a6d30 --- /dev/null +++ b/source/components/sift/sift.html @@ -0,0 +1,55 @@ +--- +title: "Default" +description:

A component to sift through items more visually. Can work as a gallery too. The sift component is basically having two baskets, you pick items from one, the items are then dropped into the other basket. A user goes through all items by simply clicking on the basket on the left (pick basket). Items are then dropped in the drop basket.

+author: Joseph Matembu +category: evolution +type: sift +order: 1 +--- + +
+ +
+ +
diff --git a/source/components/single-input-form/single-input-form-default.html b/source/components/single-input-form/single-input-form-default.html new file mode 100644 index 0000000..f04f8a8 --- /dev/null +++ b/source/components/single-input-form/single-input-form-default.html @@ -0,0 +1,60 @@ +--- +title: "Default" +description: +

The single-input form shows one input field each time. Once an input is filled out correctly, click the right arrow button to go to the next input. The progress indicator rolls over to the right and fades out. The current input fades out and the next one reveals. To go back to the previous input field, click the gray left arrow. The submission message the on the last page is customizable.

+ +

To create a single-input form, the form element takes a evo_c-sif class. Each input card has a evo_c-sif__input-wrap class, which can contain a progress indicator (evo_c-sif__indicator), an input field (evo_c-sif__input), a label (evo_c-sif__label) working as the placeholder, a next button (evo_c-sif__btn--next) and a go back button (evo_c-sif__btn--prev). The last input card can contain a submission message with class evo_c-sif__submission-msg. Please note the descending order of input cards in the HTML file. The last card should appear first, and the fist card is the last evo_c-sif__input-wrap element.

+author: Jing Ran +category: evolution +type: single input form +order: 1 +--- + +

+
+ Thank you for subscribing +
+ +
+ 3/3 + + + + +
+ +
+ 2/3 + + + + +
+ +
+ 1/3 + + + +
+ +
diff --git a/source/components/single-input-form/single-input-form-minimalist.html b/source/components/single-input-form/single-input-form-minimalist.html new file mode 100644 index 0000000..b955742 --- /dev/null +++ b/source/components/single-input-form/single-input-form-minimalist.html @@ -0,0 +1,62 @@ +--- +title: "Space Saving Minimalist" +description: | +

The space-saving-minimalist form shows one input card each time. Indicators are located on the left side of an input card, which show how many inputs left to be filled out. The indicator of the active input card is in light blue. If an invalid value is entered, the indicator turns to an orange red color. Once it is filled out correctly, press the Enter key or click the right arrow button to go to the next one. The next card slides in from the left. The indicator moves from left to right and becomes a go back button. You can go back to previous input cards by clicking one of the go back buttons. The last card is a submission card. Clicking the left arrow brings you back to the very first card. Clicking the submit button (subscribe in this case) to submit the form and a submission message appears.

+ +

To create a space-saving-minimalist form, the form element takes a evo_c-mini-form class. Input cards are written in ascending order in the HTML file. Each of them has a evo_c-mini-form__input-wrap class. The first card should also have a js-mini-form-is-active class as default. The last card, submission card, should take a evo_c-mini-form__submit class. + +

Inside of each card, there is a inner card wrap (evo_c-mini-form__input-inner). All input field, go next button and icons should go inside of the inner wrap.

+ + Other than the first card, the rest of the cards (evo_c-mini-form__input-wrap) should be followed by a go back button with class evo_c-mini-form__btn--prev.

+author: Jing Ran +category: evolution +type: single input form +order: 2 +--- + +

+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + +
+
+ + +
+
+ + + +
+
+ + +
+
+ + +
diff --git a/source/components/spiraltext/spiraltext-button.html b/source/components/spiraltext/spiraltext-button.html new file mode 100644 index 0000000..2f39ac1 --- /dev/null +++ b/source/components/spiraltext/spiraltext-button.html @@ -0,0 +1,15 @@ +--- +title: "Spiral Text Button" +description: +

Buttons and links wil need the __button class appended to have the proper button appearance like so - evo_c-spiralText__button.

+type: spiral text +author: Blake Wilson +category: evolution +order: 3 +--- + + + LINK + diff --git a/source/components/spiraltext/spiraltext-circle.html b/source/components/spiraltext/spiraltext-circle.html new file mode 100644 index 0000000..41dec80 --- /dev/null +++ b/source/components/spiraltext/spiraltext-circle.html @@ -0,0 +1,22 @@ +--- +title: "Circular Background" +description: +

The background size by default is styled with adequate padding and the shape is rectangular. Yet it can also have a circular appearance by appending --circle on to the evo_c-spiralText or evo_c-spiralText__button classes like so - evo_c-spiralText--circle and evo_c-spiralText__button--circle.

+type: spiral text +author: Blake Wilson +category: evolution +order: 4 +--- +

+ + Circle + + text + +

+ + diff --git a/source/components/spiraltext/spiraltext-fullheight.html b/source/components/spiraltext/spiraltext-fullheight.html new file mode 100644 index 0000000..d221c54 --- /dev/null +++ b/source/components/spiraltext/spiraltext-fullheight.html @@ -0,0 +1,15 @@ +--- +title: Full Height Background +description: +

The letter background can be full height and is displayed with the appended classes of --fullHeight or --circlefullHeight. The --circle class is not required if the --circlefullHeight class is present.

+type: spiral text +author: Blake Wilson +category: evolution +order: 5 +--- + + + Circle + diff --git a/source/components/spiraltext/spiraltext-link.html b/source/components/spiraltext/spiraltext-link.html new file mode 100644 index 0000000..884cbbb --- /dev/null +++ b/source/components/spiraltext/spiraltext-link.html @@ -0,0 +1,10 @@ +--- +title: "Spiral Text Link" +description: +

The spiralled text can be used on any link, for example a link nested inside a paragraph.

+type: spiral text +author: Blake Wilson +category: evolution +order: 2 +--- +

Here is a spiralled text link.

diff --git a/source/components/spiraltext/spiraltext-text.html b/source/components/spiraltext/spiraltext-text.html new file mode 100644 index 0000000..a721ba7 --- /dev/null +++ b/source/components/spiraltext/spiraltext-text.html @@ -0,0 +1,19 @@ +--- +title: "Spiral Text" +description: +

Often on the hover state of a link or button, or even a small body of text, an effect is given to bring attention to the action. The spiralling of text is such an affect that could add a little flare when an element is hovered over.

+

The effect can be placed on either a <button> or <a> element as well as on any text surrounded by <span> tags. The element gets the evo_c-spiralText class for the effect to take place and each individual text is required to be wrapped by an <em> tag.

+

Also, if more than one word is used, add the HTML <span>class="space"</span> between each of the words.

+type: spiral text +author: Blake Wilson +category: evolution +order: 1 +--- + +

+ + SPIRAL + + TEXT + +

diff --git a/source/components/sticky/sticky.html b/source/components/sticky/sticky.html new file mode 100644 index 0000000..a763cde --- /dev/null +++ b/source/components/sticky/sticky.html @@ -0,0 +1,27 @@ +--- +title: "Default" +description: | +

The sticky component is a standard UI component seen on many screen interfaces. This particular implementation uses a class of evo_c-sticky on a div element that is arbitrarily centered on the page. When the viewport window scrolls past div class="evo_c-sticky, the element is switched to a fixed position stuck at the top of the viewport. We have some lorem ipsum text floated on either sides to showcase how the stuck divwill follow the viewport. Once the sticky div reaches the h3 element with "End of Sticky" as its content and a class of evo_c-sticky__end, the fixed positon of the sticky div will be set to an absolute position with its coordinates at the time it reached the h3 element.

+author: Brian Hernandez +category: standard +type: sticky +order: 1 +--- + +
+

This is a sticky element

+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias sed hic laudantium pariatur, a soluta est ut. Inventore possimus repellendus, voluptatum, cum natus doloribus nihil aspernatur corrupti modi tenetur et.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias sed hic laudantium pariatur, a soluta est ut. Inventore possimus repellendus, voluptatum, cum natus doloribus nihil aspernatur corrupti modi tenetur et.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias sed hic laudantium pariatur, a soluta est ut. Inventore possimus repellendus, voluptatum, cum natus doloribus nihil aspernatur corrupti modi tenetur et.

+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias sed hic laudantium pariatur, a soluta est ut. Inventore possimus repellendus, voluptatum, cum natus doloribus nihil aspernatur corrupti modi tenetur et.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias sed hic laudantium pariatur, a soluta est ut. Inventore possimus repellendus, voluptatum, cum natus doloribus nihil aspernatur corrupti modi tenetur et.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias sed hic laudantium pariatur, a soluta est ut. Inventore possimus repellendus, voluptatum, cum natus doloribus nihil aspernatur corrupti modi tenetur et.

+
+ +

End of Sticky

diff --git a/source/components/svg-pagination/svg-pagination.html b/source/components/svg-pagination/svg-pagination.html new file mode 100644 index 0000000..cec5aa0 --- /dev/null +++ b/source/components/svg-pagination/svg-pagination.html @@ -0,0 +1,188 @@ +--- +title: "SVG Pagination" +description: | +

The SVG pagination is a evolution component. It is only supported in IE 11+, Firefox 51+, Chrome 49+, Safari 10+ and Opera 43+. It use SVG(Scalable Vector Graphics) to display the current selectedpagination. We use an unordered list to display pagination. It contains the basic style with `evo_c-svg-dot--default` class and each type will have its own specific style, such as `evo_c-svg-dot--cross`. Each `li` contains the `svg` tag to display the specific selected type and `a` tag is used to display the round dot. The selected style is triggered by some JS code. When you click the dot, it will add `is-active` class to that `li` tag, then the specific `svg` tag will change style.

+

You can easily use this component in your next project by using the following HTML code (along with the JavaScript code) as a base.

+author: Yerui Yu +category: evolution +type: SVG Pagination +order: 1 +--- + +

Draw Cross

+ +

Draw Ellipse

+ + +

Draw Sector

+ + +

Draw Square

+ + +

Draw Check

+ + diff --git a/source/components/switch/switch.html b/source/components/switch/switch.html new file mode 100644 index 0000000..9d0f731 --- /dev/null +++ b/source/components/switch/switch.html @@ -0,0 +1,23 @@ +--- +title: "Default Switch Input" +description: | +

Simple switch button to select true or false. It uses transition to give an effect + of fading in and out. +

+author: Cesar Verastegui +type: Input type radio +Category: standard +order: 1 +--- + +
+ +
+ + +
+
+ + +
+
diff --git a/source/components/tabs/tabs-animations.html b/source/components/tabs/tabs-animations.html new file mode 100644 index 0000000..752f25b --- /dev/null +++ b/source/components/tabs/tabs-animations.html @@ -0,0 +1,269 @@ +--- +title: "Tab Animations" +description: | +

+ In Evolution UI, you can apply an animation effect on both the tab and the panel. +

+

+ The current available effects are: + Tab effects +

+

+

+ You can apply the effects through the h-animation--[effect-name] + helper class on the evo_c-tab__list element. +

+

+ Note: You could also mix some effect together. +

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 8 +--- + + +
+ + + +
+

Tab 1

+

+ h-animation--zoom +

+
+ +
+

Tab 2

+

+ h-animation--zoom +

+
+ +
+

Tab 3

+

+ h-animation--zoom +

+
+ +
+ +
+ + + +
+

Tab 1

+

+ h-animation--zoom-text +

+
+ +
+

Tab 2

+

+ h-animation--zoom-text +

+
+ +
+

Tab 3

+

+ h-animation--zoom-text +

+
+ +
+ +
+ + + +
+

Tab 1

+

+ h-animation--underline +

+
+ +
+

Tab 2

+

+ h-animation--underline +

+
+ +
+

Tab 3

+

+ h-animation--underline +

+
+ +
+ + +
+ + + +
+

Tab 1

+

+ h-animation--highlight +

+
+ +
+

Tab 2

+

+ h-animation--highlight +

+
+ +
+

Tab 3

+

+ h-animation--highlight +

+
+ +
+ +
+ + + +
+

Tab 1

+

+ h-animation--highlight-to-right +

+
+ +
+

Tab 2

+

+ h-animation--highlight-to-right +

+
+ +
+

Tab 3

+

+ h-animation--highlight-to-right +

+
+ +
+ +
+ + + +
+

Tab 1

+

+ h-animation--zoom + h-animation--zoom-text +

+
+ +
+

Tab 2

+

+ h-animation--zoom + h-animation--zoom-text +

+
+ +
+

Tab 3

+

+ h-animation--zoom + h-animation--zoom-text +

+
+ +
+ diff --git a/source/components/tabs/tabs-border.html b/source/components/tabs/tabs-border.html new file mode 100644 index 0000000..9987811 --- /dev/null +++ b/source/components/tabs/tabs-border.html @@ -0,0 +1,72 @@ +--- +title: "Border Style" +description: | +

+ Tabs can have a border. +

+

+ By adding the h-border--[type] helper classe on a evo_c-tab + component, you can add a border to a tab. The available types are: +

+

+

+

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 2 +--- + + +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ diff --git a/source/components/tabs/tabs-card.html b/source/components/tabs/tabs-card.html new file mode 100644 index 0000000..4f74b9d --- /dev/null +++ b/source/components/tabs/tabs-card.html @@ -0,0 +1,65 @@ +--- +title: "Card Style" +description: | +

+ Tabs could have a card style, too. +

+

+ By adding the card modifier classe on a evo_c-tab + component, you can add the card style to a tab. +

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 3 +--- + + +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ diff --git a/source/components/tabs/tabs-color-variations.html b/source/components/tabs/tabs-color-variations.html new file mode 100644 index 0000000..765bcdc --- /dev/null +++ b/source/components/tabs/tabs-color-variations.html @@ -0,0 +1,71 @@ +--- +title: "Color Variations" +description: | +

+ By adding the h-bck__[color-name][--variation] helper class on an + evo_c-tab__navigation element, you can change the navigation's color. + The color-name part comes from one of the colors in the + Evolution UI's color palette. The --variation part is + optional instead. +

+

+ By adding the h-active-bck--[color-name] helper class on the + evo_c-tab__list element, you can change the color of the active tab. + The color-name part comes from one of the colors in the + Evolution UI's color palette. +

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 4 +--- + + +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ diff --git a/source/components/tabs/tabs-flex-helpers.html b/source/components/tabs/tabs-flex-helpers.html new file mode 100644 index 0000000..bb48840 --- /dev/null +++ b/source/components/tabs/tabs-flex-helpers.html @@ -0,0 +1,125 @@ +--- +title: "Flex Helpers" +description: | +

+ A Evolution UI tab provides a list of flex helpers which can be + used on the navigation link to change the visual aspect of tab items. +

+

+ The available helpers are: + +

+

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 6 +--- + + +
+ + + +
+

Sticky Element

+
+ +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ diff --git a/source/components/tabs/tabs-icons.html b/source/components/tabs/tabs-icons.html new file mode 100644 index 0000000..4886058 --- /dev/null +++ b/source/components/tabs/tabs-icons.html @@ -0,0 +1,95 @@ +--- +title: "Icons" +description: | +

+ A tab can contain icons. +

+

+ Use the h-link-column helper class on a evo_c-tab__list + element if you want to stack the icons. +

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 10 +--- + + +
+ + + +
+

Tab 1

+
+ +
+

Tab 2

+
+ +
+

Tab 3

+
+ +
+ + +
+ + + +
+

Tab 1

+
+ +
+

Tab 2

+
+ +
+

Tab 3

+
+ +
diff --git a/source/components/tabs/tabs-lateral-nav.html b/source/components/tabs/tabs-lateral-nav.html new file mode 100644 index 0000000..2cb6b71 --- /dev/null +++ b/source/components/tabs/tabs-lateral-nav.html @@ -0,0 +1,114 @@ +--- +title: "Lateral Navigation" +description: | +

+ Using the lateral modifier on an evo_c-tab component + the navigation will be placed lateral. +

+

+ Using the h-nav--right helper class on the evo_c-tab__navigation + element, the navigation will be placed on the right side instead. +

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 7 +--- + + +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ diff --git a/source/components/tabs/tabs-panel-animations.html b/source/components/tabs/tabs-panel-animations.html new file mode 100644 index 0000000..598f220 --- /dev/null +++ b/source/components/tabs/tabs-panel-animations.html @@ -0,0 +1,267 @@ +--- +title: "Panel Animations" +description: | +

+ In Evolution UI, you can apply an animation effect on both the tab and the panel. +

+

+ The current available effects are: + Panel effects +

+

+

+ You can apply the effects by adding the effect on the evo_c-tab + component. +

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 9 +--- + + +
+ + +
+

scroll-from-top

+
+ +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+ +
+ +
+

Tab 2

+

+ Lorem ipsum Consectetur nisi do nulla anim incididunt Excepteur + dolore ex ullamco eiusmod cupidatat deserunt qui esse enim labore + incididunt elit dolor id ex deserunt commodo nisi do non sint nostrud + aliqua sed ad adipisicing est id non sunt ad dolore in id culpa sed + ullamco ad Excepteur veniam est est voluptate do amet exercitation + sit anim non ex id cillum adipisicing nulla eu velit officia aute ut + esse in ut sed eu eu culpa amet culpa nostrud dolore minim quis dolore + labore Excepteur fugiat aute sunt adipisicing veniam nulla deserunt + cupidatat voluptate dolor anim elit incididunt et proident enim aliquip + dolore fugiat Excepteur dolore nulla fugiat dolor minim do id aute + nisi Ut dolor anim commodo in dolor adipisicing fugiat elit eu Ut + irure occaecat nulla Duis irure laborum sit irure exercitation + officia voluptate dolore anim est et fugiat in cupidatat esse sint + laborum quis consequat pariatur dolore ex dolore ut elit voluptate + incididunt Ut fugiat consequat esse officia anim enim consectetur + ullamco dolor magna Excepteur proident proident dolor laboris sed eu + nulla eiusmod aliqua labore veniam officia minim incididunt fugiat + ut irure sint adipisicing adipisicing consequat dolore culpa. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+ +
+ +
+ + +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Consectetur nisi do nulla anim incididunt Excepteur + dolore ex ullamco eiusmod cupidatat deserunt qui esse enim labore + incididunt elit dolor id ex deserunt commodo nisi do non sint nostrud + aliqua sed ad adipisicing est id non sunt ad dolore in id culpa sed + ullamco ad Excepteur veniam est est voluptate do amet exercitation + sit anim non ex id cillum adipisicing nulla eu velit officia aute ut + esse in ut sed eu eu culpa amet culpa nostrud dolore minim quis dolore + labore Excepteur fugiat aute sunt adipisicing veniam nulla deserunt + cupidatat voluptate dolor anim elit incididunt et proident enim aliquip + dolore fugiat Excepteur dolore nulla fugiat dolor minim do id aute + nisi Ut dolor anim commodo in dolor adipisicing fugiat elit eu Ut + irure occaecat nulla Duis irure laborum sit irure exercitation + officia voluptate dolore anim est et fugiat in cupidatat esse sint + laborum quis consequat pariatur dolore ex dolore ut elit voluptate + incididunt Ut fugiat consequat esse officia anim enim consectetur + ullamco dolor magna Excepteur proident proident dolor laboris sed eu + nulla eiusmod aliqua labore veniam officia minim incididunt fugiat + ut irure sint adipisicing adipisicing consequat dolore culpa. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ + +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+ +
+ +
+

Tab 2

+

+ Lorem ipsum Consectetur nisi do nulla anim incididunt Excepteur + dolore ex ullamco eiusmod cupidatat deserunt qui esse enim labore + incididunt elit dolor id ex deserunt commodo nisi do non sint nostrud + aliqua sed ad adipisicing est id non sunt ad dolore in id culpa sed + ullamco ad Excepteur veniam est est voluptate do amet exercitation + sit anim non ex id cillum adipisicing nulla eu velit officia aute ut + esse in ut sed eu eu culpa amet culpa nostrud dolore minim quis dolore + labore Excepteur fugiat aute sunt adipisicing veniam nulla deserunt + cupidatat voluptate dolor anim elit incididunt et proident enim aliquip + dolore fugiat Excepteur dolore nulla fugiat dolor minim do id aute + nisi Ut dolor anim commodo in dolor adipisicing fugiat elit eu Ut + irure occaecat nulla Duis irure laborum sit irure exercitation + officia voluptate dolore anim est et fugiat in cupidatat esse sint + laborum quis consequat pariatur dolore ex dolore ut elit voluptate + incididunt Ut fugiat consequat esse officia anim enim consectetur + ullamco dolor magna Excepteur proident proident dolor laboris sed eu + nulla eiusmod aliqua labore veniam officia minim incididunt fugiat + ut irure sint adipisicing adipisicing consequat dolore culpa. +

+
+ +
+

Tab 3

+ +

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ +

+
+ +
+

Tab 3

+ +

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
diff --git a/source/components/tabs/tabs-standard.html b/source/components/tabs/tabs-standard.html new file mode 100644 index 0000000..1231350 --- /dev/null +++ b/source/components/tabs/tabs-standard.html @@ -0,0 +1,69 @@ +--- +title: "Default" +description: | +

+ In Evolution UI, tabs are wrapped by the evo_c-tab container + and are accessible to people with disabilities. +

+

+ Use the LEFT/RIGHT and UP/DOWN arrows on your + keyboard for navigate through the active tab. +

+

+ A tab contains a navigation list and a list of items. +

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 1 +--- + + +
+ + + +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ diff --git a/source/components/tabs/tabs-sticky.html b/source/components/tabs/tabs-sticky.html new file mode 100644 index 0000000..233771d --- /dev/null +++ b/source/components/tabs/tabs-sticky.html @@ -0,0 +1,123 @@ +--- +title: "Sticky" +description: | +

+ A Evolution UI tab could have a sticky element which is always visible to + the user. To this end, add a div with the classevo_c-tab__sticky + just under the navigation element. +

+

+ Using the modifier sticky-half on a evo_c-tab component + the width of the sticky will be half. +

+author: Gabriele Romeo +category: standard +type: Standard Tabs +order: 5 +--- + + +
+ + + +
+

Sticky Element

+
+ +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ +
+ + + +
+

Sticky Element

+
+ +
+

Tab 1

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 2

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+

Tab 3

+

+ Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu + Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi + officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore + aliquip aute et est voluptate. +

+
+ +
+ diff --git a/source/components/text2speech/text2speech.html b/source/components/text2speech/text2speech.html new file mode 100644 index 0000000..6e1c440 --- /dev/null +++ b/source/components/text2speech/text2speech.html @@ -0,0 +1,36 @@ +--- +title: "Text 2 Speech" +description: | +

The Text2Speech component, reads all data which gets selected by the user. It uses the Web Speech API. + It can be used by using the commands Shift+b to get started and Shift+v to cancel or the control panel on the left side. + Select first the text and then push the start/stop button

+type: text2speech +author: Sebastian Nagy +category: evolution +order: 1 +--- + +
+ + + +
+
+

Text 2 Speech

+ + + + +
+ +

Instruction!

+
    +
  • Select the text you want to get read.
    • +
  • Use the buttons to start and stop,
    • + or +
  • Use the Shift+B key to start and Shift+V to stop the reading.
    • +
+
+ +
+
diff --git a/source/components/tooltip/tooltip-scale-from-corner.html b/source/components/tooltip/tooltip-scale-from-corner.html new file mode 100644 index 0000000..2bf4327 --- /dev/null +++ b/source/components/tooltip/tooltip-scale-from-corner.html @@ -0,0 +1,16 @@ +--- +title: "Scaling Tooltip" +description: | +

As its name, this tooltip shows content from the right corner with little icon. You can specific tooltip scale from right to left and all the way down or scale right to left and continue expand to left.

+author: Aashish Nagpal +category: standard +type: tooltip +order: 2 +--- + +
+ + +
diff --git a/source/components/tooltip/tooltip.html b/source/components/tooltip/tooltip.html new file mode 100644 index 0000000..3c2f756 --- /dev/null +++ b/source/components/tooltip/tooltip.html @@ -0,0 +1,61 @@ +--- +title: "Default" +description: | +

Tooltips are simple text/html that appear when the user hovers over or touches an element. Use tooltips to display auxiliary/complementary information.

+

Creating and Using Tooltips

+

To create a tooltip within your page, decide what part of text or html on your page needs a tooltip and wrap that portion with a span or div tag and add evo_c-tooltip-container class to this wrapper tag.

+

Along with that, just add your tooltip contents (can be plain text or html code) within the same wrapping element. Wrap your tooltip contents inside a tag with class evo_c-tooltip.

+

By default the tooltip will slide in from above, but you may define flow attribute on the tooltip and set it to left, right, up or down to make them slide in from left, right, above or bottom respectively.

+

Upcoming Enhancements

+ +

Examples

+

Hover over the links below to see tooltips:

+author: Aashish Nagpal +category: standard +type: tooltip +order: 1 +--- + +

The tooltips may slide in from + + + above by default + Default tooltip from above. + , or from + + + + left + Tooltip from left. + , or from + + + + right + Tooltip from right. + , or from + + + + bottom + Tooltip from bottom. + . Moreover, tooltips may contain + + + + plain text + This is a plain text tooltip. + or + + + + html (including images) + Tooltip with HTML. + + . +

diff --git a/source/components/typography/typography-utils.html b/source/components/typography/typography-utils.html new file mode 100644 index 0000000..e793c81 --- /dev/null +++ b/source/components/typography/typography-utils.html @@ -0,0 +1,27 @@ +--- +title: "Utilities" +description: | +

+ Evolution UI provides a list of helpers for text which can be applied through + the evo_h-txt--[modifier] helper class. +

+author: Gabriele Romeo +category: standard +type: typography +order: 2 +--- + +

Default font-family

+

Bold

+

Italic

+

Caps

+

Align text to the left

+

Align text to the center

+

Align text to the right

+

capitalize

+

uppercase

+

LOWERCASE

+

underline

+

No-decoration

+

Text no wrap

+ diff --git a/source/components/typography/typography.html b/source/components/typography/typography.html new file mode 100644 index 0000000..4b57fbb --- /dev/null +++ b/source/components/typography/typography.html @@ -0,0 +1,36 @@ +--- +title: "Default" +description: | +

+ Evolution UI makes use of a typographic scale known as major-third + for creating balanced and harmonious font sizing. +

+

+ The framework provides the h1-h6 headings as well as an extension for + big and small headings. +

+

+ Evolution UI's typography classes can be applied on every HTML element. +

+

+ For example you could apply a evo_c-typo__h1 class on an <h3> + HTML element. The latter will get a new aesthetic look while its semantic + meaning will remain the same. +

+author: Gabriele Romeo +category: standard +type: typography +order: 1 +--- + + +

Title x-large

+

Title large

+

Title h1

+

Title h2

+

Title h3

+

Title h4

+
Title h5
+
Title h6
+

Title small

+

Title x-small

diff --git a/source/components/utilities/utilities-floats.html b/source/components/utilities/utilities-floats.html new file mode 100644 index 0000000..a8bc575 --- /dev/null +++ b/source/components/utilities/utilities-floats.html @@ -0,0 +1,14 @@ +--- +title: "Floats" +description: | +

The floats utility classes allow you to add a single class name to an element to produce a float: left; effect, a float: right; effect or to clear both kinds of floats. The first div below is using a class of .evo_h-utilities__floats--right to float the div to the right. The subsequent div has a class of .evo_h-utilities__floats--left applied to it producing the left floating effect. The last div clears both of the previous divs by using the .evo_h-utilities__floats--clear class.

+

You can ignore the .evo_h-presentation classes as these have nothing to do with the floating and clearing functionality of these helper classes. These classes are just used here for styling and presentation purposes.

+author: Brian Hernandez +category: standard +type: utilities +order: 1 +--- + +
settingsDiv 1 Floated Right
+
menuDiv 2 Floated Left
+
faceCleared Div
diff --git a/source/components/utilities/utilities-text-transform.html b/source/components/utilities/utilities-text-transform.html new file mode 100644 index 0000000..400900e --- /dev/null +++ b/source/components/utilities/utilities-text-transform.html @@ -0,0 +1,16 @@ +--- +title: "Text Transform" +description: | +

The text transform utility classes can transform text within the element it is applied to in three ways. The .evo_h-utilities__text--lowercase class transforms text to all lowercase letters. The .evo_h-utilities__text--uppercase class transform text to all uppercase letters. Finally, the .evo_h-utilities__text--capitalize class with capitalize the first letter of each word within its content.

+

You can ignore the .evo_h-presentation classes as these have nothing to do with the text transform functionality of these helper classes. These classes are just used here for styling and presentation purposes.

+author: Brian Hernandez +category: standard +type: utilities +order: 2 +--- + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi corporis minima eveniet quo a quisquam laborum porro, soluta hic, nemo veniam accusamus impedit sequi cupiditate sint architecto. Doloremque, commodi, ipsam.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, velit nisi enim temporibus officia obcaecati in impedit minus magnam cum modi doloribus asperiores ducimus corporis? Accusantium cumque excepturi tempora optio?

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repellendus itaque voluptates quos, excepturi possimus deleniti nobis, reiciendis veritatis, quasi, natus exercitationem totam eaque. Dolor et magni saepe deserunt voluptas!

+
diff --git a/source/components/utilities/utilities-visibility.html b/source/components/utilities/utilities-visibility.html new file mode 100644 index 0000000..1973fbd --- /dev/null +++ b/source/components/utilities/utilities-visibility.html @@ -0,0 +1,27 @@ +--- +title: "Visibility" +description: | +

The visibility utility classes will produce different visibility and hidden effects on the elements they are applied to. In the first row of span tags we have the class .evo_h-utilities__visibility--hidden for the span containing the content 4. This class removes the element entirely from the DOM and its dimensions are no longer respected by the surrounding spans. In the second span row, the class .evo_h-utilities__visibility--invisible is applied to the 4 span. In this case, the visibility of this element is hidden from the user however its DOM dimensions are respected by the surrounding span tags this time. It is as if the elements opacity was turned down to 0.

+author: Brian Hernandez +category: standard +type: utilities +order: 3 +--- + +
+ 1 + 2 + 3 + 4 + 5 + 6 +
+ +
+ 1 + 2 + 3 + 4 + 5 + 6 +
diff --git a/source/components/versatile-table/versatile-table.html b/source/components/versatile-table/versatile-table.html new file mode 100644 index 0000000..1195163 --- /dev/null +++ b/source/components/versatile-table/versatile-table.html @@ -0,0 +1,16 @@ +--- +title: "Versatile Table" +description:

The Versatile Table is an evolution UI element to populate table based on JSON. It includes draggable column & row, sorting, searching and user profile pop-up features.

+author: Chenfeng Lai +category: evolution +type: Versatile Table +order: 1 +--- + + +
+ +
+ +
+