News Style

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 :

• Kyebego. News Style. https://style.u2764.com/news/.

  A very cool style.

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