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.
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.
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.
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.
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.
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.
Breeze expects a preview jpg to be in app/assets/images/breeze/section_preview/
and have the same name as the template
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.