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](/breezy/styles/index).
The rest of this page will be for developers and describe how to create a new style.
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](/breezy/styles).
And ask your developer to create more for just that thing you want to express.
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.
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 (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.
Preview
Breeze expects a preview jpg to be in *app/assets/images/breeze/section_preview/*
and have the same name as the template
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.
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](/breezy/styles/index).
The rest of this page will be for developers and describe how to create a new style.
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](/breezy/styles).
And ask your developer to create more for just that thing you want to express.
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.
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 (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.
Preview
Breeze expects a preview jpg to be in *app/assets/images/breeze/section_preview/*
and have the same name as the template
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.
