Transcript
Formula X
wearepropeople.com
About usWe are a Full Service Digital Agency
We work with Stanford University, Infoblox, Maersk, UNICEF, Amnesty International, Samsung, Badgeville, Apigee, etc.
We are on the market since 2000
We Activate in 8 countries with over 170 professionals
70 % of our projects are on the MIGHTY Drupal.
WE ARE PROPEOPLE!
➢ Frontend development
○ No base theme
○ Responsive design
○ Diamond grid
➢ Backend development
○ Panels everywhere
○ Social media
○ Search
○ Google analytics, events tracker
Agenda
ResponsiveFrontend
ResponsiveFrontend
Say No! for base theme
Frontend
theme.info
name = Formulaxdescription = Formulax custom themepackage = Coreversion = VERSIONcore = 7.x
stylesheets[all][] = css/styles.cssstylesheets[print][] = css/print.css
breakpoints[mobile] = (min-width: 0px)breakpoints[desktop] = (min-width: 768px)
scripts[] = js/response.min.js
; Panels layoutsplugins[panels][layouts] = plugins/layouts
version = "1.0"project = 'Formula X'
Say No! for base theme
Frontend
● No CSS and JS overriding
● No loading of unused CSS and JS files
Panels everywhere
Layouts
Panels everywhere
<div class="two-col">
<div class="container">
<div class="panel-col-first panel-panel">
<div class="panel-col-first-inner">
<?php print $content['left']; ?>
<div class="panel-first-bottom panel-panel">
<?php print $content['left-bottom']; ?>
</div>
</div>
</div>
<div class="panel-col-last panel-panel">
<div class="panel-col-top panel-panel">
<?php print $content['top']; ?>
</div>
<?php print $content['right']; ?>
</div>
</div>
</div>
Grid logic
Grid logic
CSS Logic
.product-grid .views-row a {
display: inline-block;
position: relative;
overflow: hidden;
width: 170px;
height: 170px;
border: 8px solid white;
}
.product-grid .views-row img {
width: 240px;
height: auto;
}
Step 1
CSS Logic
.product-grid .views-row a {
display: inline-block;
position: relative;
overflow: hidden;
width: 170px;
height: 170px;
border: 8px solid white;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform-origin: left top;
-ms-transform-origin: left top;
-webkit-transform-origin: left top;
}
.product-grid .views-row img {
width: 240px;
height: auto;
}
Step 2
CSS Logic
.product-grid .views-row a {
...
}
.product-grid .views-row img {
width: 240px;
height: auto;
position: absolute;
top: 85px;
left: -85px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform-origin: left top;
-ms-transform-origin: left top;
-webkit-transform-origin: left top;
}
Step 3
CSS Logic
.product-grid .views-row a {
...
}
.product-grid .views-row img {
width: 240px;
height: auto;
position: absolute;
top: 85px;
left: -85px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform-origin: left top;
-ms-transform-origin: left top;
-webkit-transform-origin: left top;
}
Step 4
CSS Logic
.product-grid .views-row a {
margin-left: 124px;
//for even rows with js
}
Step 5
Backend development
➢ Backend development
○ Panels everywhere
○ Social media
○ Search
○ Google analytics
Search
Search by keyword
Search
Modules
● search_api
○ search_api_views
● search_api_solr
● search_api_acquia
Search
Search API
Search
Search logic
Search views
Apache Solr
Search page
Render nodes
Build query
Displayresults
get parameters
● node--frmx_product--search-result.tpl.php● node--manicure_img--search-result.tpl.php● node--palette_img--search-result.tpl.php● node--social_content--search-result.tpl.php
SearchSearch by keyword results
Search
Search by color
Search
Search by color results
Social Media
Social MediaSing into popup
Social Media
Module HybridAuth
PanelsModal + minipanels
Panels
Modal + minipanels<?php
/**
* A modal login callback.
*/
function frmx_nm_page_callback($js = NULL, $node = NULL) {
// Fall back if $js is not set.
if (!$js) {
drupal_goto('node/' . $node->nid);
}
ctools_include('modal');
ctools_include('ajax');
ctools_include('context');
$context = ctools_context_create('node', $node);
$context->identifier = t('This node');
$context->keyword = 'node';
$contexts = array('panel-node' => $context);
$output[] = ctools_modal_command_display('Content', frmx_nm_panel_mini($node,
'node_modal', $contexts));
print ajax_render($output);
exit;
}
Google, Events Tracker
Google, Events Tracker
Google, Events Tracker
Google, Events Tracker
Google, Events Tracker
Thank You !!
top related