All The Latest Blog
Documentation Help
Awesome How We Work
We Are Designers Who We Are
Some Facts Our Numbers
To Top

Credits

Page Layout

Skrollex Documentation

Page Representation

<!DOCTYPE html>
<html>
<head>
	...
</head>
<body>
	<!-- Navigation -->
	...
	<!-- Page backgrounds (optional) -->
	<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
	<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
	<!-- Section -->
	<section id="sec1">
		<!-- View (subsection) -->
		<div class="view section-header">
			<!-- Multiple backgrounds (slideshow) -->
			<img alt class="bg" src="images/placeholders/1920x1200img3.jpg"/>
			<img alt class="bg" src="images/placeholders/1920x1200img4.jpg"/>
			<!-- Content -->
			<div class="content colors-a">
				<h2>Section Header</h2>
				...
			</div>
		</div>
		<!-- View (subsection) -->
		<div class="view section-footer">
			<!-- Single background (no slideshow) -->
			<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
			<!-- Content -->
			<div class="content colors-c">
				<h2>Section Footer</h2>
				...
			</div>
		</div>
	</section>
	<!-- Next section -->
	<section id="sec2">
		...
	</section>
	...
</body>
</html>

Page Structure

The template has the following structure:

  • body
    • background image (optional)
    • background image (optional)
    • section
      • view
        • background image (optional)
        • background image (optional)
        • ...
        • content
      • view
        • ...
      • ...
    • section
      • ...
    • ...

If a view or page body has more than one background image, images are shown as an animated slide show.

Page body may have background video:

  • body
    • background video (optional)
    • section
    • section
    • ...

Layout Examples

Source 1

<section id="sec1">
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
		<div class="content colors-f">
			<h3>Section 1 View</h3>
		</div>
	</div>
	<div class="view">
		<div class="content colors-g background-100">
			<h3>Section 1 View</h3>
		</div>
	</div>
</section>
<section id="sec2">
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
		<div class="content colors-d">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img3.jpg"/>
		<div class="content colors-f">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img4.jpg"/>
		<div class="content colors-c">
			<h3>Section 2 View</h3>
		</div>
	</div>
</section>

Result 1

Show

Source 2

<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
<section id="sec1">
	<div class="view">
		<div class="content full-size colors-c">
			<h3>Section 1 View</h3>
		</div>
	</div>
	<div class="view">
		<div class="content colors-b">
			<h3>Section 1 View</h3>
		</div>
	</div>
</section>
<section id="sec2">
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img3.jpg"/>
		<div class="content colors-f">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<div class="content colors-d">
			<h3>Section 2 View</h3>
		</div>
	</div>
</section>

Result 2

Show

Source 3

<div class="vimeo-bg" data-video="75124475" data-volume="0" data-alternative="images/placeholders/1920x1200img3.jpg"></div>
<section id="sec1">
	<div class="view">
		<div class="content colors-b">
			<h3>Section 1</h3>
		</div>
	</div>
</section>
<section id="sec2">
	<div class="view">
		<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
		<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
		<div class="content colors-c">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<div class="content colors-f">
			<h3>Section 2 View</h3>
		</div>
	</div>
	<div class="view">
		<div class="content colors-d">
			<h3>Section 2 View</h3>
		</div>
	</div>
</section>

Result 3

Show
Table of contents Next: Color Schemes