Showcasing Circle theme file structure, features, libraries, theme settings, starterkit and other front-end related stuff to quickly recap the Circle theme and get started )

2. Files

3. template.php

4. Separate files
/includes/icons.template.inc
/includes/form.template.inc
/includes/menu.template.inc
/includes/css.template.inc
/includes/theme-functions.template.inc

5. _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

6. _preprocess_panels_pane
theme_hook_suggestions:
- panels_pane__TITLE
- panels_pane__class__PANECLASS[0]
- panels_pane__class__PANECLASS

7. Libraries:
- Bootstrap
- Foundation
- Modernizr
- Normalize
- Html5shiv
- Less
- IE 7-9 support

8. Apple
devices
icons

9. Theme settings

10. CSS
- Remove system styles
- Include circle styles
- Use IE styles
- Aggregate all css into 1 file

11. JavaScript
- Include libraries
- Aggregate files into 1
- All scripts in footer
- Use jQuery from CDN

12. Frameworks
- Separate CSS and JS for Bootstrap
- Separate CSS and JS for Foundation
- CDN or locally via libraries (thx Placinta!)

13. Breadcrumb
- custom separator
- add content title
- hide if only home present
- anything else?

14. Circle features:
- Humancs.css
- Less support
+ Mobile support
New features coming up soon!

15. Starterkit

16. Layouts:
- 1,2,3,4,5 Columns
- Bootstrap & Foundation
Designed for Grid system panel styles

17. Layouts have additional settings:
(currently only Bootstrap)

18. Panel pane/region styles:
Grid system columns:
- for framework grids
Pane classes:
- for custom content
and title classes.

19. Grid system columns:

20. Pane classes:

21. For themers

22. Scss support:
/base
_forms
_lists
/variables
_colors
_typography
THEME.styles.scss
.gem file coming soon.

23. IE support:
css/ie.css
css/ie8.css
css/ie9.css
Make sure to enable IE support in settings

24. 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/...

25. Custom templates:
panels-pane.tpl.php
views-view.tpl.php
Both are duplicated in starterkit

26. For developers

27. 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

28. 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,
),
...

29. 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 :)

30. Garland styles:
You can enable Garland in theme settings.
And disable when an actual themer appears.
Hope you’re glad, Vladimir :)

31. Pros and Cons

32. Cons:
- No as large community as Zen or Omega
- No great starting styles*
- Few custom features
- Good only for working with panels
- Often updates

33. 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

34. Thank you!
http://dgo.to/circle
Create your issues and bug reports at
https://drupal.org/project/issues/circle