drupal 7 — circle theme

34

Upload: kirill-borzov

Post on 29-Jan-2018

45 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Drupal 7 — Circle theme
Page 2: Drupal 7 — Circle theme

Files

Page 3: Drupal 7 — Circle theme

template.php

Page 4: Drupal 7 — Circle theme

Separate files

/includes/icons.template.inc

/includes/form.template.inc

/includes/menu.template.inc

/includes/css.template.inc

/includes/theme-functions.template.inc

Page 5: Drupal 7 — Circle theme

_preprocess

_preprocess_menu_link

_preprocess_image_style

_preprocess_panels_pane

_theme_registry_alter*

_js_alter / _css_alter

_breadcrumb

_field

_form_alter

_form_element / _form_element_label

_theme

Page 6: Drupal 7 — Circle theme

_preprocess_panels_pane

theme_hook_suggestions:

- panels_pane__TITLE

- panels_pane__class__PANECLASS[0]

- panels_pane__class__PANECLASS

Page 7: Drupal 7 — Circle theme

Libraries:

- Bootstrap

- Foundation

- Modernizr

- Normalize

- Html5shiv

- Less

- IE 7-9 support

Page 8: Drupal 7 — Circle theme

Apple

devices

icons

Page 9: Drupal 7 — Circle theme

Theme settings

Page 10: Drupal 7 — Circle theme

CSS

- Remove system styles

- Include circle styles

- Use IE styles

- Aggregate all css into 1 file

Page 11: Drupal 7 — Circle theme

JavaScript

- Include libraries

- Aggregate files into 1

- All scripts in footer

- Use jQuery from CDN

Page 12: Drupal 7 — Circle theme

Frameworks

- Separate CSS and JS for Bootstrap

- Separate CSS and JS for Foundation

- CDN or locally via libraries (thx Placinta!)

Page 13: Drupal 7 — Circle theme

Breadcrumb

- custom separator

- add content title

- hide if only home present

- anything else?

Page 14: Drupal 7 — Circle theme

Circle features:

- Humancs.css

- Less support

+ Mobile support

New features coming up soon!

Page 15: Drupal 7 — Circle theme

Starterkit

Page 16: Drupal 7 — Circle theme

Layouts:

- 1,2,3,4,5 Columns

- Bootstrap & Foundation

Designed for Grid system panel styles

Page 17: Drupal 7 — Circle theme

Layouts have additional settings:

(currently only Bootstrap)

Page 18: Drupal 7 — Circle theme

Panel pane/region styles:

Grid system columns:

- for framework grids

Pane classes:

- for custom content

and title classes.

Page 19: Drupal 7 — Circle theme

Grid system columns:

Page 20: Drupal 7 — Circle theme

Pane classes:

Page 21: Drupal 7 — Circle theme

For themers

Page 22: Drupal 7 — Circle theme

Scss support:

/base

_forms

_lists

/variables

_colors

_typography

THEME.styles.scss

.gem file coming soon.

Page 23: Drupal 7 — Circle theme

IE support:

css/ie.css

css/ie8.css

css/ie9.css

Make sure to enable IE support in settings

Page 24: Drupal 7 — Circle theme

Custom layouts and styles:

Theme layouts and styles are part of

starterkit, so make sure to delete layouts

that you don’t need. Path to layouts defined

automatically in starterkit theme.

/plugins/layouts/…

/plugins/styles/...

Page 25: Drupal 7 — Circle theme

Custom templates:

panels-pane.tpl.php

views-view.tpl.php

Both are duplicated in starterkit

Page 26: Drupal 7 — Circle theme

For developers

Page 27: Drupal 7 — Circle theme

Custom theme functions:

Currently some simple functions.

You can preprocess Circle theme function

and add your stuff.

Plans:

circle_theme_table

circle_theme_fieldset

circle_theme_accordion

Page 28: Drupal 7 — Circle theme

Renderable arrays:

$submitted = array(

'label' => array(

'#prefix' => '<span class="submitted-by-name">',

'#markup' => t('Submitted by '),

'#suffix' => '</span>',

'#weight' => -20,

),

'username' => array(

'#markup' => $variables['name'],

'#weight' => -15,

),

'on_text' => array(

'#prefix' => '<span class="submitted-by-on">',

'#markup' => t(' on '),

'#suffix' => '</span>',

'#weight' => -10,

),

...

Page 29: Drupal 7 — Circle theme

Menus:

Custom menu_preprocess keeps all the menu items

information.

Class attribute fixes:

You can add classes for theme functions that didn’t

accept them before. Ex.: _field, _menu_tree

* Some functions are still in progress :)

Page 30: Drupal 7 — Circle theme

Garland styles:

You can enable Garland in theme settings.

And disable when an actual themer appears.

Hope you’re glad, Vladimir :)

Page 31: Drupal 7 — Circle theme

Pros and Cons

Page 32: Drupal 7 — Circle theme

Cons:

- No as large community as Zen or Omega

- No great starting styles*

- Few custom features

- Good only for working with panels

- Often updates

Page 33: Drupal 7 — Circle theme

Pros

+ Bootstrap and Foundation out of the box

+ Great Panels support

+ Clean markup and no styles

+ Configures a lot from theme settings

+ Often updates

+ Commit rights

Page 34: Drupal 7 — Circle theme

Thank you!

http://dgo.to/circle

Create your issues and bug reports athttps://drupal.org/project/issues/circle