Embed Size (px)
Citation preview
BLUNT UMBRELLAS
• Gareth Hall ([email protected])
• Lead developer at Communica (communica.co.nz)
• Consulting
• Drupal, Laravel, Codeigniter, Symphony
WHO AM I
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!
BIGGEST CHALLENGE
HOW?• Multi Country
• Multilingual
• Multi Currency
• Selectable Product Range
• Country Specific Shipping Provider
• Country Specific Stock
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
.
├── 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)
OPEN PDF
/*
* 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;
}
}
}
DEMO
THEMING
• Omega 4
• Sass
• Compass
• Web Components (CSS)
VARIABLES
• Variable should be named to describe it’s intent
$text-grey: #5a5b5e;
$text-color: $text-grey;
$link-blue: #008fd7;
$link-color: $link-blue;
FILE NAMES
• Filename should describe it’s intent
• _colors.scss
• _dimensions.scss
• _typography.scss
CSS WEB COMPONENTS
• It’s encapsulated and reusable CSS components for your
theme
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.
DEMO
PAY OFF
• Ruby compiles pretty fast
• Reduces bloat
• Very readable
• No disinformation
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.
; ========================================
; 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
SETUP
• Create images styles
• Create Mappings and Map
DEMO
GOTCHAS
• Order breakpoints from large to small
• Only works with field formatters
• Tokens require some custom development
/*** 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
/*** 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;
}
PICTURE & TOKENS
HOVER STATE MENU
• Use jQuery hover intent plugin
DRUPAL COMMERCE
SYMPHONY COMMERCE
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’;
QUESTIONS
