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
Made with Slides.com
BESbswy
BESbswy
BESbswy
BESbswy