example.bs

<pre class='metadata'>
Title: Example bikeshed specification
Shortname: example
Status: ED
Group: webfontswg
TR: https://www.w3.org/TR/example/
ED: @@add github link
Editor: Name1, Company1, http://example.com/contact
Editor: Name2, Company2, name2@example.com
Abstract: Example example
</pre>

Introduction {#intro}
=====================

	<em>This section is not normative.</em>

    This specification is a bikeshed example. It is adapted from the CSS WG example bikeshed module.

Sample section {#sample-topic}
==============================

	Look at the mark-up in this section for examples.
	See the <a href="https://github.com/tabatkins/bikeshed/blob/master/README.md">documentation</a> for more precise instructions.

	To refer to HTML, use [[HTML]] (note the double square brackets in the source).
	To make a normative reference,
	insert a “!”, like this:
	[[!CSS-SYNTAX-3]]
	The currently available <a href="https://www.w3.org/Style/Group/css3-src/biblio.ref">list of bibliographic data</a> can of course be extended.

	We write about a property such as 'foo' like this
	and about a piece of CSS code like this: ''foo: bar''.
	(Note that if it looks like a "property: value",
	it'll automatically link to the property.)
	Inline HTML and XML are similar,
	but use the CODE element: <code class=lang-html>&lt;blockquote&gt;...&lt;/blockquote&gt;</code>
	and <code class=lang-xml>&lt;r:xyz&gt;...&lt;/r:xyz&gt;</code>.

	Note: Note that the property will automatically be linked to its definition.

	To define <dfn export>terms</dfn> into the <dfn export id="dfn-index">index</dfn>,
	there are many <dfn export lt="variant">variants</dfn>,
	but hopefully the <dfn export title="simple|simpler|simplest">simplest</dfn>
	will be the most common.
	Note that you need to explicitly export any plain <{dfn}>s you want to be linkable from other specs,
	but all other types of definition automatically export themselves.

	Note: Note that you can add non-normative notes like this.

	Of course, multi-paragraph notes are also possible: just enclose them in a <{div}>:

	<div class=note>
		Note that this note is a multi-paragraph note.

		It doesn't <em>need</em> to have two paragraphs, but it could.
	</div>

	<details class=note>
		<summary>A longer note</summary>

		When you want to insert a longer note
		to provide some useful explanation,
		but the note itself is not critical to the section it's placed in,
		use a <{details}> note instead.

		This will hide the note by default,
		so it's less distracting to the flow of the section.
		(At least, in browsers that support <{details}>;
		legacy browsers will get something like a normal note.)
	</details>

	Displayed examples come in eight different types:
	CSS examples that need no separate paragraph of explanation are put in a simple PRE:

	<pre class="example lang-js">
		console.log("Hello world");
	</pre>

	JS examples that need extra text need a DIV.

	<div class=example>
		The following example is the same as the previous one,
		but now it is explained:

		<pre class="lang-js">console.log("Hello world");</pre>
	</div>

	Illegal JS examples (examples of errors) are the same,
	but with class "illegal example".
	Examples of HTML and XML code have class "html" and "xml" respectively,
	but are otherwise ditto.


	<dfn>Cross-references</dfn> are created by enclosing a term or phrase in &lt;dfn>
	(like the word <a>cross-references</a> earlier in this sentence).
	Then an &lt;a> without an <code>href=""</code> attribute
	with the same text content will automatically be linked.
	Both &lt;dfn>s and &lt;a>s are typed,
	which allows the same text to appear as different types of terms without a collision.
	The type can often be inferred,
	but sometimes it needs to be specified,
	like when you're linking to a {{Foo}} WebIDL interface.
	(Here, we're using the <em>IDL</em> linking shorthand
	to make it clear that this is one of the IDL types.)

	And a figure with a caption is done like this:

	<figure>
		<img src="https://www.w3.org/TR/PFE-evaluation/images/differentInitialNoon.jpg" alt="random font-related image">

		<figcaption>
			Look at the pretty red bits!
			Use SVG if you can.
			Otherwise, W3C prefers PNG over GIF (obviously, since PNG is a W3C Rec).
		</figcaption>
	</figure>

	Don't forget to write the alt.

	Issue: An open issue or editorial remark is OK in a WD,
	but they should be resolved/removed before the document goes to &ldquo;CR&rdquo;
	(Candidate Recommendation).
	Use <code class=lang-html>class="issue"</code> on an element,
	or begin a paragraph with &ldquo;Issue:&rdquo;.

	Issue:
	Inline issues will be copied into an <a href="#issues-index">Issues Index</a> at the end of the document,
    for easy reference.

    Issue: prefer GitHub issues to inline bikeshed issues, so that discussion and resolutin can happen.

	<pre class='idl'>
		/* Write WebIDL in a &lt;pre class="idl"> as plain text. */
		interface Foo {
			readonly attribute CSSOMString bar;
			boolean baz(FooDict Arg1, (CSSOMString or Foo) Arg2);
		};

		dictionary FooDict {
			sequence&lt;Foo> foos;
			boolean bar;
			CSSOMString baz = "qux";
		};
	</pre>


<h2 class=no-num id=priv-sec>Privacy and Security Considerations</h2>

Issue: Make some considerations about privacy and security.