News Style

By Kyebego

Last updated : 

This is a simplified form of my News Vertical style for people who donʼt use Firefoxdonʼt want or need vertical layout support. Like News Vertical, it does not use italic or oblique type, but expects a wide variety of font weights : 200, 300, 400, 600, 700, 900. I recommend Source Serif Pro.

Your page should have the following layout :

<header>
	<h1>Title</h1>
</header>
<div role="note">
	<!-- Page info (optional) -->
</div>
<main>
	<!-- Page content -->
</main>
<footer>
	<!-- Page footer (optional) -->
</footer>

Or, if you prefer, you can stick everything inside <main> for a more minimal look.

News defines a number of helpful classes :

TEXT
Defines an inline block, for use in running text. Apply this class to images and SVGs which you want to appear text­‑sized.
INLINE
Defines an inline element. With list elements, this creates an inline list, like the following : 
  1. First item
  2. Second item
PAD-START
PAD-END
Sets the left or right margin to auto ; use both to centre content.
ALIGN-START
ALIGN-END
Aligns text left or right. Use both to justify text.
TITLE
Use this on <u> to produce a wavy underline.
VERSE
Use this on <p> or <div> to denote a stanza of verse. Line­‑breaks will be preserved.

PARA

Use this on <div> to create a typographical paragraph ( functions like <p> ). You should probably only use this when dealing with inline lists, for example :

This is a paragraph with a list : 

  • A list item
  • Another list item

 …And the paragraph continues.

FOOTNOTE
NOTE
Wrap text which has a footnote with a <span> of class="FOOTNOTE", and then include the note inside the span ( preferably, at the end ) with class="NOTE", like this.A footnote. Setting a tabindex of 0 on the footnote is recommended.
BIBLIOGRAPHY
Formats a <ol> or <ul> list as a bibliography. Put annotations inside of <p> tags, like follows :

The above aside, just write semantic HTML and everything should turn out OK.