From 44a20c7d9ecd8737baac8606f89ae68b62e05594 Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Wed, 21 Mar 2018 12:11:42 -0500 Subject: working on web --- README.txt | 384 +------------------------------------------------------------ 1 file changed, 1 insertion(+), 383 deletions(-) (limited to 'README.txt') diff --git a/README.txt b/README.txt index 5615888..b920295 100644 --- a/README.txt +++ b/README.txt @@ -1,383 +1 @@ -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 +yo \ No newline at end of file -- cgit v1.2.3