Skip to content

Added HTML/YML component files from docs/_components folder of original repo to source/components folder. #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added HTML/YML component files from docs/_components folder of original repo to source/components folder. #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions source/components/accordion/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
title: "Default"
description: |
<p>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 <code>.evo_c-accordion</code>. The tab title and its contents are contained within an <code>li</code> element with the class <code>.evo_c-accordion__bellow</code> (a bellow is what expands and contracts on an actual accordion). The tab titles are styled anchor tags (<code>a href="#"</code>) with a class of <code>.evo_c-accordion__title</code> for semantics. This is then followed by the content for each tab contained within a <code>div</code> with the class <code>.evo_c-accordion__content</code>. The expanding and contracting functionality is accomplished with some JavaScript via a hook in the anchor tag with the class <code>.js-c-accordion-target</code>. 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 <code>div class="evo_c-accordion__content</code> tags. To add more tab titles, simply add more <code>li</code> elements in the same pattern.</p>
author: Brian Hernandez
category: standard
type: accordion
order: 1
---

<ul class="evo_c-accordion">
<li class="evo_c-accordion__bellow">
<a class="evo_c-accordion__title js-c-accordion-target" href="#">Bellow Title</a>
<div class="evo_c-accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit corrupti nulla, aliquid maiores. Enim itaque incidunt, quo ratione dignissimos officiis. Optio, deleniti eligendi similique ipsa quae aliquid quis nam quo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iusto pariatur doloribus. Maxime, tenetur, eveniet. Temporibus, dignissimos asperiores fuga est minus ullam quidem! Cupiditate expedita accusamus pariatur temporibus, quam, voluptate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit corrupti nulla, aliquid maiores. Enim itaque incidunt, quo ratione dignissimos officiis. Optio, deleniti eligendi similique ipsa quae aliquid quis nam quo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iusto pariatur doloribus. Maxime, tenetur, eveniet. Temporibus, dignissimos asperiores fuga est minus ullam quidem! Cupiditate expedita accusamus pariatur temporibus, quam, voluptate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit corrupti nulla, aliquid maiores. Enim itaque incidunt, quo ratione dignissimos officiis. Optio, deleniti eligendi similique ipsa quae aliquid quis nam quo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iusto pariatur doloribus. Maxime, tenetur, eveniet. Temporibus, dignissimos asperiores fuga est minus ullam quidem! Cupiditate expedita accusamus pariatur temporibus, quam, voluptate.</p>
</div>
</li>
<li class="evo_c-accordion__bellow">
<a class="evo_c-accordion__title js-c-accordion-target" href="#">Bellow Title</a>
<div class="evo_c-accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique est molestias, quo ipsam itaque eius, alias amet ipsum rerum, dolorum suscipit placeat voluptatem obcaecati in maxime perspiciatis doloribus veritatis libero.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus tempore sed voluptatibus unde explicabo? Libero soluta ad autem maiores nemo veniam quidem molestiae eos laborum deleniti hic facere sit, in!</p>
</div>
</li>
<li class="evo_c-accordion__bellow">
<a class="evo_c-accordion__title js-c-accordion-target" href="#">Bellow Title</a>
<div class="evo_c-accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro delectus vero doloribus velit voluptatibus provident tempora laudantium ex, veniam voluptas qui necessitatibus reiciendis repellat ad quasi magni voluptate rerum. Vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate aut, ipsa! Et atque eaque, optio tempora velit. Dignissimos modi distinctio porro tempore omnis numquam possimus, officia recusandae quia earum aspernatur.</p>
</div>
</li>
<li class="evo_c-accordion__bellow">
<a class="evo_c-accordion__title js-c-accordion-target" href="#">Bellow Title</a>
<div class="evo_c-accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic iure sed cumque quod. Nemo minus, placeat cumque asperiores quibusdam at est quas, facilis repellat ipsum dicta hic unde accusamus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque voluptas, vero error laboriosam aspernatur dolorem vel suscipit qui odio unde totam perferendis distinctio dolores molestias earum reprehenderit eveniet quod eligendi!</p>
</div>
</li>
</ul>
29 changes: 29 additions & 0 deletions source/components/audio-player/audio-player.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
title: "Default"
description: <p>A basic cross-browser audio player. The player uses <code>h-bck__primary--base</code> class for the background. You can change the word <code>primary</code> to any of <code>primary2</code>, <code>secondary</code>, <code>background</code>, <code>accent</code>, <code>accent2</code>, <code>accent3</code>, and <code>accent4</code>. For a darker variation, change the word <code>base</code> in the class helper name to <code>dark</code>.</p>
author: Joseph Matembu
category: standard
type: Audio Player
order: 1
---

<div class="evo_l-grid__row l-gridrow__gutters">
<div class="evo_l-grid__col col10_of16">
<figure id="audioplayer" class="evo_c-audio-player h-bck__primary--dark">
<div class="evo_c-audio-player__controls">
<div class="evo_c-audio-player__track">
<button type="button" class="evo_c-audio-player__icon"><i class="material-icons">play_arrow</i></button>
<input type="range" min="0" max="100" value="0" class="evo_c-audio-player__playhead" id="playhead">
</div>
<span class="evo_c-audio-player__track-time">00:00</span>
<div class="evo_c-audio-player__track-volume">
<button type="button" class="evo_c-audio-player__icon"><i class="material-icons">volume_up</i></button>
</div>
</div>
<audio controls="controls" preload="auto" itemprop="audio">
<source src="../assets/audio/diana.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</figure>
</div>
</div>
39 changes: 39 additions & 0 deletions source/components/bookmarklet/bookmarklet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
title: "Bookmarklet"
description:
<div data-limit-bookmarklet>
<h3>Using Bookmarklet</h3>
<p>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 <code>Shift</code> + <code>Control</code> + <code>L</code> + <code>M</code>. 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 <code>span</code> or header. The component will warn you if you split nodes or try and activate the bookmark without selecting any text.</p>

<p>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.</p>

<h3>Including Bookmarklet</h3>
<p>To include Bookmarklet on a page simply add the following markup somewhere in the <code>body</code> tag of your page and include bookmarklet.js before the closing <code>body</code> tag.</p>

<h3>Highlight Color</h3>
<p>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 <code>data-highlight-color</code> attribute. For example:</p>

<h3>Limiting the Component's Scope</h3>
<p>You can limit the scope of bookmarklet's highlighting and bookmark creation by adding the <code>data-limit-bookmarklet</code> 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.</p>
</div>
type: bookmarklet
author: Sam Chittenden
category: evolution
order: 1
---

<!-- bookmarklet list here -->
<div class="evo_c-bookmarklet" data-highlight-color="">
<i class="material-icons evo_c-bookmarklet__teaser">bookmark</i>
<h1 class="evo_c-bookmarklet__bookmark-list-header">Bookmarks</h1>
<ol class="evo_c-bookmaklet__bookmark-list">
</ol>
<a class="evo_c-btn evo_c-btn--secondary evo_c-bookmarklet__clear-all">clear all</a>
</div>
<!-- button pop-up -->
<div class="evo_c-bookmarklet__pop-up">
<p>Bookmark this selection?</p>
<span class="evo_c-bookmarklet__pop-up-button--yes"><i class="material-icons">done</i> Yes!</span>
<span class="evo_c-bookmarklet__pop-up-button--no"><i class="material-icons">close</i> No.</span>
<span class="evo_c-bookmarklet__pop-up-pip"></span>
</div>
20 changes: 20 additions & 0 deletions source/components/card/card-custom-background.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: "Basic Card with background color"
description: <p>Many variations are available matching the color palette. This card for example, is using <code>h-bck__secondary--dark</code> class helper for its background color. For other variations, replace the word <code>secondary</code> in the class with any of <code>accent</code>, <code>accent2</code>, <code>accent3</code>, <code>accent4</code>, <code>primary</code>, <code>primary2</code>, <code>secondary</code>, <code>background</code>. Remember to use <code>evo_h-txt-light</code> or <code>evo_h-txt-light2</code> on the text.</p>
author: Joseph Matembu
category: standard
type: cards
order: 2
---

<div class="evo_l-grid__row l-gridrow__gutters">
<div class="evo_l-grid__col col8_of16">
<div class="su_code-example">
<div class="evo_c-card h-bck__secondary--dark">
<h4 class="evo_c-card__title evo_h-txt-light">Headline</h4>
<span class="evo_c-card__sub-title evo_h-txt-light2">Sub headline</span>
<p class="evo_h-txt-light">Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.</p>
</div>
</div>
</div>
</div>
24 changes: 24 additions & 0 deletions source/components/card/card-with-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
title: "Card with buttons"
description:
author: Joseph Matembu
category: standard
type: cards
order: 3
---

<div class="evo_l-grid__row l-gridrow__gutters">
<div class="evo_l-grid__col col8_of16 ">
<div class="evo_c-card">
<div class="evo_c-card__body">
<h4 class="evo_c-card__title">Headline</h4>
<span class="evo_c-card__sub-title">Sub headline</span>
<p>Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.</p>
</div>
<div class="evo_c-card__footer">
<button type="button" class="evo_c-card__btn">Action</button>
<button type="button" class="evo_c-card__btn">Action</button>
</div>
</div>
</div>
</div>
23 changes: 23 additions & 0 deletions source/components/card/card-with-image.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
title: "Card with Image"
description:
author: Joseph Matembu
category: standard
type: cards
order: 4
---

<div class="evo_l-grid__row l-gridrow__gutters">
<div class="evo_l-grid__col col8_of16">
<div class="evo_c-card">
<div class="evo_c-card__image">
<img src="../assets/images/components/card/images/1.jpg">
</div>
<h4 class="evo_c-card__title">Headline</h4>
<span class="evo_c-card__sub-title">Sub headline</span>
<div class="evo_c-card__body">
<p>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.</p>
</div>
</div>
</div>
</div>
27 changes: 27 additions & 0 deletions source/components/card/card-with-product.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: "Product Card"
description:
author: Joseph Matembu
category: standard
type: cards
order: 5
---

<div class="evo_l-grid__row l-gridrow__gutters">
<div class="evo_l-grid__col col8_of16">
<div class="evo_c-card evo_c-card__product su_align-center">
<div class="evo_c-card__image">
<img src="../assets/images/components/card/images/3.jpg">
</div>
<div class="evo_c-card__body">
<h3 class="evo_c-card__title">Red Shoe</h3>
<p>Replenish, earth tree replenish</p>
</div>
<div class="evo_c-card__footer">
<span class="evo_c-card__price su_left">$29.99</span>
<span class="evo_c-card__icon su_right"><i class="material-icons">share</i></span>
<span class="su_clear">
</div>
</div>
</div>
</div>
28 changes: 28 additions & 0 deletions source/components/card/card-with-profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: "Profile Card"
description:
author: Joseph Matembu
category: standard
type: cards
order: 6
---

<div class="evo_l-grid__row l-gridrow__gutters">
<div class="evo_l-grid__col col8_of16">
<div class="evo_c-card evo_c-card__profile">
<div class="evo_c-card__image">
<img src="../assets/images/components/card/images/2.jpg">
<img class="evo_c-card__profile-image" src="../assets/images/components/card/images/face.jpg">
</div>
<div class="evo_c-card__body">
<h3 class="evo_c-card__title">John Brave</h3>
<p>Replenish, earth tree replenish</p>
</div>
<div class="evo_c-card__footer">
<a href="#" class="evo_c-card__icon"><i class="material-icons">favorite</i></a>
<a href="#" class="evo_c-card__icon"><i class="material-icons">thumb_up</i></a>
<span class="su_clear"></span>
</div>
</div>
</div>
</div>
18 changes: 18 additions & 0 deletions source/components/card/card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
title: "Basic Card"
description: <p>A basic card component</p>
author: Joseph Matembu
category: standard
type: cards
order: 1
---

<div class="evo_l-grid__row l-gridrow__gutters">
<div class="evo_l-grid__col col8_of16">
<div class="evo_c-card">
<h4 class="evo_c-card__title">Headline</h4>
<span class="evo_c-card__sub-title">Sub headline</span>
<p>Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.</p>
</div>
</div>
</div>
52 changes: 52 additions & 0 deletions source/components/carousel-with-dropping-circle-nav/carousel-with-dropping-circle-nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
title: ""
description:
<p>Carousel with dropping circles takes minimalism to the next level with a clean interface to showcase five images of your choosing.</p>
type: carousel with drop navigation
order: 1
---

<div class="evo_c-nav-drop-carousel">
<!-- label_container -->
<div class="evo_c-nav-drop-carousel__label-wrap">
<div class="evo_c-nav-drop-carousel__label-container">
<label class="evo_c-nav-drop-carousel__drop-label" id="drop-1"></label>
</div>
<div class="evo_c-nav-drop-carousel__label-container">
<label class="evo_c-nav-drop-carousel__drop-label" id="drop-2"></label>
</div>
<div class="evo_c-nav-drop-carousel__label-container">
<label class="evo_c-nav-drop-carousel__drop-label" id="drop-3"></label>
</div>
<div class="evo_c-nav-drop-carousel__label-container">
<label class="evo_c-nav-drop-carousel__drop-label" id="drop-4"></label>
</div>
<div class="evo_c-nav-drop-carousel__label-container" id="default-drop">
<label class="evo_c-nav-drop-carousel__drop-label" id="drop-5"></label>
</div>
</div>

<div class="evo_c-nav-drop-carousel__drop-content">

<div class="evo_c-nav-drop-carousel__slide">
<img src="assets/images/components/carousel_with_dropping_circle_nav/boat.jpg" alt="boat" />
</div>

<div class="evo_c-nav-drop-carousel__slide">
<img src="assets/images/components/carousel_with_dropping_circle_nav/color-houses.jpg" alt="sky" />
</div>

<div class="evo_c-nav-drop-carousel__slide">
<img src="assets/images/components/carousel_with_dropping_circle_nav/other-world.jpg" alt="moutains" />
</div>

<div class="evo_c-nav-drop-carousel__slide">
<img src="assets/images/components/carousel_with_dropping_circle_nav/sand-castle.jpg" alt="castle" />
</div>

<div class="evo_c-nav-drop-carousel__slide">
<img src="assets/images/components/carousel_with_dropping_circle_nav/sun-set.jpg" alt="sun" />
</div>
</div>

</div>
42 changes: 42 additions & 0 deletions source/components/carousel/carousel-fade.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
title: "Carousel - Fade transition"
description:
<p>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</p>
author: Sam Chittenden
category: standard
type: carousel
order: 1
---

<div class="evo_c-carousel__wrapper">
<div class="evo_c-carousel evo_c-carousel--fader-type" data-bullet-nav>

<ol class="evo_c-carousel__bullet-nav">
<li class="evo_c-carousel__bullet-nav-item evo_c-carousel__bullet-nav-item--is-active" data-slide-index="0"></li>
<li class="evo_c-carousel__bullet-nav-item" data-slide-index="1"></li>
<li class="evo_c-carousel__bullet-nav-item" data-slide-index="2"></li>
</ol>

<div class="evo_c-carousel__slides-container">

<div class="evo_c-carousel__slide evo_c-carousel__slide--is-selected">
<img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1067" alt="">
</div>

<div class="evo_c-carousel__slide">
<img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1051" alt="">
</div>

<div class="evo_c-carousel__slide">
<img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1041" alt="">
</div>

<a class="evo_c-carousel__arrow-nav evo_c-carousel__arrow-nav--left" data-slide-nav="prev">
<i class="material-icons evo_c-carousel__arrow-nav-icon">navigate_before</i>
</a>
<a class="evo_c-carousel__arrow-nav evo_c-carousel__arrow-nav--right" data-slide-nav="next">
<i class="material-icons evo_c-carousel__arrow-nav-icon">navigate_next</i>
</a>
</div>
</div>
</div>
Loading