panels: how to fire front-end developer

15

Click here to load reader

Upload: kirill-borzov

Post on 29-Jan-2018

72 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Panels: how to fire  Front-end developer

Panels: how to fire

Front-end developer

by Kirill Borzov (oresh)

Page 2: Panels: how to fire  Front-end developer

About me

Front-end developer for 7 years

Drupal themer for 3 years

Panels user for 2 years

Panels lover for a year

drupal.org/u/oresh

github.com/oresh

Page 3: Panels: how to fire  Front-end developer

My tasks

Templates

Layouts

Styles

Responsive

Scripts

Page 4: Panels: how to fire  Front-end developer

My tasks

Templates

Layouts

Styles

Responsive

Scripts

Page 5: Panels: how to fire  Front-end developer

My tasks

Templates

Layouts

Styles

Responsive

Scripts

Page 6: Panels: how to fire  Front-end developer

My tasks

Templates

Layouts

Styles

Responsive

Scripts

Page 7: Panels: how to fire  Front-end developer

My tasks

Templates

Layouts

Styles

Responsive

Scripts

Page 8: Panels: how to fire  Front-end developer

My tasks

Templates

Layouts

Styles

Responsive

Scripts

Page 9: Panels: how to fire  Front-end developer

Aaaaaaaand

Page 10: Panels: how to fire  Front-end developer

Panels

Templates

Layouts

Styles

Responsive

Scripts

Page 11: Panels: how to fire  Front-end developer

Panels (Templates)

function HOOK_preprocess_panels_pane(&$vars) {$vars['theme_hook_suggestions'][] = check_plain($pane_title);$single_class = check_plain($pane_classes[0]);$vars['theme_hook_suggestions'][] = 'pp__class__' . $single_class;$vars['theme_hook_suggestions'][] = 'pp__class__' . str_replace(' ', '_', $classes);

// custom form item$vars['theme_hook_suggestions'][] = 'panels_pane__class__' . $vars[‘panel_template’];

Page 12: Panels: how to fire  Front-end developer

Panels (Layouts)

Display Suite

Panels Frame

Views Panel fields

cTools plugins

Circle theme (and other) plugins

Page 13: Panels: how to fire  Front-end developer

Panels (Styles)

Classy Panel Styles (broken :[ )

Bootstrap/Foundation framework

Panels Bootstrap styles

+ Reusable styles

+ Adobe Project Parfait

+ Sass structure preparation

Page 14: Panels: how to fire  Front-end developer

Panels (Responsive)

Circle theme plugins

Panels Grid System

Responsive Panels Grids

Any custom implementation.

Page 15: Panels: how to fire  Front-end developer

Panels (Scripts)

Panels Styles Pack

Libraries

You are a developer,

you can write scripts yourself =]