Longform template

A cookbook to make longform journalism look as good as possible online. Made for those learning responsive webdesign and developers looking for a streamlined toolkit

View repo on github

Alignment

There are nine layout classes to start designing with, and the css is found in alignment.css .

Article

The article tag creates the main column on the screen and is where this text is now. Most of the time it takes up 50% of the screen, with a 25% margin on either side.

<body>
	<article>
	 	...your content here...
	</article>
</body>

Asides

There are three types of asides, two that go inside the article tag and one that does not. For each type, there are two sepearte classes for right and left. The two tags that go inside article are aside class="left" and aside class="left-wide". If the aside class="left" is placed outside of the article, it will float to the edge of the screen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare egestas mi at elementum. Curabitur consectetur magna congue, tempus ante malesuada, laoreet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tristique efficitur sagittis. Nullam at mi mi. Aenean libero quam, molestie sed magna non, maximus consectetur urna. Morbi mauris ipsum, bibendum eu risus sit amet, tristique faucibus risus. Nulla bibendum, purus ut sodales pellentesque, erat justo iaculis odio, sit amet pellentesque turpis felis sed elit.

<article>
	<aside class="left"> ... </aside>

	<aside class="right"> ... </aside>

	<p> ... </p>	
</article>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare egestas mi at elementum. Curabitur consectetur magna congue, tempus ante malesuada, laoreet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tristique efficitur sagittis. Nullam at mi mi. Aenean libero quam, molestie sed magna non, maximus consectetur urna. Morbi mauris ipsum, bibendum eu risus sit amet, tristique faucibus risus. Nulla bibendum, purus ut sodales pellentesque, erat justo iaculis odio, sit amet pellentesque turpis felis sed elit.

<article>
	<aside class="left-wide"> ... </aside>

	<aside class="right-wide"> ... </aside>

	<p> ... </p>	
</article>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare egestas mi at elementum. Curabitur consectetur magna congue, tempus ante malesuada, laoreet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tristique efficitur sagittis. Nullam at mi mi. Aenean libero quam, molestie sed magna non, maximus consectetur urna. Morbi mauris ipsum, bibendum eu risus sit amet, tristique faucibus risus. Nulla bibendum, purus ut sodales pellentesque, erat justo iaculis odio, sit amet pellentesque turpis felis sed elit.

<article>
	...content above aside...
</article>

	<aside class="left"> ... </aside>

	<aside class="right"> ... </aside>

<article>
	...content inline with aside...
</article>

Wide

The wide class is usually used for media or graphics. It has a width of 75% and a margin-left of 12.5%. If you need one wide element, like a single picture, you can apply the class to the img tag itself. If you need more things wide you should place all of them inside a <div class="wide">. Make sure this wide div isn't inside of the article or it will become 75% of the article width instead of the screen's width. 

<article> ... </article>

<div class="wide">
	...wide text here...
	...other wide elements...
</div>


<img src="img/test.jpg" class="wide">
	...single wide element here...
</div>

<article> ... </article>

full

The full class is a fullscreen alignment with 100% width and auto height. If you want the navbar to disappear on scrollover place <div id="nav-invisible"></div> where you want it to disappear and <div id="nav-visible"></div> where you want it to show up again.

Align accompanying text underneath in an article column
<article> ... make sure the article tag is closed off before starting a full tag ... </article>

	<div id="nav-invisible">

	<img src="img/test.jpg" class="full">

	<div id="nav-visible">

<article> ... and then put the rest of the content in a new article... </article>

Make your own

We can also add classes to make our own grid. I like to stick to percentages for the width and have everything float left. You can use xs-hidden, xs-visible, sm-hidden, sm-visible, md-hidden, md-visible, lg-hidden and lg-visible to hide/show an element at certain breakpoints. The tags work for all breakpoints larger than itself - thesm-hidden will keep an element hidden at md and lg breakpoints but will not hide at xs breakpoints. The xs breakpoint is under 768px, sm breakpoints are between 768px-991px, md breakpoints are between 992px-1199px and lg breakpoint is 1200px.

custom class
custom class
custom class
<article> ... </article>
	<div class="grid-wrap>
		<img src="img/test.jpg" class="grid2">
		<figcaption class="xs-visible sm-hidden"> First image's xs caption <figcaption>

		<img src="img/test.jpg" class="grid2">
		<figcaption class="xs-hidden sm-visible"> First image's other caption <figcaption>
		<figcaption> Second image's caption <figcaption>

	</div>
<article> ... </article>

Leads

There are two types of leads, lead and one made using ai2html. You can either place the text above or below the image.

This is a lead

With a subhead

By James Benedict
Published Today
<article> ... </article>

<div class="lead">

	<img src="img/test.jpg">

	<h1> headline </h1>
	<h2> subhead </h2>
	<h5> name </h5>
	<h6> name </h6>

</div>

Typography


This is a dropcap and the rest is a paragraph. This is bold, and italic. All styles are found in type.css, which also includes all typography styles for other components.

h1 for headlines

h2 for summary deck

h3 for sectionhead

h4 is up for graphics

h5 for bylines
h6 for dates
figcaption for captions

Media

Styles are found in media.css.

Images

Supported photos are jpg, png, gif and svg. Include a figcaption underneath for a caption. Make sure to minimize images. To add image zooming, include the zoom.js, zoom.css in the file and data-action="zoom" to your image tag.

Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare egestas mi at elementum. Curabitur consectetur magna, tempus ante malesuada, laoreet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tristique efficitur sagittis. Nullam at.

Caption

Video

Save videos with a MP4 format and H.264 video codec.

Autoplay Video

Include the video.js and then add an autoplay class to the video tag you want to start playing on scrollover.

Compontents

Here are a few predesigned components for common parts of a story. They can be placed in any type of alignment. Styles are found in components.css

Pulled quotes

Pulled quotes will align with the top (on the page) of the element underneath it (in your code). If you want a popup window for the social links, include popup.js and class="popup".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare egestas mi at elementum. Curabitur consectetur magna congue, tempus ante malesuada, laoreet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tristique efficitur sagittis. Nullam at mi mi.

Related content

There are three types of related content components. You can place a related class to an aside for the first type. You can also create a button class="related" that can then be placed in the article. Finally you can place that button in a custom made grid.

More on this subject

a

Table

This table scales well for mobile screens and uses data you write.

Month Weather Average Sunlight
January 1 2 3
February 1 2 3
March 1 2 3

Live tables

This table is styled the same as above but displays data from a google spreadsheet. This uses the tabletop.js plugin and requires handlebars.js, tabletop.js and tabletop-custom.js.

You can feed information from this spreadsheet into lines of text like these. This could be used to update a line in your story that will change after publication. It will be much easier to changer a goolge doc than update the website.

Or a full table like this. You can include html from the spreadsheet to give certain rows or columns custom styles.

Charts

Charts are made with highcharts and requires highcharts.src.js. Your custom chart code should go in chart.js. Consider making a static chart if your information doesn't require interaction

Headline

Further explaination

Source:

Maps

Maps are made with the leaflet library and require leaflet-src.js. Your custom map code should go in map.js. IMO all maps are great so use whichever service you are comfortable with.

Map Headline

More info

Timeline

Timelines consist of a one line and two cards that float to the right or left. On smaller screens, all cards will float right. You can also include the class sidebar to make the timeline float right at all screen sizes.

Category 1

Category 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare egestas mi at elementum. Curabitur consectetur magna congue, tempus ante malesuada, laoreet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tristique efficitur sagittis. Nullam at mi mi. Aenean libero quam, molestie sed magna non, maximus consectetur urna. Morbi mauris ipsum, bibendum eu risus sit amet, tristique faucibus risus. Nulla bibendum, purus ut sodales pellentesque, erat justo iaculis odio, sit amet pellentesque turpis felis sed elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare egestas mi at elementum. Curabitur consectetur magna congue, tempus ante malesuada, laoreet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tristique efficitur sagittis. Nullam at mi mi. Aenean libero quam, molestie sed magna non, maximus consectetur urna. Morbi mauris ipsum, bibendum eu risus sit amet, tristique faucibus risus. Nulla bibendum, purus ut sodales pellentesque, erat justo iaculis odio, sit amet pellentesque turpis felis sed elit.

Mixit up

Mixitup is a jQuery plugin that allows easier object sorting. It requires mixitup-script.js.


Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Ads

There are two different types of ads, both require content.js and content.css. Ads are called content because calling them ads makes it too easy for adblock. These will likely need a lot of tweaking to work with your ad servers.

These images won't load until they are reached on the page. This way you can charge per view instead of per page load.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare egestas mi at elementum. Curabitur consectetur magna congue, tempus ante malesuada, laoreet libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tristique efficitur sagittis. Nullam at mi mi. Aenean libero quam, molestie sed magna non, maximus consectetur urna. Morbi mauris ipsum, bibendum eu risus sit amet, tristique faucibus risus. Nulla bibendum, purus ut sodales pellentesque, erat justo iaculis odio, sit amet pellentesque turpis felis sed elit.