Documentation

Documentation versions (currently viewingVaadin 23)

You are viewing documentation for Vaadin 23. View latest documentation

Style

Admonitions

Admonition blocks such as [NOTE], [TIP], or [WARNING] can be used to emphasize important issues. However, don’t overuse them, as this can interfere with the flow of the text .
There should be no more than three admonitions on a page.

Use a descriptive title for admonitions.
For example:

Warning
Don’t overuse admonitions
Overusing admonition blocks interrupts the flow.
Warning
Don’t overuse admonitions
Overusing admonition blocks interrupts the flow.

Author

In some articles, it may be necessary to show the author.
Authors can identify themselves after the section title as follows:

 [.author]
 [name]#Marko Gr&ouml;nroos# <magi@vaadin.com>

For section, this should be in the overview.

For non-ASCII characters, you should use HTML character entity markup.

Control-Key Combinations

If your audience includes macOS users, provide the appropriate key-naming terminology. Spell out Command, rather than abbreviating it. For example:

Press Ctrl+S (Command+S on Macintosh) to save.

Capitalization

You should use title or headline case for all titles, including chapter, section, and sub-section titles.

= Style Guidelines for Vaadin Documentation

For a detailed description of capitalization rules, see for example:

Emphasis

Use the emphasis styles, such as [classname]#ClassName# emphasis for class names and [methodname]#methodName()# for methods.

Table 1. Custom emphasis styles
Style Element AsciiDoc Example Code Result

Class Names

[classname]`Component`

Component

Interface Names

[interfacename]`EventListener`

EventListener

Method Names

[methodname]`setValue()`

setValue()

GUI Buttons

[guibutton]#OK#

OK

GUI Labels

[guilabel]#OK#

OK

File Names

[filename]`readme.txt`

readme.txt

Other Monospace

`appName`

appName

Key Caps

kbd:[Ctrl+Shift+C]

Ctrl+Shift+C

Menu Choices

"Help > Updates" or menu:Help[Updates]

Help  Updates

Currency

Place currency symbols before the numeric amount. For example:

$25.50

€3

¥45.00

In general, in the absence of other information, we assume that the dollar ($) symbol implies U.S. dollars. It isn’t necessary to specify this.

However, where it’s required to distinguish between dollar currencies of different states, it should be written as in the following examples:

US$4.50

AUS$19.10

CA$200

HK$99.99

No strict rule exists for forming country codes in this context. Make sure that it’s clear which country is being referred to.

Dates

In our documentation, we use the format <month> <day number>, <year>. We don’t use the ordinal abbreviation suffixes -st, -nd, -rd or -th. Nor do we write the word the between the month name and the day number. For example:

June 15, 2020

May 1, 2022

Avoid expressing dates using variations of the mm/dd/yyyy or dd/mm/yyyy formats. Different conventions for these formats are used around the world, so that the possibility of confusion and misunderstanding is high. Instead, write out dates using month names, as described earlier.

Days

Write out the days of the week in full, if space allows this. Otherwise, abbreviate the names to three characters, as follows:

Day 3-letter abbreviation 2-letter abbreviation

Sunday

Sun

Su

Monday

Mon

Mo

Tuesday

Tue

Tu

Wednesday

Wed

We

Thursday

Thu

Th

Friday

Fri

Fr

Saturday

Sat

Sa

Euro

The euro symbol (€) is represented as &euro; in AsciiDoc. In amounts of money, place the euro symbol immediately before the numeric quantity, in the same way as for, for example, the dollar or pound symbol.

Listings

You should use the word follows or following to introduce a list or code listing.
Examples are introduced with for example.
You should end the sentence with a colon (not a period).

For example:

For example:

You can use the following items:

It should now look as follows:

Method Names

Use empty parentheses at the end of method names to denote that they are methods. In general, don’t list parameter types for methods, unless this is required to mention a specific version of a method. It may also be necessary to specify a parameter when it’s relevant in the context. For example:

Call setEnabled(false) to disable it.

Multiplication Sign

If you need to show the multiplication sign, use × (&times;), not the letter x. One case for using the multiplication sign is to refer to dimensions. There should be a non-breaking space on either side of the multiplication sign. For example:

The image size should be at least 150 × 150 pixels.
[That is, 150&nbsp;&times;&nbsp;150 pixels.]

In code, you need to use the symbol that’s required by the language you are using, which is generally the asterisk character (*).

Number Sign

Don’t use the # character to display a number. For example:

See FAQs #3.
[Instead, write See FAQs number 3.]

Procedures

In technical documentation, we very often want to describe the procedures that are necessary to perform some task. Such procedures usually consist of a series of steps.

Usually, we start with a top-level sentence. For example:

Create a new project as follows:

To create a new project, follow these steps:

Don’t start with an incomplete sentence at the top-level which is then completed by the text of each step. This structure obliges the reader to keep the top-level text in mind to interpret the subsequent text correctly. For example:

To create a new project, you must:
[Avoid beginning with an incomplete sentence which is completed by the text of subsequent steps.]

Log in…

Make sure you have installed the plugin…

Create a new app…

Use parallel structures in the steps that make up the procedure. In other words, structure each step in a similar way to the others.

Screenshots

Every page should have at least one screenshot. There should at least be a screenshot in an introduction or overview section.

Section

The basic structure of a new section file is as follows:

---
title: Title of the section
order: 4
layout: page
---

[[thechapter.thefeature]]
= Fine Feature

[.author]
[name]#Marko Gr&ouml;nroos# <magi@vaadin.com>

The Fine Feature is a feature of a feature...

[[thechapter.thefeature.basic-use]]
== Basic Use

8E813D10-01D3-441A-94F2-15D3CD6864C4