You Stay Classy Panel Styles!
Mediacurrent
Derek DeRaps & Kendall Totten
#mysterydude @kendalltotten
The Great Divide
between
Themers
and
Content
Editors
Where do we draw the line
between styles on the Drupal Regions
and the styles on the content itself
(in the dreaded WYSIWYG)?
In-Content Layouts
What about layouts within the content area?
Responsive What?
And what do they do now that responsive
design is a major factor in all of this?
http://dribbble.com/shots/1277779-Morphing-devices-GIF?list=show
Classy Panel Styles module!
It allows editors to apply ready-made styles
the themer has whipped up for them —
to Panel Panes & Regions
How it works
Content editors can apply styles to
panel panes or regions to add background
colors, widths, layouts and more.
Classy Panel Styles Module
Beyond that, it provides flexibility with page layouts
when they need it, without requiring 101 options.
say no to divitis.
Why is this awesome?
Make it easy for content editors to:
- Apply styles without remembering CSS classes
- Create custom layouts without flexible panels builder
- Change styles without editing CSS
- Update pages & styles on the live site without pushing code
Can it get even better? Yes!
Panel styles are shown in the editor!
How Is it Different?
What about Panels Extra Styles or Semantic Panels?
These modules are similar,
but the Classy Panel Styles module:
- Shows your Panel Pane & Region styles in the Editor
- Content Editors can apply more than one style set
- Content Editors don't have to remember CSS classes
- Gives you a UI to define new style sets!
butt, how does it work?!?
Storage and ui
- CTools Export UI plugin (aka CTools Object plugin)
- Creates a database table
- Provides full CRUD UI (demo) and Features integration
Style Plugin
- One style plugin definition; provides multiple SubStyles
- Templates insert the classes to Pane & Region markup
JS MAGIC SAUCE
- Form stores the class names into Drupal.settings
- Element IDs "#panel-pane-1" => classes "float-left blue"
- JS added to the Panels editor to apply those classes
Use Sass!
- Delete, modify or add to the example styles that come with the Classy Panel Styles module
-
First define your styles in the interface, then create or modify the styles in the CSS or Sass.
questions?
Download the sandbox module:
http://bit.ly/classy-panel-styles
CPS
By Kendall Totten
CPS
Make it easy for content editors to pick styles & apply classes to panel panes or regions.
- 2,965