The magazine consists of a possible cover, a possible contents page, and several multipage articles. On a tablet or mobile touch device one can move between articles by swiping live (it follows your finger) between different pages, or you can get to a specific page by accessing the table of contents through a pull down screen.

An article consists of several things. It has a descriptor for it's title and possible subtitle which will be used while building the table of contents. It can have a background image which covers the entire screen. It can also have text which can be scrolled over the entire screen or limited to a small box which is locked in place. An article can continue onto other pages by not including a descriptor on the other pages.

Background images, called backdrops, can be locked so one portion is always on the screen. They are centred vertically and horizontally by default. They can be locked so the top is always visible, or the bottom. The right and left sides can also be locked, and when an image is 'split' into two, you can mimic a two page spread as in a printed magazine. Backdrops can be any dimension, but portrait images on a landscape device will be full width, and landscape images on a portrait device will be full height. It is sometimes better to prepare a square image designed for these limitations.

Text can be limited to a small window which scrolls, allowing you to have a backdrop which does not get obscured by text, or allowed to scroll over the entire screen. If it is allowed to scroll over the entire screen it will never be the full width of the screen. Each element will be a narrower box which can be set to left, center and right. On narrow screen mobile devices these designations will not be apparent, but on tablets and desktops they will be more pronounced. One can set the empty 'white' area between these text cells using a filler class of 10% and 25% of the screens height. This 'empty' space and the simplified text layout can be used to build a link between the text and background image.

This engine does not use a separate page for articles (yet) so each article is contained within the html file for the magazine. This will change in the future as time permits. This is the basic layout of a typical article page:

<article id = "article3" class="article-wrapper  hidder beginning" > 
	<div class="descriptor"><t>Title</t><p>Subtitle</p></div>
	<div class="backdrop fullPage"><img src="photos/003.jpg" class="centerImage middleImage"></div>
	<div class ="contentLayer "> 
		<div class = "content-wrapper">
			<div class="article-scroller"> 
				<div class="scroller-content ">
					<div class="articleT">
						<p>Subtitle</p>
					</div>
					<div class="filler"></div>
					<div class="fillerSmall"></div>
					<p class="L-F t-w">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					<div class="filler"></div>

					<p class="R-F t-w">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					<div class="filler"></div>
				</div>
			</div> <!-- end of scroller-content -->
		</div> <!-- end of article-scroller -->
	</div> <!-- end of contentLayer -->
</article>

`

"R-F", "C-F" and "L-F" stand for Right Float, Center Float and Left Float and are used to place elements on the screen in simplified locations.

"t-w" and "t-b" stand for transparent white and transparent black. The background for the text areas can be black or white and their opacity changed in the css.

"filler" and "fillerSmall" are for adding an empty space or "buffer" between elements. They are 25% and %10 of the screen height. Their values are calculated in resized.js

"beginning" indicates this is the first page of an article, and it will show up in the table of contents. "descriptor" is used to indicate what this article will be called on the table of contents button generated. will be the title for the button, and

will be a subheading if desired.