From 97dbc8c3772c89022a55d591c4ed90cee1d1feaa Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Wed, 21 Mar 2018 08:24:51 -0500 Subject: redesign --- README.txt | 383 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 383 insertions(+) create mode 100644 README.txt (limited to 'README.txt') diff --git a/README.txt b/README.txt new file mode 100644 index 0000000..5615888 --- /dev/null +++ b/README.txt @@ -0,0 +1,383 @@ +Ethereal by HTML5 UP +html5up.net | @ajlkn +Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) + + +This is Ethereal, my latest, greatest, and quite possibly most unique template for HTML5 UP. +Since releasing Parallelism 3-4 years ago (!!!), I've been dying to do another side-scrolling +template with more in the way of flexibility/customization potential. The result is this template, +Ethereal, which combines a robust side-scrolling framework of my own creation (with various +"scroll-assist" features like drag/momentum scrolling, keyboard shortcuts, etc.) with a unique +look and feel, a lightbox gallery, tons of customization options, and, of course, full +responsiveness. Hope you dig it :) + +Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images +you can use for pretty much whatever. + +(* = not included) + +AJ +aj@lkn.io | @ajlkn + + +Instructions: + + Overview + ======== + + Browsers deal with side-scrolling pages differently to vertically-oriented ones in + that they require elements (or at the very least, the top-most wrapper element) to + have a defined (fixed) width. This leads to a number of limitations (eg. the page + won't automatically grow/shrink in the same way a vertically-oriented one will), so + Ethereal does two things to work around this: + + - The entire page is made up of "panel" elements, each of which can be assigned an + optional "size" modifier (satisfying the fixed width requirement). + + - For panels that don't use a size modifier, individual containing elements *inside* + them (eg. a column) can be assigned a "span" modifier to give those a fixed width + instead (also satisfying the fixed width requirement). + + Another fun quirk of side-scrolling pages is how to actually implement horizontal + scrolling *without* resorting to using the (usually ugly) horizontal scrollbar. + Ethereal does this in FOUR (!) ways: + + - Dragging: Users can simply click and drag the page left or right to scroll it around. + This works exactly as you'd expect, and even has a nice "post-scroll momentum" effect. + + - Scroll Wheel: Ethereal modifies* the scroll wheel's behavior to translate vertical + scrolling into horizontal scrolling, allowing the user to use either the scroll wheel + or trackpad to scroll the page (the latter of which retains the ability to horziontally + scroll as normal, so nothing changes there). + + * Special thanks to @miorel + @pieterv of Facebook for "normalizeWheel()" :) + + - Scroll Zones: Users can hover the mouse cursor on the left or right edges of the page + to automatically scroll in either direction. + + - Keyboard Shortcuts: Finally, users can simply use the left/right arrows, page up/down, + home/end, and the spacebar to scroll the page. + + Note that any (or all) of these scroll-assist features can be turned off (and in some + cases customized). See the top of assets/js/main.js for more information. + + + Span Modifiers + ============== + + Span modifiers are simply classes that give elements a fixed width, the size of which + is determined by the "unit value" associated with the modifier (eg. "span-3" means + "span 3 units"). These sizes are in "rem" units when used inside panels that don't + use a size modifier, and in percentage units when used inside panels that do. + + Ethereal includes span modifiers ranging from 0.25 units ("span-0-25") to 10 units + ("span-10"). Here's a partial list: + + span-0-25 Span 0.25 units. + span-0-5 Span 0.5 units. + span-0-75 Span 0.75 units. + span-1 Span 1 unit. + span-1-25 Span 1.25 units. + span-1-5 Span 1.5 units. + span-1-75 Span 1.75 units. + ... + span-9 Span 9 units. + span-9-25 Span 9.25 units. + span-9-5 Span 9.5 units. + span-9-75 Span 9.75 units. + span-10 Span 10 units. + + + Major Elements + ============== + + Most of Ethereal's elements are pretty much what you'd expect, but there are a handful + of "major" ones that warrant a bit more explanation: + + + Panel + ------ + + The primary building block of Ethereal. + + HTML + +
+
+ (intro content) +
+
+ (inner content) +
+
+ + Note: The entire "intro" child element can be excluded. + Note: You can have as many "intro" and "inner" child elements as you like. + + Modifiers + + Size + + small Use small size. + medium Use medium size. + large Use large size. + + Color + + color0 Use background color 0 (gradient). + color1 Use background color 1. + color2 Use background color 2. + color3 Use background color 3. + color4 Use background color 4. + color1-alt Use background color 1 (alt). + color2-alt Use background color 2 (alt). + color3-alt Use background color 3 (alt). + color4-alt Use background color 4 (alt). + + Inner + + columns Divides child elements into columns. + aligned When used with "columns", aligns content to top of panel. + divided When used with "columns", separates each column with a vertical line. + + Examples + + Here's a very basic example: + +
+
+

Panel

+

Just a generic panel.

+
+
+

Lorem ipsum dolor sit amet.

+
+
+ + And here's a more advanced example using columns and *no* size modifier: + +
+
+

Panel

+

Just a generic panel.

+
+
+
+

This column is 4 units wide.

+
+
+

This column is 3 units wide.

+
+
+

This column is 2 units wide.

+
+
+
+ + Note: The "intro" child element already has a fixed width, so a span modifier + isn't required. + + + Panel (Banner) + -------------- + + The "Banner" variant of a regular panel. + + HTML + + + + Modifiers + + Orientation + + left Content on the left, image on the right. + right Content on the right, image on the left. + + Image + + filtered Applies a gradient filter to the image. + tinted Applies a tint filter to the image. + + Image Position (required) + + top left Position image in the top-left corner. + top Position image along the top edge. + top right Position image in the top-right corner. + right Position image along the right edge. + bottom right Position image in the bottom-right corner. + bottom Position image along the bottom edge. + bottom left Position image in the bottom-left corner. + left Position image along the left edge. + center Position image in the center. + + Example + + + + + Panel (Spotlight) + ----------------- + + The "Spotlight" variant of a regular panel. + + HTML + +
+
+ (content) +
+
+ +
+
+ + Modifiers + + Orientation + + left Content on the left. + right Content on the right. + + Image + + filtered Applies a gradient filter to the image. + tinted Applies a tint filter to the image. + + Image Position (required) + + top left Position image in the top-left corner. + top Position image along the top edge. + top right Position image in the top-right corner. + right Position image along the right edge. + bottom right Position image in the bottom-right corner. + bottom Position image along the bottom edge. + bottom left Position image in the bottom-left corner. + left Position image along the left edge. + center Position image in the center. + + Example + +
+
+

Spotlight

+

Lorem ipsum dolor sit amet.

+
+
+ +
+
+ + + Gallery + ------- + + A lightbox-enabled gallery. + + HTML + +
+ + + + + + + + + +
+ + + + + + + + + + + + + ... +
+ ... +
+ + Note: The "group" element creates a dual-row group of images. Images inside this group will + automatically wrap to the next row when they exceed its width (as defined by its span modifier). + You can have as many groups in a gallery as you like. + + Modifiers + + Image + + filtered Applies a gradient filter to the image. + tinted Applies a tint filter to the image. + + Image Position (required) + + top left Position image in the top-left corner. + top Position image along the top edge. + top right Position image in the top-right corner. + right Position image along the right edge. + bottom right Position image in the bottom-right corner. + bottom Position image along the bottom edge. + bottom left Position image in the bottom-left corner. + left Position image along the left edge. + center Position image in the center. + + Example + +
+ + + + + + +
+ + + + + + + + + + + + +
+
+ + +Credits: + + Demo Images: + Unsplash (unsplash.com) + + Icons: + Font Awesome (fortawesome.github.com/Font-Awesome) + + Other: + jQuery (jquery.com) + Misc. Sass functions (@HugoGiraudel) + normalizeWheel (@miorel + @pieterv of Facebook) + Skel (skel.io) \ No newline at end of file -- cgit v1.2.3