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?

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

Made with Slides.com

CPS

Make it easy for content editors to pick styles & apply classes to panel panes or regions.

  • 2,831

More from Kendall Totten