diff --git a/exampleSite/layouts/partials/elements_reference.html b/exampleSite/layouts/partials/elements_reference.html deleted file mode 100644 index 73ad7c6..0000000 --- a/exampleSite/layouts/partials/elements_reference.html +++ /dev/null @@ -1,2009 +0,0 @@ - -
-
-

Elements Reference

-

Oh, and this: a handy reference to all the modifiers supported by various elements.

-
- - -
-
-

Banner

-
-
- -

HTML

- 
<section class="banner style(N) (optional modifiers)">
-                                        <div class="content">
-                                        (content)
-                                        </div>
-                                        <div class="image">
-                                        <img src="(image URL)" alt="Alternate text" />
-                                        </div>
-                                        </section>
- -
- - -
-

banner style1

-

A 50/50 vertical split between content and an image. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
fullscreenFills the height of the screen.
orient-leftShows content on the left, image on the right.
orient-rightShows content on the right, image on the left.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
- - -
-

banner style2

-

Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
fullscreenFills the height of the screen.
orient-leftAttaches the content box to the left edge of the screen.
orient-centerPlaces the content box in the center of the screen.
orient-rightAttaches the content box to the right edge of the screen.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
- - -
-

banner style3

-

An image within a circular frame placed to the side of content. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
fullscreenFills the height of the screen.
orient-leftPlaces the content on the left, image on the right.
orient-rightPlaces the content on the right, image on the left.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-upFades image up on page load.
onload-image-fade-downFades image down on page load.
onload-image-fade-leftFades image left on page load.
onload-image-fade-rightFades image right on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-upFades image up on page scroll.
onscroll-image-fade-downFades image down on page scroll.
onscroll-image-fade-leftFades image left on page scroll.
onscroll-image-fade-rightFades image right on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
- - -
-

banner style4

-

An image within a phone-shaped frame placed to the side of content. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
fullscreenFills the height of the screen.
iphoneUses iPhone styling for image frame.
androidUses Android styling for image frame.
orient-leftPlaces the content on the left, image on the right.
orient-rightPlaces the content on the right, image on the left.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-upFades image up on page load.
onload-image-fade-downFades image down on page load.
onload-image-fade-leftFades image left on page load.
onload-image-fade-rightFades image right on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-upFades image up on page scroll.
onscroll-image-fade-downFades image down on page scroll.
onscroll-image-fade-leftFades image left on page scroll.
onscroll-image-fade-rightFades image right on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
- - -
-

banner style5

-

Content set directly against an image background. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
fullscreenFills the height of the screen.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
-
- - -
-
-

Spotlight

-
-
- -

HTML

- 
<section class="spotlight style(N) (optional modifiers)">
-                                        <div class="content">
-                                        (content)
-                                        </div>
-                                        <div class="image">
-                                        <img src="(image URL)" alt="Alternate text" />
-                                        </div>
-                                        </section>
- -
- - -
-

spotlight style1

-

A 30/70 (or 70/30, depending on orientation) vertical split between content and an image. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
orient-leftShows content on the left, image on the right.
orient-rightShows content on the right, image on the left.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
- - -
-

spotlight style2

-

An image within a circular frame placed to the side of content. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
orient-leftPlaces the content on the left, image on the right.
orient-rightPlaces the content on the right, image on the left.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-upFades image up on page load.
onload-image-fade-downFades image down on page load.
onload-image-fade-leftFades image left on page load.
onload-image-fade-rightFades image right on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-upFades image up on page scroll.
onscroll-image-fade-downFades image down on page scroll.
onscroll-image-fade-leftFades image left on page scroll.
onscroll-image-fade-rightFades image right on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
- - -
-

spotlight style3

-

An image within a phone-shaped frame placed to the side of content. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
orient-leftPlaces the content on the left, image on the right.
orient-rightPlaces the content on the right, image on the left.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-upFades image up on page load.
onload-image-fade-downFades image down on page load.
onload-image-fade-leftFades image left on page load.
onload-image-fade-rightFades image right on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-upFades image up on page scroll.
onscroll-image-fade-downFades image down on page scroll.
onscroll-image-fade-leftFades image left on page scroll.
onscroll-image-fade-rightFades image right on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
- - -
-

spotlight style4

-

Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
fullscreenFills the height of the screen.
halfscreenFills half the height of the screen.
orient-leftAttaches the content box to the left edge of the screen.
orient-centerPlaces the content box in the center of the screen.
orient-rightAttaches the content box to the right edge of the screen.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
- - -
-

spotlight style5

-

Boxed-in content set against an image background. Supports these modifiers:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
fullscreenFills the height of the screen.
halfscreenFills half the height of the screen.
orient-leftPlaces the content box on the left of the screen.
orient-centerPlaces the content box in the center of the screen.
orient-rightPlaces the content box on the right side of the screen.
content-align-leftLeft-aligns content.
content-align-centerCenter-aligns content.
content-align-rightRight-aligns content.
image-position-leftLeft-positions image.
image-position-centerCenter-positions image.
image-position-rightRight-positions image.
onload-content-fade-upFades content up on page load.
onload-content-fade-downFades content down on page load.
onload-content-fade-leftFades content left on page load.
onload-content-fade-rightFades content right on page load.
onload-content-fade-inFades in content on page load.
onload-image-fade-inFades in image on page load.
onscroll-content-fade-upFades content up on page scroll.
onscroll-content-fade-downFades content down on page scroll.
onscroll-content-fade-leftFades content left on page scroll.
onscroll-content-fade-rightFades content right on page scroll.
onscroll-content-fade-inFades in content on page scroll.
onscroll-image-fade-inFades in image on page scroll.
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
-
- -
-
- - - - - -
-
-

Items

-
-
- -

HTML

- 
<div class="items style(N) (size modifier) (optional modifiers)">
-                                        <section>
-                                        (content)
-                                        </section>
-                                        <section>
-                                        (content)
-                                        </section>
-                                        <section>
-                                        (content)
-                                        </section>
-                                        <section>
-                                        (content)
-                                        </section>
-                                        ...
-                                        </div>
- -
- - -
-

items style1

-

A grid of items separated by borders.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
smallUses small items.
mediumUses medium items.
bigUses big items.
onload-fade-inFades in items on page load.
onscroll-fade-inFades in items on page scroll.
-
-
- -
- - -
-

items style2

-

An outlined grid of items separated by borders.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
smallUses small items.
mediumUses medium items.
bigUses big items.
onload-fade-inFades in items on page load.
onscroll-fade-inFades in items on page scroll.
-
-
- -
- - -
-

items style3

-

A borderless grid of items.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
smallUses small items.
mediumUses medium items.
bigUses big items.
onload-fade-inFades in items on page load.
onscroll-fade-inFades in items on page scroll.
-
-
- -
-
- - -
-
-

Wrapper

-
-
- -

HTML

- 
<div class="wrapper (optional modifiers)">
-                                        (content)
-                                        </div>
- -

Modifiers

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
invertInverts the color scheme.
color1Uses background color #1.
color2Uses background color #2.
color3Uses background color #3.
color4Uses background color #4.
color5Uses background color #5.
color6Uses background color #6.
color7Uses background color #7.
-
- -
-
- -
- -
-
\ No newline at end of file