Formula x

1,105 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,105
On SlideShare
0
From Embeds
0
Number of Embeds
602
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Formula x

  1. 1. Formula X wearepropeople.com
  2. 2. About us We are a Full Service Digital Agency We are on the market since 2000 We Activate in 8 countries with over 170 professionals We work with Stanford University, Infoblox, Maersk, UNICEF, Amnesty International, Samsung, Badgeville, Apigee, etc. 70 % of our projects are on the MIGHTY Drupal. WE ARE PROPEOPLE!
  3. 3. Agenda ➢ Frontend development ○ No base theme ○ Responsive design ○ Diamond grid ➢ Backend development ○ Panels everywhere ○ Social media ○ Search ○ Google analytics, events tracker
  4. 4. Frontend Responsive
  5. 5. Frontend Responsive
  6. 6. Frontend Say No! for base theme theme.info name = Formulax description = Formulax custom theme package = Core version = VERSION core = 7.x stylesheets[all][] = css/styles.css stylesheets[print][] = css/print.css breakpoints[mobile] = (min-width: 0px) breakpoints[desktop] = (min-width: 768px) scripts[] = js/response.min.js ; Panels layouts plugins[panels][layouts] = plugins/layouts version = "1.0" project = 'Formula X'
  7. 7. Frontend Say No! for base theme ● No CSS and JS overriding ● No loading of unused CSS and JS files
  8. 8. Panels everywhere Layouts
  9. 9. 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>
  10. 10. Grid logic
  11. 11. Grid logic
  12. 12. CSS Logic Step 1 .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; }
  13. 13. CSS Logic Step 2 .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; }
  14. 14. CSS Logic Step 3 .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; }
  15. 15. CSS Logic Step 4 .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; }
  16. 16. CSS Logic Step 5 .product-grid .views-row a { margin-left: 124px; //for even rows with js }
  17. 17. Backend development ➢ Backend development ○ Panels everywhere ○ Social media ○ Search ○ Google analytics
  18. 18. Search Search by keyword
  19. 19. Search Modules ● search_api ○ search_api_views ● search_api_solr ● search_api_acquia
  20. 20. Search Search API
  21. 21. Search Search logic Render nodes Display results Search page ● ● ● ● 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 Search views get parameters Build query Apache Solr
  22. 22. Search Search by keyword results
  23. 23. Search Search by color
  24. 24. Search Search by color results
  25. 25. Social Media
  26. 26. Social Media Sing into popup
  27. 27. Social Media Module HybridAuth
  28. 28. Panels Modal + minipanels
  29. 29. 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; }
  30. 30. Google, Events Tracker
  31. 31. Google, Events Tracker
  32. 32. Google, Events Tracker
  33. 33. Google, Events Tracker
  34. 34. Google, Events Tracker
  35. 35. Thank You !!

×