Tutorial

We'll run through a few examples, this will give you a feel of how to work with Breeze. The basic functionality is quite simple (developers can always extend it) and so getting to know the styles and learning how to use them is left to you to practise.

We will go through the process of creating this page as an example. You can always follow the link to the relevant breeze pages to have a look. Just remember that they are read only here, so to get your hands wet, do the installation.

Sreenshots

We use screen shots to demonstrate. Since these look quite similar to the descriptions, they are marked with the UI sticker above

Live Demo

To try out the ui, you can browse Breeze in readonly mode
Or just install it

Creating a page

To create a page, go to the index page, where you will see the list of pages (see left)
Then enter the name of the new page in the botoon field and press "New Page".

The page is created empty and will need sections to hold actual content.

New Section

You will land on the show page (showing the page) and on the top will be a "New Section" button as one of several ways to create a new section.

Select Style

The new section needs a style, and so you will be shown the style selection page. The sttyle of the first section is called " Centered Header with text ", the second section " Centered Header with text ". To select, just click on the style you want to use.

Since creating layouts is a lot about using a good style for your specific content, it is good to get to know your styles.

Editing Sections

All sections have the following editing controls. We'll go into cards below, which are actually very similar.
See this page live here

Style

Sections have styles and here you can see a preview and change it.
Creating a "New section" here btw, creates one with the same style.

You can also move the section to a different page.

Image

Sections may have one image, though not all use it. Here you can select which and change that. Also you can jump straight into breezes little editor.

Texts

Sections have a header and text. Most sections will implement the text as markdown, so you can create subheaders (or lists or links...) that way

Options

Sections have options. These differ depending on style, but the one shown are quite common ones. Ie margins, colors or optional button

Sections with Cards

Some sections may have cards, for example "Section with Cards, 2-6 columns" but also Feature sections and forms (where cards are the fields)

The first part lets you change the card style. This is very similar to the sections styles concept.

The second "View and Edit Cards" lets you do just that.
There cards can be created/edited/deleted and moved, very similar to sections on pages.

Navigation

By now you know that breeze manages pages with sections and cards.
Breeze usually has several ways to achieve something, ie redundant navigation. While this may be a little confusing at first, ie will allow you to find the style that is best suited for you.

The first part of editing pages will give you a preview, ie for the most part the content as it will be rendered.
Much of the text can be edited in place, by clicking on the element.

Navigation elements in the header help to move up and sideways in the hierarchy.

Links

Links are always safe to follow

Green

Also green buttons have no side effect

Blue

Blue means change

Red

Red buttons destroy things.

Translations

Breeze comes ready with internationalisation built in, if a developer enables extra languages.

Translations are grouped per breeze page. Each translation page shows all texts for a certain breeze page, for all languages. The idea being that translators are seperate from editors.

A translation is marked as outdated when the original language text has been edited, after the translation has been edited.

Translations missing

Missing or outdated translations are shown on the pages index page. In the screenshot on the left, index page has 28 outdated translations, in this case for 2 languages (fi,sv)

To edit the translations for a page one clicks on the number

Translations page

To edit translations, one just clicks on the text and the text-area appears with an update button.
The orange on the left indicates that the translation is outdated, ie the original language text has been edited after the translation.
The next and prev links allow navigation between the translations pages. The pages index provides the overview.