We have just rolled out the Blunt umbrella site for the US in conjunction with the Tile launch. https://www.thetileapp.com This US build was also part of a larger infrastructure setup to cater for the other markets. We first deployed the US site. Shortly there after the NZ and Global site. USA: bluntumbrellas.com/us NZ: bluntumbrellas.com/nz Global: bluntumbrellas.com The site had some interesting challenges with the type of content that was to be displayed within a single page. For example every content page is a Basic Page. Site Features: Mega Menu Background Video jQuery UI Several Sliders Drupal Commerce Picture and Breakpoints In this talk I'll cover: Business needs Site and platform architecture Theming Picture and Breakpoints module Hover state menu Drupal Commerce Memcache Gotha

1. BLUNT UMBRELLAS

2. WHO AM I
• Gareth Hall (gareth@communica.co.nz)
• Lead developer at Communica (communica.co.nz)
• Consulting
• Drupal, Laravel, Codeigniter, Symphony

3. SITE REQUIREMENTS
• Responsive / Device Smart
• Large Imagery
• Immersive Experience
• Modern Commerce Experience
• Global Enforced Branding
• Scalable and Adaptable
• Multi Country
• Multilingual
• Multi Currency
• Selectable Product Range
• Country Specific Shipping
Provider
• Deadline 3 Weeks!

4. BIGGEST CHALLENGE
HOW?
• Multi Country
• Multilingual
• Multi Currency
• Selectable Product Range
• Country Specific Shipping Provider
• Country Specific Stock

5. WE DIDN’T TRY
• Used a multisite setup
• Base Blunt Theme (Platform
Level)
• Base Blunt Module (Platform
Level)
• -
• Each site is their own entity
• Database
• Files
• Theme is required
• Modules if required

6. .
├── sites
├── all
│ ├── modules
│ │ │── contrib
│ │ └── custom
│ │ └── blunt_module
│ └── themes
│ └── blunt_base_theme
├── bluntumbrellas.com
│ ├── files
│ ├── local.settings.php
│ ├── modules
│ └── themes
├── nz.bluntumbrellas.com
│ ├── files
│ ├── libraries
│ ├── local.settings.php
│ ├── modules
│ │ └── blunt_nz (Child of blunt_base_theme)
│ └── themes
└── us.bluntumbrellas.com
├── files
├── libraries
├── local.settings.php
├── modules
│ └── blunt_us
└── themes
└── blunt_us_theme (Child of blunt_base_theme)

7. OPEN PDF

10. /*
* Implements hook_entity_view_mode_alter
*/
function blunt_entity_view_mode_alter(&$view_mode, $context) {
if ($context['entity_type'] == 'node' && $context['entity']->type == 'gallery') {
$node = $context['entity'];
switch ($node->field_gallery_type['und'][0]['value']) {
case 'block_1':
$view_mode = 'flexslider_thumbnail_nav';
break;
case 'block_2':
$view_mode = 'flexslider';
break;
case 'block_3':
$view_mode = 'flexslider_background';
break;
}
}
}

11. DEMO

12. THEMING
• Omega 4
• Sass
• Compass
• Web Components (CSS)

13. VARIABLES
• Variable should be named to describe it’s intent
$text-grey: #5a5b5e;
$text-color: $text-grey;
$link-blue: #008fd7;
$link-color: $link-blue;

14. FILE NAMES
• Filename should describe it’s intent
• _colors.scss
• _dimensions.scss
• _typography.scss

15. CSS WEB COMPONENTS
• It’s encapsulated and reusable CSS components for your
theme

16. HOW
• Filename should match a class, id or element.
• Try to use the SRP (single responsibility principal)
• Meaning the file scope should be small and relevant to
only the parent selector.

17. DEMO

18. PAY OFF
• Ruby compiles pretty fast
• Reduces bloat
• Very readable
• No disinformation

19. PICTURE AND
BREAKPOINTS
• Picture module will deliver alternate image sources based
on device capabilities to prevent wasted bandwidth and
optimise display for both screen and print.

20. ; ========================================
; Breakpoints
; ========================================
breakpoints[desktop] = (min-width: 1024px)
breakpoints[tablet] = (min-width: 768px) and (max-width: 1024px)
breakpoints[small_tablet] = (min-width: 414px)
breakpoints[mobile] = (min-width: 320px)
multipliers[desktop][] = 2x
multipliers[tablet][] = 2x
multipliers[small_tablet][] = 2x
multipliers[mobile][] = 2x
DEFINE YOUR
BREAKPOINTS

21. SETUP
• Create images styles
• Create Mappings and Map

22. DEMO

23. GOTCHAS
• Order breakpoints from large to small
• Only works with field formatters
• Tokens require some custom development

24. /**
* Implements hook_token_info().
*/
function blunt_token_info() {
return array(
'tokens' => array(
'term' => array(
'technology_badge' => array(
'name' => t('Picture: Technology Badge'),
'description' => t('Picture group token for @field', array('@field' =>
'technology_badge')),
),
),
),
);
}
PICTURE & TOKENS

25. PICTURE & TOKENS
/**
* Implements hook_tokens().
*/
function blunt_tokens($type, $tokens, array $data = array(), array $options = array()) {
if ($type == 'term' && !empty($data['term'])) {
if (array_key_exists('technology_badge', $tokens)) {
return blunt_get_replacement($tokens, $data, 'technology_badge');
}
}
return NULL;
}
/**
* Get replacement values for our tokens.
*/
function blunt_get_replacement($tokens, $data, $group) {
$node = $data['term'];
$item['item'] = $node->field_image['und'][0];
$mappings = (object) picture_mapping_load($group);
$item['breakpoints'] = picture_get_mapping_breakpoints($mappings);
$item['uri'] = $item['item']['uri'];
$replacements[$tokens[$group]] = theme('picture', $item);
return $replacements;
}

26. HOVER STATE MENU
• Use jQuery hover intent plugin

27. DRUPAL COMMERCE

28. SYMPHONY COMMERCE

29. MEMCACHE GOTCHA
• Configure it correctly
$conf['cache_backends'][] =
'sites/all/modules/memcache/memcache.inc';
$conf['cache_class_cache_form'] = 'DrupalDatabaseCache';
$conf['cache_default_class'] = 'MemCacheDrupal';
$conf['memcache_key_prefix'] = ‘something_unique’;

30. QUESTIONS