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](/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](/breezy/pages)
Or just [install it](/installation)
Creating a page
To create a page, go to the [index](/breezy/pages) 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](/breeze/sections/12/select_template). 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](/breezy/styles/index).
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](/breeze/sections/19)
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.
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](/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](/breezy/pages)
Or just [install it](/installation)
Creating a page
To create a page, go to the [index](/breezy/pages) 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](/breeze/sections/12/select_template). 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](/breezy/styles/index).
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](/breeze/sections/19)
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.
