Learning and editing styles

Learning and creating new styles are actually very different tasks, and probably performed by different people, editors and developers.

For editors, it is important to learn existing styles. Learning what options are available, how they look and for which situation each is best. Breeze will list available styles when you have to choose one, or all of them here.

The rest of this page will be for developers and describe how to create a new style.

user

Editors

Remember sections are a full width part of a page.
Cards are part of certain sections.
Both have different styles, and it is important to learn which styles work for which content. Look here.

And ask your developer to create more for just that thing you want to express.

developer

Developers

Learn about the three parts that make up a style. Also Breeze will expect them to follow a naming convention and expect files in certain places.

Style templates can do just about anything, go wild. Maybe more importantly, be approachable for your editors.

Section styles

Card and section styles are very similar. We will describe how to create a section style, but by chaning out the word section for card the same rules apply to card styles.

Styles are made up of three parts, a yaml definition , a template , and a preview

Styles may use options which are defined in an options file.

template_yml

Yaml definition

For sections you need to create an entry into breeze/section_styles.yml
The example show a section_slider that actually shows a slider. This section uses cards as slides.

template_haml

Template

Haml (or erb) code that can pretty much do anything. The template has to be in ./app/views/breeze/view/_section_pictures.haml
The only hindereance may be that the Breeze ViewCotroller will be invoked, so all data will have to be grabbed by helpers or inside the template.

section_pictures

Preview

Breeze expects a preview jpg to be in app/assets/images/breeze/section_preview/
and have the same name as the template

options

Options

To create new options, make an entry into breeze/section_styles.yml with format like on the left. For safty choose id's over 100.

If there are values, they will be displayed as a dropdown.
If there are no values an input field will be used.

Options have no type, they are strings, passed to your code/template to be interpreted.