Building a long-form web page

Building your long-form multimedia page is reasonably straight forward. We’ve provided you with a pre-built HTML, CSS and JavaScript framework for you to copy and work with.

Locating the framework and downloading

The framework is hosted on Github at

Simply use the Download ZIP button to download the whole thing as a Zip file.

Extract the Zip file so that you have a folder named basic-longform-framework-master and move it to a suitable location for editing.

This folder will be your working folder and all the files contained in the folder make up your web page.

The files in your long-form framework

Index.html is the web page itself. This is where your HTML markup and content goes.

README.md is the read me page, or instructions. You can open this file in a text editor, but you can also see it below the file list at https://github.com/haddersbadders/Simple-longform-framework.

css folder contains.. wait for it.. the CSS files. There are two:

  • style.css – contains most of the styles, edit this one
  • mobile.css – contains a few styles that deal with responsive widths, leave this one

images folder is where your images live.

When you’re using images on your page, make sure they are resized. Good sizes are 1050px wide for full width and 800px wide for inline images. Both at 72dpi.

js folder contains any Javascript files used.

The file index.js is the one that you can edit. It already contains the initialisation scripts for wow.js animations and the slick slider carousel. If you want to use more JavaScript, you can add it in there.

Editing the template

Use Atom to edit the files in the template.

It’s a good idea to add the template folder as a project in Atom:

This way you can access and open your files from inside Atom.

Page structure

The structure is really quite simple: Content is broken down into sections using the HTML tag <section>.

There are two types of <section> that are differentiated using three different class names:

  • A content section using the class name content
  • Full width and height section with background image that uses the class name image_bg
  • Full width and height section with background colour that uses the class name color_bg
Page structure

Examples

When you want a full width/height image header section, use:

<section class="image_bg"> //Content here </section>

When you want some content, add:

<section class="content"> //Some content </section>

The content sections

The content section is used to put text and inline images in. Content in this section has a width of 60% and is centred. This is controlled by the .content selector in CSS.

You can add additional classes to your content sections for further styling. For example changing the background colour:

<section class="content mountains"> with the CSS of .mountains {background: #CCD9E1; }

In the above example, the section has two classes: content and mountains. The section takes instructions from both classes in the CSS.

The header sections

The header sections are there to give nice big headers for content with full width image backgrounds. The .image_bgclass in CSS has only two properties:

  1. height: 100vh which sets the height of the section to whatever the height of the viewport is
  2. position: relative enables absolute positioning of elements inside the section

Because each header section is different – they will have a different background image – an additional class is given to each header section allowing a background image to be specified:

<section class="rocks image_bg"> with CSS of .rocks { background: url(path/to/image.jpg); }

Sections, DIVs or headers?

I’ve used <section> elements, but because the styles are controlled by classes it doesn’t really matter what elements are used. It could be <header class="rocks image_bg"> or <div class="rocks image_bg">.

Effects

Also included are Animate.css and Wow.js.

Animate.css provides animation for elements and Wow.js allows control over these animations so they occur when scrolled to.

Post Views: 836